Last active
April 20, 2018 14:47
-
-
Save BlandineBurteaux/2947d939fb216bce887c0c14c2ab4e2a to your computer and use it in GitHub Desktop.
ShiFuMI
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| display: flex; | |
| flex-direction: column; | |
| font-size: 3vh; | |
| text-align: center; | |
| } | |
| .hide { | |
| display: none; | |
| } | |
| #opponent_choice, #your_choice { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 5vh; | |
| line-height: 5vh; | |
| margin: 3vh; | |
| min-height: calc(9vh + 4px); | |
| min-width: 20vh; | |
| } | |
| .choice { | |
| background: white; | |
| border-radius: 5vh; | |
| border: 1px solid #BDBDBD; | |
| padding: 2vh; | |
| } | |
| button { | |
| background: white; | |
| border-radius: 5vh; | |
| box-shadow: 1vh 1vh #BDBDBD; | |
| font-size: 12vh; | |
| margin: 3vh; | |
| min-width: 18vh; | |
| } | |
| button span { | |
| display: block; | |
| color: #666; | |
| font-size: 3vh; | |
| } | |
| #message { | |
| font-size: 5vh; | |
| line-height: 5vh; | |
| margin: 3vh; | |
| min-height: 5vh; | |
| opacity: 0; | |
| } | |
| #pierre { | |
| color: #795548; | |
| } | |
| #feuille { | |
| color: #8BC34A; | |
| } | |
| #ciseau { | |
| color: #00B8D4; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="fr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Shi Fu Mi</title> | |
| <meta name="author" content="Blandine Burteaux" /> | |
| <meta name="description" content="shifumi, pierre feuille ciseau, jeu" /> | |
| <meta name="keywords" content="shifumi, pierre feuille ciseau, jeu" /> | |
| <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css"> | |
| <link rel="stylesheet" href="assets/css/index.css"> | |
| <script src="node_modules/jquery/dist/jquery.min.js"></script> | |
| <script src="assets/js/index.js"></script> | |
| </head> | |
| <body> | |
| <div id="opponent"> | |
| <div class="player"><i class="fa fa-user"></i> Votre adversaire <span id="opponent_win">0</span> partie(s) gagnée(s)</div> | |
| </div> | |
| <div id="opponent_choice"> | |
| <div class="hide choice"> | |
| <i data-value="pierre" class="hide fa fa-hand-rock-o"></i> | |
| <i data-value="feuille" class="hide fa fa-hand-paper-o"></i> | |
| <i data-value="ciseau" class="hide fa fa-hand-scissors-o"></i> | |
| </div> | |
| </div> | |
| <div id="message"></div> | |
| <div id="your_choice"> | |
| <div class="hide choice"> | |
| <i data-value="pierre" class="hide fa fa-hand-rock-o"></i> | |
| <i data-value="feuille" class="hide fa fa-hand-paper-o"></i> | |
| <i data-value="ciseau" class="hide fa fa-hand-scissors-o"></i> | |
| </div> | |
| </div> | |
| <div id="you"> | |
| <div class="player"><i class="fa fa-user"></i> Vous <span id="your_win">0</span> partie(s) gagnée(s)</div> | |
| <button id="pierre" value="pierre"> | |
| <i class="fa fa-hand-rock-o"></i> | |
| <span>Pierre</span> | |
| </button> | |
| <button id="feuille" value="feuille"> | |
| <i class="fa fa-hand-paper-o"></i> | |
| <span>Feuille</span> | |
| </button> | |
| <button id="ciseau" value="ciseau"> | |
| <i class="fa fa-hand-scissors-o"></i> | |
| <span>Ciseau</span> | |
| </button> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function () { | |
| var shifumi_values = ['pierre', 'feuille', 'ciseau']; | |
| var opponent_win = 0; | |
| var your_win = 0; | |
| $('#you button').click(function(){ | |
| var my_value = $(this).val(); | |
| var opponent_value = shifumi_values[Math.floor(Math.random() * shifumi_values.length)];; | |
| var message = ""; | |
| $('#opponent_choice .choice').hide(); | |
| $('#your_choice .choice').hide(); | |
| $('.choice .fa').hide(); | |
| if (my_value == opponent_value) { | |
| message = "Égalité !"; | |
| } | |
| else if ( | |
| (my_value == "pierre" && opponent_value == "ciseau") | |
| || (my_value == "feuille" && opponent_value == "pierre") | |
| || (my_value == "ciseau" && opponent_value == "feuille") | |
| ) { | |
| message = "Gagné !"; | |
| your_win++; | |
| } | |
| else { | |
| message = "Perdu !"; | |
| opponent_win++; | |
| } | |
| $('#message').text('Shi !') | |
| .animate({ opacity: '1' }, 500) | |
| .animate({ opacity: '0' }, 500); | |
| setTimeout(() => { | |
| $('#message').text('Fu !') | |
| .animate({ opacity: '1' }, 500) | |
| .animate({ opacity: '0' }, 500); | |
| setTimeout(() => { | |
| $('#message').text('Mi !') | |
| .animate({ opacity: '1' }, 500) | |
| .animate({ opacity: '0' }, 500); | |
| setTimeout(() => { | |
| $('#opponent_choice .choice').show(); | |
| $('#opponent_choice .choice .fa[data-value='+opponent_value+']').show(); | |
| $('#your_choice .choice').show(); | |
| $('#your_choice .choice .fa[data-value='+my_value+']').show(); | |
| $('#message').text(message) | |
| .animate({ opacity: '1' }, 500) | |
| .animate({ opacity: '0' }, 500); | |
| $('#your_win').text(your_win); | |
| $('#opponent_win').text(opponent_win); | |
| }, 1000); | |
| }, 1000); | |
| }, 1000); | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "requires": true, | |
| "lockfileVersion": 1, | |
| "dependencies": { | |
| "bootstrap": { | |
| "version": "4.1.0", | |
| "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.0.tgz", | |
| "integrity": "sha512-kCo82nE8qYVfOa/Z3hL98CPgPIEkh6iPdiJrUJMQ9n9r0+6PEET7cmhLlV0XVYmEj5QtKIOaSGMLxy5jSFhKog==" | |
| }, | |
| "font-awesome": { | |
| "version": "4.7.0", | |
| "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", | |
| "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=" | |
| }, | |
| "fullpage.js": { | |
| "version": "2.9.7", | |
| "resolved": "https://registry.npmjs.org/fullpage.js/-/fullpage.js-2.9.7.tgz", | |
| "integrity": "sha512-r2a7h/xAFRningddSAP/xZtZxG3dxvmAc71ckommFsHF/EAPu5gw1CU4DRc2ErRg10lLX1gBoybISpa5F3ps5A==", | |
| "requires": { | |
| "jquery": "3.3.1" | |
| } | |
| }, | |
| "hammerjs": { | |
| "version": "2.0.8", | |
| "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz", | |
| "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=" | |
| }, | |
| "jquery": { | |
| "version": "3.3.1", | |
| "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz", | |
| "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==" | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment