From 218e53f63b5286046c52117b86701872da99acd1 Mon Sep 17 00:00:00 2001 From: Sophie Date: Sat, 29 Jun 2024 11:57:14 +0200 Subject: [PATCH 1/2] final version with score & life count --- index.html | 3 ++ js/component.js | 23 +++++++++++++ js/game.js | 89 +++++++++++++++++++++++++++++++++++++++++++++++-- js/obstacle.js | 21 ++++++++++++ js/player.js | 49 +++++++++++++++++++++++++++ js/script.js | 46 +++++++++++++++++++++++++ 6 files changed, 229 insertions(+), 2 deletions(-) create mode 100644 js/component.js create mode 100644 js/obstacle.js create mode 100644 js/player.js diff --git a/index.html b/index.html index d80d77c..d1aa16e 100644 --- a/index.html +++ b/index.html @@ -37,6 +37,9 @@

Game Over

+ + + diff --git a/js/component.js b/js/component.js new file mode 100644 index 0000000..9a10e91 --- /dev/null +++ b/js/component.js @@ -0,0 +1,23 @@ +class Component { + constructor(gameScreen, left, top, width, height, imgSrc) { + this.gameScreen = gameScreen; + this.left = left; + this.top = top; + this.width = width; + this.height = height; + this.element = document.createElement("img"); + this.element.src = imgSrc; + this.element.style.position = "absolute"; + this.element.style.width = `${width}px`; + this.element.style.height = `${height}px`; + this.element.style.left = `${left}px`; + this.element.style.top = `${top}px`; + + this.gameScreen.appendChild(this.element); + } + + updatePosition() { + this.element.style.left = `${this.left}px`; + this.element.style.top = `${this.top}px`; + } +} diff --git a/js/game.js b/js/game.js index af4789c..d141670 100644 --- a/js/game.js +++ b/js/game.js @@ -1,3 +1,88 @@ class Game { - // code to be added -} \ No newline at end of file + // code to be added + constructor() { + this.startScreen = document.querySelector("#game-intro"); + this.gameScreen = document.querySelector("#game-screen"); + this.gameEndScreen = document.querySelector("#game-end"); + this.height = 600; + this.width = 500; + this.obstacles = []; + this.score = 0; + this.lives = 3; + this.gameIsOver = false; + this.gameIntervalId = null; + this.gameLoopFrequency = Math.round(1000 / 60); + this.player = new Player( + this.gameScreen, + 200, + 500, + 100, + 150, + "../images/car.png" + ); + this.playersScore = document.querySelector("#score"); + this.playersLifes = document.querySelector("#lives"); + } + start() { + this.gameScreen.style.width = this.width + "px"; + this.gameScreen.style.height = this.height + "px"; + this.startScreen.style.display = "none"; + this.gameScreen.style.display = "block"; + this.gameIntervalId = setInterval(() => { + this.gameLoop(); + }, this.gameLoopFrequency); + } + + gameLoop() { + this.update(); + this.gameIsOver && clearInterval(this.gameIntervalId); // if statement + } + + update() { + this.player.move(); + + // Check for collision and if an obstacle is still on the screen + for (let i = 0; i < this.obstacles.length; i++) { + const obstacle = this.obstacles[i]; + obstacle.move(); + + // If the player's car collides with an obstacle + if (this.player.didCollide(obstacle)) { + obstacle.element.remove(); + this.obstacles.splice(i, 1); + this.lives--; + this.playersLifes.innerText = this.lives; + i--; + } + // If the obstacle is off the screen (at the bottom) + else if (obstacle.top > this.height) { + this.score++; + this.playersScore.innerText = this.score; + obstacle.element.remove(); + this.obstacles.splice(i, 1); + i--; + } + } + + // If the lives are 0, end the game + if (this.lives === 0) { + this.endGame(); + } + + // Create a new obstacle based on a random probability + // when there is no other obstacles on the screen + if (Math.random() > 0.98 && this.obstacles.length < 1) { + this.obstacles.push(new Obstacle(this.gameScreen)); + } + } + + endGame() { + this.player.element.remove(); + this.obstacles.forEach((object) => { + object.element.remove(); + }); + this.gameIsOver = true; + this.gameScreen.style.display = "none"; + this.gameEndScreen.style.display = "block"; + } +} diff --git a/js/obstacle.js b/js/obstacle.js new file mode 100644 index 0000000..6eb6687 --- /dev/null +++ b/js/obstacle.js @@ -0,0 +1,21 @@ +// js/obstacle.js + +class Obstacle extends Component { + constructor(gameScreen) { + super( + gameScreen, + Math.floor(Math.random() * 300 + 70), + 0, + 100, + 150, + "./images/redCar.png" + ); + } + + move() { + // Move the obstacle down by 3px + this.top += 3; + // Update the obstacle's position on the screen + this.updatePosition(); + } +} diff --git a/js/player.js b/js/player.js new file mode 100644 index 0000000..c656a58 --- /dev/null +++ b/js/player.js @@ -0,0 +1,49 @@ +class Player extends Component { + constructor(gameScreen, left, top, width, height, imgSrc) { + super(gameScreen, left, top, width, height, imgSrc); + + this.directionX = 0; + this.directionY = 0; + } + + move() { + // Update player's car position based on directionX and directionY + this.left += this.directionX; + this.top += this.directionY; + debugger; + + // Ensure the player's car stays within the game screen + if (this.left < 10) { + this.left = 10; + } + if (this.top < 10) { + this.top = 10; + } + if (this.left > this.gameScreen.offsetWidth - this.width - 10) { + this.left = this.gameScreen.offsetWidth - this.width - 10; + } + if (this.top > this.gameScreen.offsetHeight - this.height - 10) { + this.top = this.gameScreen.offsetHeight - this.height - 10; + } + + // Update the player's car position on the screen + this.updatePosition(); + } + + didCollide(obstacle) { + const playerRect = this.element.getBoundingClientRect(); + const obstacleRect = obstacle.element.getBoundingClientRect(); + + if ( + playerRect.left < obstacleRect.right && + playerRect.right > obstacleRect.left && + playerRect.top < obstacleRect.bottom && + playerRect.bottom > obstacleRect.top + ) { + console.log("Crash!"); + return true; + } else { + return false; + } + } +} diff --git a/js/script.js b/js/script.js index 95e544f..9c1af87 100644 --- a/js/script.js +++ b/js/script.js @@ -1,12 +1,58 @@ window.onload = function () { const startButton = document.getElementById("start-button"); const restartButton = document.getElementById("restart-button"); + let game = null; + + // Function that handles keydown event + function handleKeydown(event) { + const key = event.key; + const possibleKeystrokes = [ + "ArrowLeft", + "ArrowUp", + "ArrowRight", + "ArrowDown", + ]; + + // Check if the pressed key is in the possibleKeystrokes array + if (possibleKeystrokes.includes(key)) { + event.preventDefault(); + + // Update player's directionX and directionY based on the key pressed + switch (key) { + case "ArrowLeft": + game.player.directionX = -1; + break; + case "ArrowUp": + game.player.directionY = -1; + break; + case "ArrowRight": + game.player.directionX = 1; + break; + case "ArrowDown": + game.player.directionY = 1; + break; + } + } + } startButton.addEventListener("click", function () { startGame(); }); function startGame() { + game = new Game(); + game.start(); console.log("start game"); } + + // Add the handleKeydown function as an event listener for the keydown event + window.addEventListener("keydown", handleKeydown); + + restartButton.addEventListener("click", () => { + restartGame(); + }); + + function restartGame() { + location.reload(); + } }; From 57791143f948fcc58b931d9193c849f3f258f576 Mon Sep 17 00:00:00 2001 From: Sophie Date: Wed, 21 Aug 2024 17:22:32 +0200 Subject: [PATCH 2/2] done --- js/game.js | 1 + js/player.js | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/js/game.js b/js/game.js index d141670..db05c95 100644 --- a/js/game.js +++ b/js/game.js @@ -73,6 +73,7 @@ class Game { // when there is no other obstacles on the screen if (Math.random() > 0.98 && this.obstacles.length < 1) { this.obstacles.push(new Obstacle(this.gameScreen)); + console.log("object created"); } } diff --git a/js/player.js b/js/player.js index c656a58..7307705 100644 --- a/js/player.js +++ b/js/player.js @@ -10,7 +10,6 @@ class Player extends Component { // Update player's car position based on directionX and directionY this.left += this.directionX; this.top += this.directionY; - debugger; // Ensure the player's car stays within the game screen if (this.left < 10) {