bomb stoper
you must stop the the bomb
by Daniel Hall
HTML
<div id="container">
<h1>
train stoper
</h1>
<ul>
<li>Click the train to make it go faster.</li>
<li>Click the Stop button to stop it.</li>
<li>and go so.</li>
<li>and try to stop when you get to end of the track</li>
</ul>
</p>
<div id="track">
<div id="train"></div>
<img src="www.">
</div>
</div>
<button id="stopButton">Stop!</div>
</div>
<div id="d"><p>
stop
</p>
CSS
body {
font-family: Arial, sans-serif;
background-color: #00FF00;
}
#container {
padding: 10px;
width: 333%;
height: %;
background-color:blue;
}
#track {
width: 999%;
top: 50%;
border-top: 2px solid gray;
border-bottom: 2px solid gray;
}
#train {
height: 92px;
width: 100px;
position: relative;
left: 0px;
top: 30%;
background-color: yellow;
}
#stopButton {
padding-top: 15px;
margin: 10px auto;
background-color: white;
width: 3329%;
height: 50px;
color: red;
text-align:center;
font-size: 24px;
line-height: 30px;
}
#d {
position: absolute;
left: 333%;
top: 25%;
width: 14%;
height: 20%;
border-radius: 50%;
background-color: red;
text-align:center;
}
JavaScript
function checkPosition(currentPosition) {
if (currentPosition === 9999999) {
alert("you win");
console.log("you win!");
clearInterval(animation);
}
}
function stopTrain() {
if (trainPosition < 9999999) {
clearInterval(animation);
console.log("you lose I am going to rock out of chamb! boo boo boo boo boo doo");
}
} var trainSpeed = 99;
var trainPosition = 99;
var animation;
var train = document.getElementById("train");
train.addEventListener("click", speedUp);
var stopButton = document.getElementById("stopButton");
stopButton.addEventListener("click", stopTrain);
function speedUp() {
if (trainSpeed > 0) {
trainSpeed -= 999;
}
console.log("train speed: " + trainSpeed);
clearInterval(animation);
animation = setInterval(frame, trainSpeed);
function frame() {
trainPosition += 2;
train.style.left = trainPosition + 'px';
console.log(trainPosition);
checkPosition(trainPosition);
}
}