Design Dragon’s World Game using HTML CSS and JavaScript

Last Updated : 12 Apr, 2023

Project Introduction: “Dragon’s World” is a game in which one dragon tries to save itself from the other dragon by jumping over the dragon which comes in its way. The score is updated when one dragon saves himself from the other dragon.

The project will contain HTML, CSS and JavaScript files. The HTML file adds structure to the game followed by styling using CSS. JavaScript adds functionality to the game.

File structure:

index.html
style.css
script.js

HTML Code:

Heading portion: It will show the name of the game.
Game over portion: It will be shown when you lose the game.
Obstacle portion: It will contain the obstacle from which the dragon has to save itself.
Dragon portion: It will contain the dragon which has to be saved from the obstacle i.e. the other dragon.
Score portion: It will show the current score of the game.

index.html

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <link rel="stylesheet" href= 
        "style.css?_cacheOverride=1606401798626"> 
  
    <link href= 
"https://fonts.googleapis.com/css2?family=Ubuntu:ital,  
        wght@0, 300;1, 700&display=swap" 
        rel="stylesheet"> 
</head> 
  
<body> 
    <h1 id="gameName">Welcome to Dragon's world</h1> 
    <div class="container"> 
        <div class="gameover">Game Over</div> 
        <div id="scorecount">Your score : 0</div> 
        <div class="obstacle animateobstacle"></div> 
        <div class="dragon" style="left: 426px;"></div> 
    </div> 
</body> 
  
</html> 

CSS code:

Positioning the game’s name: The name of the game is positioned by the absolute property of CSS.
Background image styling: In the container class, we have put the background image of the game with the background-size set to cover.
Score Card styling: We have positioned the scorecard to top right of the page and also provided it with a suitable background color to make it attractive. The text in it would be shown in white.
Obstacle image styling: We have positioned the obstacle to bottom left of the page and provided animation to it so that it could move towards left.
Dragon’s styling: We have positioned the dragon to bottom left of the page and provide animation to it so that it could jump up and save himself.
Game Over Styling: We have positioned the game over portion to the center of the page and it will appear when the dragon is hit by the obstacle.

style.css

/* CSS Reset */  *{      margin:0px;      padding:0px;  }  body {      /* Hides the  bottom scrollbar */      overflow: hidden;  }  /* Styling of the Game's Name */  #gameName {      position: absolute;      top:30vh;      left:38vw;  }  /* Background image styling */  .container {      background-image: url(cover.png);      background-size: cover;      width:100vw;      height:100vh;  }  /* ScoreCard Styling */  #scorecount {      position: absolute;      top:20px;      right:20px;      background-color: black;      padding: 28px;      border-radius: 20px;      color: white;  }  /* Obstacle image styling and positioning */  .obstacle {      background-image: url(obstacle.png);      background-size: cover;      width:154px;      height: 126px;      position: absolute;      bottom:0px;      right:120px;  }  /* Applying animation to the obstacle   so that it can move towards left */  .animateobstacle {      animation: aniob 5s linear infinite;  }  @keyframes aniob {      0% {          left:100vw;      }      100% {          left:-10vw;      }  }  /* Dragon's styling */  .dragon {      background-image: url(dragon.png);      background-size: cover;      width: 194px;      height: 126px;      position: absolute;      bottom:0px;      left:90px;  }  /* Applying animation to the dragon so   that it can save himself by jumping up */  .animatedragon {      animation: ani 1s linear;  }  @keyframes ani {      0% {          bottom:0px;      }      25% {          bottom:150px;      }      50% {          bottom:300px;      }      75% {          bottom:211px;      }      100% {          bottom:0px;      }  }  /* gameover styling and positioning */  .gameover {      visibility: hidden;      font-family: 'Ubuntu', sans-serif;      position: absolute;      top: 50vh;      left: 35vw;      color: red;      font-weight: bold;      font-size: 6rem;      background-color: firebrick;      border-radius: 20px;  }

JavaScript Code:

1. Movement of the dragon: This is provided by the onkeydown event.

Up arrow key: On pressing it, the dragon will jump upwards (animation provide by CSS).
Left arrow key: On pressing it, the dragon will move to the left (animation provide by CSS).
Right arrow key: On pressing it, the dragon will move to the left (animation provide by CSS).

document.onkeydown = function(e) {      console.log(e.keyCode);      if (e.keyCode == 38) {          dragon = document.querySelector('.dragon');          dragon.classList.add('animatedragon');          setTimeout(() => {              dragon.classList.remove('animatedragon');          }, 700);      }      if (e.keyCode == 37) {          dragon = document.querySelector('.dragon');          dragonx = parseInt(window.getComputedStyle(dragon, null)              .getPropertyValue('left'));          dragon.style.left = dragonx - 112 + "px";      }      if (e.keyCode == 39) {          dragon = document.querySelector('.dragon');          dragonx = parseInt(window.getComputedStyle(              dragon, null).getPropertyValue('left'));          dragon.style.left = dragonx + 112 + "px";      }  }

