Feature/runningman moves

index.html

@@ -58,9 +58,11 @@ <h1>Game instructions</h1>
             </div>
             <!-- #game-screen is initially hidden using CSS style display: none -->
             <div id="game-screen">
-                <img src="../images/road.jpg" alt="road image"/>
-                <img id="player" src="../images/therunningman.png" alt="player"/>
-            </div> <!-- should load game screen dynamically with a perspective background -->
+                 <img src="../images/road.jpg" alt="road image"/>
+                <div id="road-strip">
+
+                </div>
+            </div>
         </div>
 
         <!-- Game End Screen -->
@@ -85,7 +87,9 @@ <h2 class="next-level-or-end-game"></h2>
 
     </main>
 
-    <script type="type/javascript" src="./js/game.js"></script>
-    <script src="./js/script.js"></script>
+    <script type="text/javascript" src="./js/obstacle.js"></script>
+    <script type="text/javascript" src="./js/player.js"></script>
+    <script type="text/javascript" src="./js/game.js"></script>
+    <script type="text/javascript" src="./js/script.js"></script>
 </body>
 </html>

js/game.js

@@ -0,0 +1,56 @@
+/**
+ * The Game class will contain
+ * - game loop -> will refresh the game with current status of the player.
+ * - will contain the logic to win lose or go to next level situation.
+ * 
+ * 
+ */
+class Game {
+
+    constructor(){
+        this.instructionScreen = document.getElementById('instructions');
+
+        this.gameContainer = document.getElementById('game-container');
+        this.gameScreen = document.getElementById('game-screen');
+        this.width = '100vw';
+        this.height = '100vh';
+        //Player 
+        this.player = new Player(this.gameScreen,"../images/therunningman.png");
+
+        //obstacle container
+        this.obstacles = [];
+
+        //Game properties
+        this.health = 100;
+        this.distance = 20; // Level1-20kms
+        this.speed = 1/3; 
+        this.money = 25;
+
+        this.isGameOver = false;
+
+    }
+
+    start(){
+        this.gameContainer.style.width = `${this.width}px`;
+        this.gameContainer.style.height = `${this.height}px`;
+        this.instructionScreen.style.display = 'none';
+        this.gameContainer.style.display = 'flex';
+        this.gameLoop();
+
+    }
+
+    gameLoop(){
+        if(this.isGameOver){
+            return;
+        }
+        console.log('game loop');
+        this.update()
+        //Invoke game Loop
+        window.requestAnimationFrame(()=> this.gameLoop());
+    }
+
+    update(){
+        this.player.move();        
+
+    }
+}

js/obstacle.js

@@ -0,0 +1,4 @@
+
+class Obstacle {
+
+}

js/player.js

@@ -0,0 +1,37 @@
+class Player {
+
+    constructor(gameScreen, imgSrc){
+        this.top = 25;
+        this.left = 36;
+        this.gameScreen = gameScreen;
+
+        //player image
+        this.element = document.createElement('img');
+        this.element.src = imgSrc;
+        this.element.alt = "player image";
+        this.element.style.top = `${this.top}vh`;
+        this.element.style.left = `${this.left}vw`;
+        this.element.className = "player";
+        this.gameScreen.appendChild(this.element);
+
+        //player movement
+        this.directionX = 0;
+        this.directionY = 0;
+    }
+
+    move(){
+        this.left += this.directionX;
+        this.top += this.directionY;
+
+        this.updatePosition();
+    }
+
+    updatePosition(){
+        this.element.style.left = `${this.left}vw`;
+        this.element.style.top = `${this.top}vh`;
+        // console.log('player position', this.element.getBoundingClientRect())
+        this.directionX = 0;
+        this.directionY = 0;
+    }
+
+}

js/script.js

