Instantly share code, notes, and snippets.

Embed
What would you like to do?
This is a little racing game created with Javascript and HTML.
$(document).ready(function() {
var end_of_track = 15;
var players = [
{
id: 1,
position: 0,
keycode: 80,
css_locator: '#player1_strip'
},
{
id: 2,
position: 0,
keycode: 81,
css_locator: '#player2_strip'
}
];
function advancePlayer(keyCode) {
players.forEach(function(player){
if (keyCode == player.keycode && players[0].position < end_of_track && players[1].position < end_of_track) {
move_player(player.css_locator);
player.position++;
winner(player.position, player.id);
}
});
}
$(document).keyup(function(e) {
advancePlayer(e.keyCode);
});
});
function move_player(strip) {
$(strip).find('td.active').removeClass('active').next().addClass('active');
}
function winner(player, num) {
if (player > 14) {
alert("Player " + num + " has won!");
}
}
body {
font-family: 'Helvetica', sans-serif;
}
h1 {
text-align: center;
}
.description {
height: 80px;
width: 500px;
margin: 0 auto;
}
.racer_table {
width: 1400px;
margin: 0 auto;
border: solid 3px;
}
.racer_table td {
background-color: white;
height: 90px;
width: 64px;
text-align: center;
}
.racer_table td.active {
background-color: green;
}
<!doctype html>
<html>
<head>
<title>racing boxes</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="application.js"></script>
<link rel="stylesheet" href="racer_table.css" type="text/css" />
</head>
<body>
<h1>Racing Boxes</h1>
<div class="description">
This is a little game created with Javascript and HTML. Play by pressing the keys "P" or "Q" as quickly as you can across the finish line. Player One is "P". Player Two is "Q".
</div>
<table class="racer_table">
<tr id="player1_strip">
<td class="active"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>FINISH</td>
</tr>
<tr id="player2_strip">
<td class="active"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>LINE</td>
</tr>
</table>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment