Skip to content

Instantly share code, notes, and snippets.

@kdefliese

kdefliese/race.css

Last active August 29, 2015 14:16
Show Gist options
  • Save kdefliese/9c1337f6cc1324d161b7 to your computer and use it in GitHub Desktop.
Save kdefliese/9c1337f6cc1324d161b7 to your computer and use it in GitHub Desktop.
Download ZIP
race game for jquery up assignment
Raw
race.css
.header {
width: 100%;
height: 50px;
margin: auto;
text-align: center;
}
h1 {
text-align: center;
font-size: 24px;
}
h2 {
text-align: center;
font-size: 18px;
display: inline-block;
}
#go {
margin: auto;
font-size: 14px;
width: 50px;
display: inline-block;
z-index: 3;
border-radius: 5px;
background-color: red;
}
.grass {
background-color: lightgreen;
width: 100%;
height: 100px;
}
.mystery_box1 {
display: inline-block;
width: 50px;
height: 50px;
background-color: yellow;
text-align: center;
position: relative;
left: 300px;
top: 5px;
z-index: 1;
}
.mystery_box2 {
display: inline-block;
width: 50px;
height: 50px;
background-color: yellow;
text-align: center;
position: relative;
left: 800px;
top: 5px;
z-index: 2;
}
p {
display: inline-block;
font-weight: bold;
font-size: 24px;
text-align: center;
position: relative;
top: -8px;
}
.road {
width: 100%;
height: 150px;
background-color: lightgray;
display: block;
position: relative;
top: -50px;
z-index: 0;
}
.divider {
width: 100%;
height: 7px;
background-color: yellow;
position: relative;
top: -50px;
}
.grassBottom {
background-color: lightgreen;
width: 100%;
height: 100px;
position: relative;
top: -50px;
}
#image {
z-index: 3;
position: absolute;
left: 950px;
top: 365px;
display: inline-block;
visibility: hidden;
}
#turtle {
z-index: 3;
position: absolute;
left: 20px;
top: 215px;
display: inline-block;
}
#rabbit {
z-index: 3;
position: absolute;
left: 20px;
top: 365px;
display: inline-block;
}
.winner {
border: 5px solid red;
padding: none;
display: inline;
position: absolute;
}
Raw
race.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Big Race</title>
<link rel="stylesheet" href="race.css">
</head>
<body>
<section class="header">
<h1>The Big Race</h1>
<h2>Are you ready to race?</h2>
<button id="go">Go!</button>
</section>
<section class="grass">
</section>
<section class="mystery_box1">
<p>?</p>
</section>
<section class="mystery_box2">
<p>?</p>
</section>
<section id="turtle">
<img src="https://farm9.staticflickr.com/8657/15934066793_d459075400_s.jpg" />
</section>
<section id="rabbit">
<img src="https://farm8.staticflickr.com/7328/15931703994_d14b665b55_s.jpg" />
</section>
<section class="road">
</section>
<section class="divider">
</section>
<section class="road">
</section>
<section class="grassBottom">
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="race.js"></script>
</body>
</html>
Raw
race.js
$('#go').on('click', function() {
var winningImage = 'reset';
console.log(winningImage);
var Animal = function(s,f,n,t) {
this.speed = s;
this.focus = f;
this.name = n;
this.position = 0;
this.leftMargin = 20;
this.animalType = t;
this.report = function() {
return this.name + " is at " + this.position;
};
this.run = function() {
if(this.focus > (Math.random() * 10)) {
console.log(this.speed);
this.position += this.speed;
this.leftMargin += this.speed;
$(this.animalType).animate({left: this.leftMargin + 'px'},50);
}
};
this.powerup1 = function() {
if((Math.random() * 10) < 5) {
this.speed += 5;
}
else if (((Math.random() * 10) >=5) && ((Math.random() * 10) < 9)) {
this.speed *= 2;
}
else {
this.speed -= 5;
}
};
this.powerup2 = function() {
if((Math.random() * 10) < 5) {
this.speed -= 5;
}
else if (((Math.random() * 10) >=5) && ((Math.random() * 10) < 9)) {
this.speed += 5;
}
else {
this.speed *= 2;
}
};
}
var turtle = new Animal(30,8,"Beth","#turtle");
var rabbit = new Animal(50,3,"David","#rabbit");
var distance = 1000;
while(turtle.position < distance && rabbit.position < distance) {
if (turtle.position >= 250 && turtle.position <=300) {
turtle.powerup1();
turtle.run();
console.log('condition 1 - turtle.leftMargin is ' + turtle.leftMargin);
console.log('turtle position is ' + turtle.report());
}
else if (turtle.position >= 700 && turtle.position <=750) {
turtle.powerup2();
turtle.run();
console.log('condition 2 - turtle.leftMargin is ' + turtle.leftMargin);
console.log('turtle position is ' + turtle.report());
}
else {
turtle.run();
console.log('condition 3 - turtle.leftMargin is ' + turtle.leftMargin);
console.log('turtle position is ' + turtle.report());
}
if (rabbit.position >= 250 && rabbit.position <=300) {
rabbit.powerup1();
rabbit.run();
console.log('condition 1 - rabbit.leftMargin is ' + rabbit.leftMargin);
console.log('rabbit position is ' + rabbit.report());
}
else if (rabbit.position >= 700 && rabbit.position <=750) {
rabbit.powerup2();
rabbit.run();
console.log('condition 2 - rabbit.leftMargin is ' + rabbit.leftMargin);
console.log('rabbit position is ' + rabbit.report());
}
else {
rabbit.run();
console.log('condition 3 - rabbit.leftMargin is ' + rabbit.leftMargin);
console.log('rabbit position is ' + rabbit.report());
}
};
console.log(turtle.report());
console.log(rabbit.report());
if (turtle.position > rabbit.position) {
winningImage = $('#turtle');
}
else {
winningImage = $('#rabbit');
}
$(winningImage).hover(function() {
$(this).addClass('winner');
},
function() {
$(this).removeClass('winner');
}
);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment