diff --git a/Dragon game in javascript/images/bg.png b/Dragon game in javascript/images/bg.png new file mode 100644 index 00000000..75e46ba6 Binary files /dev/null and b/Dragon game in javascript/images/bg.png differ diff --git a/Dragon game in javascript/images/dino.png b/Dragon game in javascript/images/dino.png new file mode 100644 index 00000000..fb9a2cf6 Binary files /dev/null and b/Dragon game in javascript/images/dino.png differ diff --git a/Dragon game in javascript/images/dragon.png b/Dragon game in javascript/images/dragon.png new file mode 100644 index 00000000..a759f6c7 Binary files /dev/null and b/Dragon game in javascript/images/dragon.png differ diff --git a/Dragon game in javascript/images/game.mp3 b/Dragon game in javascript/images/game.mp3 new file mode 100644 index 00000000..16cad2d7 Binary files /dev/null and b/Dragon game in javascript/images/game.mp3 differ diff --git a/Dragon game in javascript/images/gameover.mp3 b/Dragon game in javascript/images/gameover.mp3 new file mode 100644 index 00000000..12084bfd Binary files /dev/null and b/Dragon game in javascript/images/gameover.mp3 differ diff --git a/Dragon game in javascript/images/index.html b/Dragon game in javascript/images/index.html new file mode 100644 index 00000000..6a7fd2fb --- /dev/null +++ b/Dragon game in javascript/images/index.html @@ -0,0 +1,20 @@ + + + + + + iDragon - JavaScript Game + + + + + + +
+
Welcome to the Dragon game
+
+
Your Score is: 0
+
+
+ + \ No newline at end of file diff --git a/Dragon game in javascript/images/music.mp3 b/Dragon game in javascript/images/music.mp3 new file mode 100644 index 00000000..17184566 Binary files /dev/null and b/Dragon game in javascript/images/music.mp3 differ diff --git a/Dragon game in javascript/images/view.png b/Dragon game in javascript/images/view.png new file mode 100644 index 00000000..78a53798 Binary files /dev/null and b/Dragon game in javascript/images/view.png differ diff --git a/Dragon game in javascript/index.html b/Dragon game in javascript/index.html new file mode 100644 index 00000000..a65db79f --- /dev/null +++ b/Dragon game in javascript/index.html @@ -0,0 +1,19 @@ + + + + + + + Dragon-Dino Game + + + + +
+
Welcome to the Dragon game
+
+
Your Score is: 0
+
+
+ + \ No newline at end of file diff --git a/Dragon game in javascript/script.js b/Dragon game in javascript/script.js new file mode 100644 index 00000000..dc563629 --- /dev/null +++ b/Dragon game in javascript/script.js @@ -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; +} \ No newline at end of file diff --git a/Dragon game in javascript/style.css b/Dragon game in javascript/style.css new file mode 100644 index 00000000..526e5c8f --- /dev/null +++ b/Dragon game in javascript/style.css @@ -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; + } +} \ No newline at end of file