Re-create the non-wifi secret dinosaur game
First of you will have your HTML document which right now should look like this:
<html>
<head>
<link rel="style.css"></link>
</head>
<body>
<script src="script.js">
</body>
</html>But after you do everything it should look like this:
<html>
<head>
<title>Dino Game Remix</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="game" onclick='jump()'>
<div id="character"></div>
<div id="block"></div>
<h3 id='info'>Click to begin</h3>
</div>
<script src="script.js"></script>
</body>
</html>and the JavaScript would look like this:
var character = document.getElementById('character');
var block = document.getElementById('block');
function jump(){
document.getElementById('info').innerHTML = 'Dodge the blue square';
if(character.classList != "animate"){
character.classList.add('animate');
}
setTimeout(function(){
character.classList.remove('animate');
},500);
var checkDead = setInterval(function(){
var characterTopValue = parseInt(window.getComputedStyle(character).getPropertyValue('top'));
var blockLeftValue = parseInt(window.getComputedStyle(block).getPropertyValue('left'));
if(blockLeftValue<20 && blockLeftValue>0 && characterTopValue>130){
block.style.display = 'none';
character.style.display = 'none';
alert('You Lost');
document.getElementById('info').innerHTML = 'Reload to Resest (Working on automated reset)';
}
},0.01)
}and the CSS would look like this:
*{
margin:0;
padding:0;
}
#game{
width:500px;
height:200px;
border:1px solid black;
}
#character{
width:20px;
height:50px;
background-color:red;
position:relative;
top:150px;
}
.animate{
animation: jump 500ms;
}
@keyframes jump{
0%{top:150px;}
50%{top:90px;}
100%{top:150px;}
}
#block{
width:20px;
height:20px;
background-color:blue;
position: relative;
top:130px;
left: 480px;
animation: block 3s infinite linear;
}
@keyframes block{
0%{left:480px;}
100%{left:-40px;}
}Hope you enjoyed the tutorial!
By: Anonymous First-Time Poster
Voters
KENNETHTRIPP (50)
I wouldn't call this a tutorial, but I see it is your first post, so maybe you could just add a little explanation to the code. It is a pretty cool game though.
Good job making a tutorial, but next time, try not copy a youtube video.