Akshay Soni
3 years ago
committed by
GitHub
parent
120204995f
commit
80d699d412
|
After Width: | Height: | Size: 778 KiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 516 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>iDragon - JavaScript Game</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="gameContainer">
|
||||||
|
<div class="gameOver">Welcome to the Dragon game</div>
|
||||||
|
<div class="dino"></div>
|
||||||
|
<div id="scoreCont">Your Score is: 0</div>
|
||||||
|
<div class="obstacle obstacleAni"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 601 KiB |
@ -0,0 +1,19 @@
|
|||||||
|
<!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">
|
||||||
|
<title>Dragon-Dino Game</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="gameContainer">
|
||||||
|
<div class="gameOver">Welcome to the Dragon game</div>
|
||||||
|
<div class="dino"></div>
|
||||||
|
<div id="scoreCard">Your Score is: 0</div>
|
||||||
|
<div class="obstacle obstacleAni"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
score = 0;
|
||||||
|
cross = true;
|
||||||
|
|
||||||
|
audio = new Audio('images/music.mp3');
|
||||||
|
audiogo = new Audio('images/gameover.mp3');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
audio.play()
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
|
||||||
|
document.onkeydown = function(e){
|
||||||
|
console.log("key code is: ", e.keyCode)
|
||||||
|
if(e.keyCode == 38){
|
||||||
|
dino = document.querySelector('.dino');
|
||||||
|
dino.classList.add('animateDino');
|
||||||
|
setTimeout(() => {
|
||||||
|
dino.classList.remove('animateDino');
|
||||||
|
}, 700);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(e.keyCode == 39){
|
||||||
|
dino = document.querySelector('.dino');
|
||||||
|
dinoX = parseInt(window.getComputedStyle(dino, null).getPropertyValue('left'));
|
||||||
|
dino.style.left = dinoX + 112 + "px";
|
||||||
|
}
|
||||||
|
|
||||||
|
if(e.keyCode == 37){
|
||||||
|
dino = document.querySelector('.dino');
|
||||||
|
dinoX = parseInt(window.getComputedStyle(dino, null).getPropertyValue('left'));
|
||||||
|
dino.style.left = (dinoX - 112) + "px";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval(() => {
|
||||||
|
dino = document.querySelector('.dino');
|
||||||
|
gameOver = document.querySelector('.gameOver');
|
||||||
|
obstacle = document.querySelector('.obstacle');
|
||||||
|
|
||||||
|
dx = parseInt(window.getComputedStyle(dino, null).getPropertyValue('left'));
|
||||||
|
dy = parseInt(window.getComputedStyle(dino, null).getPropertyValue('top'));
|
||||||
|
|
||||||
|
ox = parseInt(window.getComputedStyle(obstacle, null).getPropertyValue('left'));
|
||||||
|
oy = parseInt(window.getComputedStyle(obstacle, null).getPropertyValue('top'));
|
||||||
|
|
||||||
|
offsetX = Math.abs(dx - ox);
|
||||||
|
offsetY = Math.abs(dy - oy);
|
||||||
|
|
||||||
|
if(offsetX < 73 && offsetY < 52){
|
||||||
|
gameOver.innerHTML = "Game over play it again"
|
||||||
|
obstacle.classList.remove('obstacleAni')
|
||||||
|
audiogo.play();
|
||||||
|
setTimeout(() => {
|
||||||
|
audiogo.pause();
|
||||||
|
audio.pause();
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
else if(offsetX < 145 && cross){
|
||||||
|
score += 1;
|
||||||
|
updateScore(score);
|
||||||
|
cross = false;
|
||||||
|
setTimeout(() => {
|
||||||
|
cross = true;
|
||||||
|
}, 1000);
|
||||||
|
setTimeout(() => {
|
||||||
|
aniDur = parseFloat(window.getComputedStyle(obstacle, null).getPropertyValue('animation-duration'));
|
||||||
|
newDur = aniDur - 0.1;
|
||||||
|
obstacle.style.animationDuration - newDur + 's';
|
||||||
|
console.log('New Animation Duration', newDur);
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
}, 10);
|
||||||
|
|
||||||
|
function updateScore(score){
|
||||||
|
scoreCard.innerHTML = "Your Score:" + score;
|
||||||
|
}
|
||||||
@ -0,0 +1,88 @@
|
|||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gameContainer{
|
||||||
|
background-image: url(images/bg.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100vw 100vh;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.dino{
|
||||||
|
background-image: url(images/dino.png);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
width: 233px;
|
||||||
|
height: 114px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 52px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.obstacle{
|
||||||
|
width: 166px;
|
||||||
|
height: 113px;
|
||||||
|
background-image: url(images/dragon.png);
|
||||||
|
position: absolute;
|
||||||
|
background-size: cover;
|
||||||
|
bottom: 0;
|
||||||
|
left: 44vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animateDino{
|
||||||
|
animation: dino 0.6s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.obstacleAni{
|
||||||
|
animation: obstacleAni 5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gameOver{
|
||||||
|
position: relative;
|
||||||
|
top: 63px;
|
||||||
|
font-size: 53px;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Ubuntu', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scoreCard{
|
||||||
|
font-size: 25px;
|
||||||
|
color: #54212f;
|
||||||
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
right: 45px;
|
||||||
|
top: 31px;
|
||||||
|
border: 2px solid black;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
font-family: 'Ubuntu', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dino{
|
||||||
|
0%{
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
bottom: 422px;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes obstacleAni{
|
||||||
|
0%{
|
||||||
|
left: 100vw;
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
left: -10vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue