Gracetoffy's blog

Dinosaur game remix: using CSS animations and Javascript🦕🎮

Dinosaur game remix: using CSS animations and Javascript🦕🎮

Oluwatofunmi Otuneye's photo
Oluwatofunmi Otuneye
·

7 min read

Table of contents

Intro

Out of data? Poor network? This game has always been a reliable source of entertainment during those times. In this article, I'll guide you through the steps to create a spin-off of this classic game.

Step 1: Create the structure and add your elements using HTML

  • -Character: I created my character using Piskel, you can create yours or access mine here.

  • -Obstacle: I made use of a simple div box for this.

  • -High score tracker: the value changes if it is higher than the last recorded value.

  • - The score tracker increases as you progress in the game and resets when the game restarts.

  • -Game area: this contains all elements of the game.

Input all these elements into your HTML file

<!DOCTYPE html  >
<html lang="en"  >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <h1 style="position: absolute; left:520px; top: 50px; color: rgb(173, 174, 211); "> Dinosaur Game Remix </h1>
    <div id="game"><!-- GAME AREA-->
        <div class="HIscore"> HI <span id="HIscore"> </span>  </div><!--HIGH SCORE TRACKER-->
        <div id="score"> <span id="ten-th"> 0<span id="th">0
         <span id="hundred">0<span id="tens">0<span id="unit">0
          </span></span> </span> </span></span>  </div><!-- SCORE TRACKER-->

        <img src="clouds.png" alt="" class="cloud" ><!--CLOUD-->
        <img src="clouds.png" alt="" class="cloud1" ><!--CLOUD-->
          <img src="clouds.png" alt="" class="cloud2" ><!--CLOUD-->
        <div class="loseMsg"><!--LOSE MESSASGE-->
        <h1>YOU LOSE</h1>
        <h4>Click to Replay</h4>
       </div>
 <img src="character.gif" id="character"><!--CHARACTER--> 
    </img>
    <div id="block"><!--OBSTACLE-->
    </div>
    </div>
    <script src="script.js "></script>
</body>
</html>

NOTE: After downloading the character and cloud, ensure you properly link it to your HTML file

Step 2: Using CSS design, position and style your elements

Create your CSS file and link it to your HTML file, then:-

  • place all your elements in their appropriate places and add colour to your work.

    NOTE: ensure you set the "Lose Message" display to "none", as it would only be seen when the user loses the game.

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(228, 228, 228);
    font-family: cursive,sans-serif;
}
/*clouds*/
.cloud{
    width: 50px;
    margin-right: 20px;
    left: 900px;
    height: 40px;
    position: absolute;
    top: 200px;
}
.cloud1{
    width: 50px;
    margin-right: 20px;
    left: 800px; 
    height: 40px;
    position: absolute;
    top: 240px;
}

.cloud2{
    width: 50px;
    margin-right: 20px;
    left: 400px;
    height: 40px;
    position: absolute;
    top: 230px;
}
/*Game canvas */
#game{
    width: 800px;
    height: 250px;
    border: 1px solid black;
    margin: 150px auto;
background-color: rgb(0, 187, 255);
}
/* Score tracker*/
#score{
    position: absolute ;
    left: 1000px;
    top: 170px;
    font-size: 20px;
    font-family: cursive,sans-serif;
    color: red;
}
/*high score tracker*/
.HIscore{
    position: absolute ;
    left: 870px;
    top: 170px;
    font-size: 20px;
    font-family: cursive,sans-serif;
    color: red;
}
/* Loosing Message*/
.loseMsg{
    position: absolute;
    margin:94px 290px ;
    text-align: center;
    font-weight: 700;
    font-family: cursive, sans-serif ;
     color: red;
     display: none;       
}
/*character*/ 
#character{
    width: 50px;
    height: 50px;

    position: relative;
    top: 200px;
    left: 20px;

}
/*obstacle*/
#block{
    width: 30px;
    height: 30px;
    background-color:brown;
    position: relative;
    top: 165px;
    left:550px;
}

Output:

Step 3: add your CSS animations

We need to add animation to only three elements :

  • the clouds(to create a moving effect )

      @keyframes clouds{
      0%{left:1000px}
      30%{left: 800px;}
      70%{left: 500px;}
      100%{left: 380px;}
  }
  @keyframes clouds1{
      0%{left:900px}
      30%{left: 750px;}
      70%{left: 600px;}
      100%{left: 380px;}
  }

  .cloud{
      width: 50px;
      margin-right: 20px;
      left: 900px;

      height: 40px;
      position: absolute;
      top: 200px;
      animation: 4s linear 0.2s infinite  clouds;/*animation*/
  }
  .cloud1{
      width: 50px;
      margin-right: 20px;
      left: 800px;

      height: 40px;
      position: absolute;
      top: 240px;
      animation: 3.2s linear 0.2s infinite  clouds;/*animation*/
  }

  .cloud2{
      width: 50px;
      margin-right: 20px;
      left: 400px;

      height: 40px;
      position: absolute;
      top: 230px;
      animation: 3.5s linear 0.2s infinite  clouds1;/*animation*/}

  • the obstacle (so it moves towards the character)


