Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Rabbit Game Bar Graph
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Race 3</title>
<link rel="stylesheet" href="style3.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script3.js"></script>
</head>
<body>
<ul>
<li>
<div id="tortoise"></div>
</li>
<li>
<div id="hare"></div>
</li>
<li>
<div id="fish"></div>
</li>
</ul>
</body>
</html>
$(document).ready(function() {
var tortoise, hare, fish, km;
function Animal(name, speed, focus) {
this.name = name;
this.speed = speed;
this.focus = focus;
this.position = 0;
this.run = function() {
if (Math.random() * 10 < this.focus) {
this.position = this.position + this.speed;
}
}
}
tortoise = new Animal("Beth", 1, 10);
hare = new Animal("Peter", 4, 2);
fish = new Animal("Fish", 2, 4);
km = 20;
$(window).keydown(function(e) {
if (e.keyCode == '32' && tortoise.position < km && hare.position < km && fish.position < km) {
tortoise.run();
hare.run();
fish.run();
$('#tortoise').width(tortoise.position * 10 + 'px');
$('#hare').width(hare.position * 10 + 'px');
$('#fish').width(fish.position * 10 + 'px');
}
});
});
li {
list-style: none;
margin-top: 10px;
width: 200px;
height: 20px;
background-color: black;
}
div {
width: 0px;
height: 20px;
}
#tortoise {
background-color: green;
}
#hare {
background-color: gray;
}
#fish {
background-color: blue;
}
@erkgmz
Copy link

erkgmz commented Nov 26, 2014

$(window).keydown(function(e)

What does this do?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment