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:
HTML Code:
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:
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.
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>
Reference: Dragon game
Output:
Design Dragon's World Game using HTML CSS and JavaScript
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4