#block{
    width: 30px;
    height: 30px;
    background-color:brown;
    position: relative;
    top: 165px;
    left:550px;
    animation: 1.7s linear 0s infinite normal none running block;/*animation*/

}
@keyframes block {
    0%{left:550px;}
    100%{left:-30px}
}

  • character (for this we aren't going to add the animation directly, but create a separate class for it, which we can remove and add to the character using Javascript )

      .animate{
      animation: jump 500ms  ;/*animation*/
  }

  @keyframes jump {
      0%{top: 200px;}
      30%{top: 150px;}
      70%{top: 150px;}
      100%{top: 200px;}

  }

    Output:

    Step4: Declare your variables in your Javascript file

    Once you've created a javascript file, declare your variables, you can achieve this by using 'document.getElementById()' or 'document.querySelector()'

  •         /*declare variables*/
        var character = document.getElementById('character');
        var block = document.getElementById('block');
        var lostMsg = document.querySelector('.loseMsg')
        var youLost = false;
        var scoreCounter = 0;
        var score = document.getElementById('score');
        var unit =document.getElementById('unit');
        var tens = document.getElementById('tens');
        var hundred=document.getElementById('hundred');
        var thousand=document.getElementById('th');
        var TH =document.getElementById('ten-th');
        var gameStart = true;
        var HIscore = document.getElementById('HIscore');
        var interval;

    Step 5: Create your jump function

    Recall the animate class we created in step 3, to create the effect of the character jumping, we need to remove and add the "animate" class to the character.

       /**
   * Function to handle the character jump.
   */
  function jump(){
      if(!character.classList.contains("animate")){ // if the character is not currently animating
          character.classList.add("animate"); // add the animate class to start the animation
      }  
      // after 500 milliseconds, remove the animate class to stop the animation
      setTimeout(function(){
          character.classList.remove("animate");
      },500)
      if(youLost==true){ // if the game is lost
          startSC(); // start the score counter
          lostMsg.style.display="none"; // hide the lose message
          block.style.display="block"; // show the block
          block.style.animation="block 2s infinite linear"; // start the block animation
          youLost=false; // set the game status to not lost
      }
  }

    Step6: add game controls

    To enable the user to play the game, we must ensure the jump function created in step 5 is called every time the space bar is clicked.

    
  /**
   * Event listener for the jump action.
   */
  document.body.onkeyup = function(e) {
      if (e.key == " " || // check if the space key is pressed
          e.code == "Space" ||      // check if the space key is pressed by its code
          e.keyCode == 32      // check if the space key is pressed by its keyCode
      ) {
          jump(); // call the jump function
      }
  };

    To make the character jump when the screen is clicked, add the

  • "onclick "attribute to your HTML file as shown below.

  •     <html lang="en" onclick="jump()" >

    NOTE: notice how the character passes through the obstacle, which makes the game never-ending, this will be fixed in the next step.

    Step 7: Stop the game when the character comes in contact with the obstacle

    Enable the character to detect when it touches the obstacle, and end the the game

    
  // Stop score counter function
  function stopSC() {
      clearInterval(interval);
  }

  // Check for character collision with block function
  var checkDead = setInterval(function () {
      var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
      var blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));

      if (blockLeft < 50 && blockLeft > 0 && characterTop >= 180) {
          block.style.animation = "none";
          block.style.display = "none";
          youLost = true;
          lostMsg.style.display = "block";
  /*RECORD CURRENT VALUE AS HIGH SCORE , IF IT IS HIGHER THAN PREVIOUS HIGH SCORE*/
          var newScore = score.innerHTML;
          var currentScore = HIscore.innerHTML;
          if (currentScore == "") {
              HIscore.innerHTML = newScore;
          } else if (newScore > HIscore.innerHTML) {
              HIscore.innerHTML = newScore;
          }

          stopSC();
      }
  }, 10)

    Step 8: Keep a record of the score as the game progresses.

      // Reset score counter function
  function resetSC() {
      clearInterval(interval);
      var unit = "0";
      var tens = "0";
      var hundred = "0";
      var thousand = "0";
      var TH = "0";

      score.innerHTML = TH + thousand + hundred + tens + unit;
      scoreCounter = 0;
  }

  // Increment score counter function
  function counter() {
      scoreCounter++;
      if (scoreCounter <= 9) {
          score.innerHTML = "0" + "0" + "0" + "0" + scoreCounter;
      }
      if (scoreCounter <= 99 && scoreCounter > 9) {
          score.innerHTML = "0" + "0" + "0" + scoreCounter;
      }
      if (scoreCounter <= 999 && scoreCounter > 99) {
          score.innerHTML = "0" + "0" + scoreCounter;
      }
      if (scoreCounter <= 9999 && scoreCounter > 999) {
          score.innerHTML = "0" + scoreCounter;
      }
      if (scoreCounter > 9999) {
          score.innerHTML = scoreCounter;
      }
  }

    // Start score counter function
      function startSC() {
          resetSC();
          clearInterval(interval);
          interval = setInterval(counter, 150);
      }

      // Start the game on page load
      window.onload = startSC();

    FINAL PRODUCT:

    https://codepen.io/Gracetoffy/pen/OJdGRLW

  • https://gracetoffy.github.io/dino/dinosaur%20game/index.html

JavaScriptGame DevelopmentTutorialtutorialsnewbieGamesBeginner DevelopersHTMLCSSCSS AnimationRemix