Add files via upload

3 years ago · 80d699d412
parent 120204995f
commit 80d699d412
11 changed files with 204 additions and 0 deletions
--- a/javascript/images/bg.png
+++ b/javascript/images/bg.png
--- a/javascript/images/dino.png
+++ b/javascript/images/dino.png
--- a/javascript/images/dragon.png
+++ b/javascript/images/dragon.png
--- a/javascript/images/game.mp3
+++ b/javascript/images/game.mp3
--- a/javascript/images/gameover.mp3
+++ b/javascript/images/gameover.mp3
--- a/javascript/images/index.html
+++ b/javascript/images/index.html
@ -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>
--- a/javascript/images/music.mp3
+++ b/javascript/images/music.mp3
--- a/javascript/images/view.png
+++ b/javascript/images/view.png
--- a/javascript/index.html
+++ b/javascript/index.html
@ -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>
--- a/javascript/script.js
+++ b/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;
+}
--- a/javascript/style.css
+++ b/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;
+    }
+}