2. Updating the score: The score is satisfied only when a given condition is satisfied. We will compute the left and bottom values of both the obstacle and the dragon and then increase the score based on a proper value which shows that the dragon has saved himself from the obstacle. For this, we have taken “cross” variable and assigned “true” to it. When the dragon crosses the obstacle safely, we set the value to “false”. After approximately 1s we change the value of cross to “true”. We have also made the obstacle run faster after each cross and thus increasing the difficulty level.

setInterval(() => {      dragon = document.querySelector('.dragon');      gameover = document.querySelector('.gameover');      obstacle = document.querySelector('.obstacle');        dx = parseInt(window.getComputedStyle(          dragon, null).getPropertyValue('left'));        dy = parseInt(window.getComputedStyle(          dragon, null).getPropertyValue('bottom'));        ox = parseInt(window.getComputedStyle(          obstacle, null).getPropertyValue('left'));        oy = parseInt(window.getComputedStyle(          obstacle, null).getPropertyValue('bottom'));        offsetx = Math.abs(dx - ox);      offsety = Math.abs(dy - oy);        console.log(offsetx, offsety);        if (offsetx < 120 && offsety <= 144) {          gameover.style.visibility = 'visible';          obstacle.classList.remove('animateobstacle');      } else if (offsetx < 125 && cross) {          score += 1;          updateScore(score);          cross = false;          setTimeout(() => {              cross = true;          }, 1000);          setInterval(() => {              obsanidur = parseFloat(window                  .getComputedStyle(obstacle, null)                  .getPropertyValue('animation-duration'));                obstacle.style.animationDuration                  = obsanidur - 0.01 + 's';          }, 500);      }  }, 10);    function updateScore(score) {      scorecount.innerHTML = "Your score : " + score;  }

script.js

javascript

   <script> 
    cross = true; 
    score = 0; 
    document.onkeydown = function(e) { 
        console.log(e.keyCode); 
        if (e.keyCode == 38) { 
            dragon = document.querySelector('.dragon'); 
  
            dragon.classList.add('animatedragon'); 
              
            setTimeout(() => { 
                dragon.classList.remove('animatedragon'); 
            }, 700); 
        } 
        if (e.keyCode == 37) { 
            dragon = document.querySelector('.dragon'); 
  
            dragonx = parseInt(window.getComputedStyle( 
                dragon, null).getPropertyValue('left')); 
  
            dragon.style.left = dragonx - 112 + "px"; 
        } 
        if (e.keyCode == 39) { 
            dragon = document.querySelector('.dragon'); 
  
            dragonx = parseInt(window.getComputedStyle( 
                dragon, null).getPropertyValue('left')); 
              
            dragon.style.left = dragonx + 112 + "px"; 
        } 
    } 
    setInterval(() => { 
        dragon = document.querySelector('.dragon'); 
        gameover = document.querySelector('.gameover'); 
        obstacle = document.querySelector('.obstacle'); 
  
        dx = parseInt(window.getComputedStyle( 
            dragon, null).getPropertyValue('left')); 
  
        dy = parseInt(window.getComputedStyle( 
            dragon, null).getPropertyValue('bottom')); 
  
        ox = parseInt(window.getComputedStyle( 
            obstacle, null).getPropertyValue('left')); 
  
        oy = parseInt(window.getComputedStyle( 
            obstacle, null).getPropertyValue('bottom')); 
  
        offsetx = Math.abs(dx - ox); 
        offsety = Math.abs(dy - oy); 
  
        console.log(offsetx, offsety); 
  
        if (offsetx < 120 && offsety <= 144) { 
            if (score != 0) 
                scorecount.innerHTML = "Your score : " + score; 
            gameover.style.visibility = 'visible'; 
            obstacle.classList.remove('animateobstacle'); 
        } else if (offsetx < 125 && cross) { 
            score += 1; 
            updateScore(score); 
            cross = false; 
            setTimeout(() => { 
                cross = true; 
            }, 1000); 
            setInterval(() => { 
                obsanidur = parseFloat(window 
                .getComputedStyle(obstacle, null) 
                .getPropertyValue('animation-duration')); 
  
                obstacle.style.animationDuration 
                    = obsanidur - 0.01 + 's'; 
            }, 500); 
        } 
    }, 10); 
  
    function updateScore(score) { 
        scorecount.innerHTML = "Your score : " + score; 
    } 
</script> 
 
  