@@ -1,7 +1,7 @@
 window.onload = function () {
     const startBtn = document.getElementById('start');
     const startGameBtn = document.getElementById('start-game');
-    const nextLevelBtn = document.getElementById('next-level');
+    // const nextLevelBtn = document.getElementById('next-level');
     const restartBtn = document.getElementById('restart-btn');
 
 
@@ -11,18 +11,19 @@ window.onload = function () {
     const instruction = document.getElementById('instructions');
     const gameContainer = document.getElementById('game-container');
 
+    let game;
+
     // start btn - to instruction btn
     startBtn.addEventListener('click', function() {
-        console.log('click')
+        console.log('click');
         openingScreen.style.display = "none";
         instruction.style.display = "flex";
     } )
 
     // instruction btn - to the game container
     startGameBtn.addEventListener('click', function(){
-        console.log('click2')
-        instruction.style.display  = "none";
-        gameContainer.style.display = "block";
+        game = new Game();
+        game.start();
     })
 
     //restart btn-refresh page 
@@ -34,6 +35,62 @@ window.onload = function () {
         location.reload();
     }
 
+    // Function to handle the jump
+    function jump(player) {
+        console.log("entered jump", player);
+        player.element.style.transform = 'translateY(-225px)';
+        setTimeout(() => {
+            player.element.style.transform = 'translateY(-225px)';
+            player.element.style.transform = 'translateY(0)';
+        }, 300);
+    }
+
+
+    function handleKeydown(event) {
+        const code = event.code;
+        console.log("event", event);
+        console.log("code", code)
+        const possibleKeystrokes = [
+          "ArrowLeft",
+          "ArrowUp",
+          "ArrowRight",
+          "ArrowDown",
+          "c",
+          "Space" //space
+        ];
+
+        // Check if the pressed key is in the possibleKeystrokes array
+        if (possibleKeystrokes.includes(code)) {
+          event.preventDefault();
+          console.log("entered line 64 code", code);
+          // Update player's directionX and directionY based on the key pressed
+          switch (code) {
+            case "ArrowLeft":
+              console.log("code", code);
+              game.player.directionX = -1;
+              break;
+            case "ArrowUp":
+              console.log("code", code);
+              game.player.directionY = -1;
+              break;
+            case "ArrowRight":
+              console.log("code", code);
+              game.player.directionX = 1;
+              break;
+            case "ArrowDown":
+              console.log("code", code);
+              game.player.directionY = 1;
+              break;
+            case "Space":
+                console.log("code", code);
+              jump(game.player);
+               break;
+          }
+        }
+      }
+
+    // Add the handleKeydown function as an event listener for the keydown event
+    window.addEventListener("keydown", handleKeydown);
 
 };
 

styles/style.css

@@ -32,7 +32,12 @@ body {
 }
 
 #start:hover {  
-    opacity: 0.5;
+    opacity: 0.9;
+    background-color: rgb(158, 255, 13);
+    color: rgb(94, 12, 12);
+    font-weight: 800;
+    cursor: pointer;
+    border: solid 3px #fff;
 }
 
 #opening-screen p {
@@ -78,7 +83,12 @@ body {
 }
 
 #start-game:hover {  
-    opacity: 0.5;
+    opacity: 0.9;
+    cursor: pointer;
+    background-color: rgb(158, 255, 13);
+    color: rgb(94, 12, 12);
+    border: solid 5px #fff;
+    font-weight: 800;
 }
 
 .instruction-info-buttons {
@@ -148,10 +158,7 @@ body {
 #game-container {
     display: none;
     flex-direction: column;
-    width: 100vw;
     justify-content: center;
-    width: 100vw;
-    height: 100vh;
     font-weight: 600;
 }
 
@@ -172,27 +179,60 @@ body {
 
 #game-screen {
     display: block;
-    overflow: hidden;
-    position: absolute;
-    background-image: url(../images/roada.jpg);
+    /* background-image: url(../images/road.jpg); */
     background-size: cover;
-    animation: slide 5s linear infinite;
     width: 100vw;
     height: 50vh;
+    position: absolute;
+    top:50vh;
+    z-index: -1;
+}
+
+#road-strip {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    background-image: url(../images/road-strip.png);
+    background-size: cover;
+    animation: slide 5s linear infinite;
+    width: 2vw;
+    height: 72vh;
+    animation: slide 3s linear infinite;
+    z-index: 1;
+    position: fixed;
+    overflow: hidden;
+    top: 27vh;
+    left: 47vw;
+  }
+
+
+
+  @keyframes slide {
+    0% {
+      background-position: 0 -1000px;
+    }
+    95% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: 0 50px;
+    }
   }
 
   #game-screen img:first-of-type {
     width: 100vw;
     height: 50vh;
   }
 
-  #player {
+  .player {
     position: absolute;
-    top: 240px;
-    left: 445px;
-    width: 288px;
-    height: 270px;
+    top: 25vh;
+    left: 36vw;
+    width: 15vw;
+    height: 18vh;
     z-index: 1;
+    transform: translateX(0%);
+    transition: transform 0.2s ease-out;
   }
 
 /* next-levels or game over - screen IV */