Learn to Code via Tutorials on Repl.it!

← Back to all posts
Re-create the non-wifi secret dinosaur game
Gsquadgamers (1)

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

Comments
hotnewtop
EpicGamer007 (1607)

Good job making a tutorial, but next time, try not copy a youtube video.

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.