Document
Welcome to the idragon game!!
*{
margin: 0;
Padding: 0;
}
body{
overflow: hidden;
}
.gameContainer{
background-image: url(bg.png);
background-repeat: no-repeat;
background-size: 100vw 100vh;
width: 100%;
height: 100vh;
}
.dino{
background-image: url(dino.png);
background-repeat: no-repeat;
background-size: cover;
width: 233px;
height: 114px;
position: absolute;
bottom:0;
left: 52px;
}
.obstacle{
background-image: url(dragon.png);
background-repeat: no-repeat;
background-size: cover;
width: 166px;
height: 113px;
position: absolute;
bottom: 0;
left: 44vw;
}
@keyframes animationname {keyframes-selector {css-styles;}}
@keyframes dino{
0%{
bottom: 0;
}
50%{
bottom: 422px;
}
100%{
bottom: 0;
}
}
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
.animateDino{
animation: dino 0.6s linear;
}
.animateDino{
animation: dino 0.6s linear;
}
@keyframes dino{
0%{
bottom: 0;
}
50%{
bottom: 422px;
}
100%{
bottom: 0;
}
}
document.onkeydown = function (e) {
console.log("Key code is: ", e.keyCode)
}
element = document.querySelector(selectors);
dino = document.querySelector('.dino');
dino.classList.add('animateDino');
setTimeout(() => {
dino.classList.remove('animateDino')
}, 700);
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);
}
}
@keyframes obstacleAni{
0%{
left: 100vw;
}
100%{
left: -10vw;
}
}
.obstacleAni{
animation: obstacleAni 3s linear infinite;
}
setInterval(function, milliseconds, param1, param2, ...)
dino = document.querySelector('.dino');
gameOver = document.querySelector('.gameOver');
obstacle = document.querySelector('.obstacle');
window.getComputedStyle(element);
window.getComputedStyle(element, pseudoElt);
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);
console.log(offsetX, offsetY)
if (offsetX < 73 && offsetY < 52) {
gameOver.innerHTML = "Game Over - Reload to Play Again"
obstacle.classList.remove('obstacleAni')
}
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);
console.log(offsetX, offsetY)
if (offsetX < 73 && offsetY < 52) {
gameOver.innerHTML = "Game Over - Reload to Play Again"
obstacle.classList.remove('obstacleAni')
}
}, 10);
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";
}
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";
}
}
else if (offsetX < 145 && cross) {
score += 1;
updateScore(score);
cross = false;
setTimeout(() => {
cross = true;
}, 1000);
}
function updateScore(score) {
scoreCount.innerHTML = "Your Score: " + score
}
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);
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);
.gameOver{
position: relative;
top:63px;
font-size: 53px;
text-align: center;
font-family: 'Ubuntu', sans-serif;
}
#scoreCount{
font-size: 25px;
color: #54212f;
font-weight: bold;
position: absolute;
right: 45px;
top: 31px;
border: 2px solid black;
padding: 10px;
font-family: 'Ubuntu', sans-serif;
border-radius: 10px;
}
audio = new Audio('music.mp3');
audiogo = new Audio('gameover.mp3');
Document
if (offsetX < 73 && offsetY < 52) {
gameOver.innerHTML = "Game Over - Reload to Play Again"
obstacle.classList.remove('obstacleAni')
audiogo.play();
setTimeout(() => {
audiogo.pause();
audio.pause();
}, 1000);
}
