diff --git a/index.html b/index.html index d80d77c..015e39f 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,8 @@

Game Over

- + + diff --git a/js/game.js b/js/game.js index af4789c..4a4d821 100644 --- a/js/game.js +++ b/js/game.js @@ -1,3 +1,69 @@ class Game { - // code to be added -} \ No newline at end of file + constructor() { + this.startScreen = document.querySelector("#game-intro"); + this.gameScreen = document.querySelector("#game-screen"); + this.gameEndScreen = document.querySelector("#game-end"); + this.player = new Player( + this.gameScreen, + 200, + 500, + 100, + 150, + "./images/car.png" + ); + this.height = 600; + this.width = 500; + this.obstacle = []; + this.score = 0; + this.lives = 3; + this.gameIsOver = false; + this.gameIntervalId; + this.gameLoopFrequency = Math.round(1000 / 60); + } + 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(); + if (this.gameIsOver) { + clearInterval(this.gameIntervalId); + } + } + update() { + this.player.move(); + for (let i = 0; i < this.obstacle.length; i++) { + const obstacle = this.obstacle[i]; + obstacle.move(); + if (this.player.didCollide(obstacle)) { + obstacle.element.remove(); + this.obstacle.splice(i, 1); + this.lives--; + i--; + } else if (obstacle.top > this.height) { + this.score++; + obstacle.element.remove(); + this.obstacle.splice(i, 1); + i--; + } + } + if (this.lives === 0) { + this.endGame(); + } + if (Math.random() > 0.98 && this.obstacle.length < 1) { + this.obstacle.push(new Obstacle(this.gameScreen)); + } + } + endGame() { + this.player.element.remove(); + this.obstacle.forEach((obstacle) => obstacle.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..eb6413d --- /dev/null +++ b/js/obstacle.js @@ -0,0 +1,25 @@ +class Obstacle { + constructor(gameScreen) { + this.gameScreen = gameScreen; + this.left = Math.floor(Math.random() * 300 + 70); + this.top = 0; + this.width = 100; + this.height = 150; + this.element = document.createElement("img"); + this.element.src = "./images/redCar.png"; + this.element.style.position = "absolute"; + this.element.style.left = this.left + "px"; + this.element.style.top = this.top + "px"; + this.element.style.width = this.width + "px"; + this.element.style.height = this.height + "px"; + this.gameScreen.appendChild(this.element); + } + updatePosition() { + this.element.style.top = this.top + "px"; + this.element.style.left = this.left + "px"; + } + move() { + this.top += 3; + this.updatePosition(); + } +} diff --git a/js/player.js b/js/player.js new file mode 100644 index 0000000..647d1eb --- /dev/null +++ b/js/player.js @@ -0,0 +1,54 @@ +class Player { + constructor(gameScreen, left, top, width, height, imageSrc) { + this.gameScreen = gameScreen; + this.left = left; + this.top = top; + this.width = width; + this.height = height; + this.directionX = 0; + this.directionY = 0; + this.element = document.createElement("img"); + this.element.src = imageSrc; + this.element.style.position = "absolute"; + this.element.style.width = this.width + "px"; + this.element.style.height = this.heigth + "px"; + this.element.style.left = this.left + "px"; + this.element.style.top = this.top + "px"; + this.gameScreen.appendChild(this.element); + } + move() { + this.left += this.directionX; + this.top += this.directionY; + 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; + } + this.updatePosition(); + } + updatePosition() { + this.element.style.left = this.left + "px"; + this.element.style.top = this.top + "px"; + } + didCollide(obstacle) { + const playerRect = this.element.getBoundingClientRect(); //shows where the player is on the screen + const obstacleRect = obstacle.element.getBoundingClientRect(); //shows where the obstacle is on the screen + if ( + playerRect.left < obstacleRect.right && + playerRect.right > obstacleRect.left && + playerRect.top < obstacleRect.bottom && + playerRect.bottom > obstacleRect.top + ) { + return true; + } else { + return false; + } + } +} diff --git a/js/script.js b/js/script.js index 95e544f..e1be676 100644 --- a/js/script.js +++ b/js/script.js @@ -1,12 +1,47 @@ window.onload = function () { const startButton = document.getElementById("start-button"); const restartButton = document.getElementById("restart-button"); - + let game; startButton.addEventListener("click", function () { startGame(); }); function startGame() { console.log("start game"); + game = new Game(); + game.start(); + } + function handleKeydown(event) { + const key = event.key; + const possibleKeystrokes = [ + "ArrowUp", + "ArrowDown", + "ArrowLeft", + "ArrowRight", + ]; + if (possibleKeystrokes.includes(key)) { + event.preventDefault(); + switch (key) { + case "ArrowUp": + game.player.directionY = -1; + break; + case "ArrowDown": + game.player.directionY = 1; + break; + case "ArrowLeft": + game.player.directionX = -1; + break; + case "ArrowRight": + game.player.directionX = 1; + break; + } + } + } + window.addEventListener("keydown", handleKeydown); + restartButton.addEventListener("click", function () { + restartGame(); + }); + function restartGame() { + location.reload(); } };