-
-
Save emiliecoudrat/fa7e95504e334d1370a8 to your computer and use it in GitHub Desktop.
This file contains hidden or 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(){ | |
| //On crée la piste de course | |
| var trackSize = 20; | |
| generateTrack(trackSize); | |
| //On lance le jeu | |
| runGame(); | |
| }); | |
| function generateTrack(trackSize){ | |
| // On crée les tds de la piste | |
| for (var i = 0; i < trackSize - 1; i++){ | |
| $("#track-1").append("<td></td>"); | |
| $("#track-2").append("<td></td>"); | |
| } | |
| // On ajoute la finish line | |
| $("#track-1").append("<td class='finish-line'></td>"); | |
| $("#track-2").append("<td class='finish-line'></td>"); | |
| } | |
| function runGame(){ | |
| //Quand un jouer tape sur une touche clavier.. | |
| $(document).on("keyup", function(event){ | |
| //..On fait avancer les wagons en fonction de la touche | |
| if (event.keyCode == 65){ | |
| // on fait avancer wagon 1 si la touche "A" a été entrée | |
| $("#track-1 .here").removeClass("here").next().addClass("here"); | |
| } | |
| if (event.keyCode == 80){ | |
| // on fait avancer wagon 2 si la touche "P" a été entrée | |
| $("#track-2 .here").removeClass("here").next().addClass("here"); | |
| } | |
| // on check si le joueur arrive sur la finish line | |
| if ($("#track-1 .here").hasClass("finish-line")){ | |
| $(".here").removeClass("here"); | |
| $("#game-box .player-1").fadeIn(1000); | |
| } | |
| if ($("#track-2 .here").hasClass("finish-line")){ | |
| $(".here").removeClass("here"); | |
| $("#game-box .player-2").fadeIn(1000); | |
| } | |
| }) | |
| } |
This file contains hidden or 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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>WAGON RACE</title> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> | |
| <link rel="stylesheet" href="main.css"> | |
| <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> | |
| <!-- Leave those next 4 lines if you care about users using IE8 --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> | |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body class="text-center"> | |
| <div id="game-box"> | |
| <h1>WAGON RACE</h1> | |
| <div class="player-1"> | |
| <p>Player 1 has won</p> | |
| <a href='/' class='btn btn-danger'>Restart</a> | |
| </div> | |
| <div class="player-2"> | |
| <p>Player 2 has won</p> | |
| <a href='/' class='btn btn-danger'>Restart</a> | |
| </div> | |
| </div> | |
| <table id="race-table"> | |
| <tbody> | |
| <tr id="track-1"> | |
| <td class="here"></td> | |
| </tr> | |
| <tr id="track-2"> | |
| <td class="here"></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <!-- Including Bootstrap JS (with its jQuery dependency) so that dynamic components work --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| <script src="game.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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{ | |
| padding-top: 50px; | |
| } | |
| #race-table td{ | |
| width: 50px; | |
| height: 50px; | |
| } | |
| #track-1 .here{ | |
| background-image: url('../img/player_1.png'); | |
| background-size: 100%; | |
| background-repeat: no-repeat; | |
| } | |
| .finish-line{ | |
| background: black; | |
| } | |
| #track-2 .here{ | |
| background-image: url('../img/player_2.png'); | |
| background-size: 100%; | |
| background-repeat: no-repeat; | |
| } | |
| #game-box{ | |
| border: 1px solid black; | |
| padding: 20px; | |
| width: 300px; | |
| margin: 0 auto; | |
| margin-bottom: 100px; | |
| } | |
| #game-box .player-1, #game-box .player-2{ | |
| display: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment