diff --git a/secret/snake/game.js b/secret/snake/game.js index 1dc78c9..22cf87f 100644 --- a/secret/snake/game.js +++ b/secret/snake/game.js @@ -1,138 +1,123 @@ "use strict"; document.addEventListener("DOMContentLoaded", () => { - class SnakeGame { - constructor() { - this.cvs = document.getElementById("game"); - this.ctx = this.cvs.getContext("2d"); - this.startBtn = document.getElementById("start"); - this.description = document.getElementById("description"); - this.box = 32; + const cvs = document.getElementById("game"); + const ctx = cvs.getContext("2d"); + const startBtn = document.getElementById("start"); + const description = document.getElementById("description"); + const box = 32; - this.ground = new Image(); - this.ground.src = "img/ground.png"; + const ground = new Image(); + ground.src = "img/ground.png"; - this.foodImg = new Image(); - this.foodImg.src = "img/food.png"; + const foodImg = new Image(); + foodImg.src = "img/food.png"; - this.sounds = { - dead: new Audio("audio/dead.mp3"), - eat: new Audio("audio/eat.mp3"), - up: new Audio("audio/up.mp3"), - right: new Audio("audio/right.mp3"), - left: new Audio("audio/left.mp3"), - down: new Audio("audio/down.mp3"), - }; + let dead = new Audio("audio/dead.mp3"); + let eat = new Audio("audio/eat.mp3"); + let up = new Audio("audio/up.mp3"); + let right = new Audio("audio/right.mp3"); + let left = new Audio("audio/left.mp3"); + let down = new Audio("audio/down.mp3"); - this.snake = [{ x: 9 * this.box, y: 10 * this.box }]; - this.food = this.getRandomFoodPosition(); - this.score = 0; - this.direction = null; - this.game = null; + let snake = [{ x: 9 * box, y: 10 * box }]; + let food = { + x: Math.floor(Math.random() * 17 + 1) * box, + y: Math.floor(Math.random() * 15 + 3) * box, + }; + let score = 0; + let d; + let game; - document.addEventListener("keydown", (event) => - this.handleKeyPress(event) - ); - this.initControls(); - this.startBtn.addEventListener("click", () => this.startGame()); - } + document.addEventListener("keydown", direction); + document + .getElementById("up") + .addEventListener("click", () => changeDirection("UP")); + document + .getElementById("down") + .addEventListener("click", () => changeDirection("DOWN")); + document + .getElementById("left") + .addEventListener("click", () => changeDirection("LEFT")); + document + .getElementById("right") + .addEventListener("click", () => changeDirection("RIGHT")); + startBtn.addEventListener("click", startGame); - getRandomFoodPosition() { - return { - x: Math.floor(Math.random() * 17 + 1) * this.box, - y: Math.floor(Math.random() * 15 + 3) * this.box, - }; - } - - handleKeyPress(event) { - const key = event.key.toLowerCase(); - if ((key === "arrowleft" || key === "a") && this.direction !== "RIGHT") - this.changeDirection("LEFT"); - if ((key === "arrowup" || key === "w") && this.direction !== "DOWN") - this.changeDirection("UP"); - if ((key === "arrowright" || key === "d") && this.direction !== "LEFT") - this.changeDirection("RIGHT"); - if ((key === "arrowdown" || key === "s") && this.direction !== "UP") - this.changeDirection("DOWN"); - } - - initControls() { - document - .getElementById("up") - .addEventListener("click", () => this.changeDirection("UP")); - document - .getElementById("down") - .addEventListener("click", () => this.changeDirection("DOWN")); - document - .getElementById("left") - .addEventListener("click", () => this.changeDirection("LEFT")); - document - .getElementById("right") - .addEventListener("click", () => this.changeDirection("RIGHT")); - } - - changeDirection(newDirection) { - this.direction = newDirection; - this.sounds[newDirection.toLowerCase()].play(); - } - - collision(head, array) { - return array.some( - (segment) => segment.x === head.x && segment.y === head.y - ); - } - - draw() { - this.ctx.drawImage(this.ground, 0, 0); - - this.snake.forEach((segment, index) => { - this.ctx.fillStyle = index === 0 ? "green" : "white"; - this.ctx.fillRect(segment.x, segment.y, this.box, this.box); - this.ctx.strokeStyle = "red"; - this.ctx.strokeRect(segment.x, segment.y, this.box, this.box); - }); - - this.ctx.drawImage(this.foodImg, this.food.x, this.food.y); - - let snakeX = this.snake[0].x; - let snakeY = this.snake[0].y; - - if (this.direction === "LEFT") snakeX -= this.box; - if (this.direction === "UP") snakeY -= this.box; - if (this.direction === "RIGHT") snakeX += this.box; - if (this.direction === "DOWN") snakeY += this.box; - - if (snakeX === this.food.x && snakeY === this.food.y) { - this.score++; - this.sounds.eat.play(); - this.food = this.getRandomFoodPosition(); - } else { - this.snake.pop(); - } - - let newHead = { x: snakeX, y: snakeY }; - if ( - snakeX < this.box || - snakeX > 17 * this.box || - snakeY < 3 * this.box || - snakeY > 17 * this.box || - this.collision(newHead, this.snake) - ) { - clearInterval(this.game); - this.sounds.dead.play(); - } - - this.snake.unshift(newHead); - this.ctx.fillStyle = "white"; - this.ctx.font = "45px Changa one"; - this.ctx.fillText(this.score, 2 * this.box, 1.6 * this.box); - } - - startGame() { - this.description.style.display = "none"; - this.game = setInterval(() => this.draw(), 100); - } + function direction(event) { + const key = event.key.toLowerCase(); + if ((key === "arrowleft" || key === "a") && d !== "RIGHT") + changeDirection("LEFT"); + if ((key === "arrowup" || key === "w") && d !== "DOWN") + changeDirection("UP"); + if ((key === "arrowright" || key === "d") && d !== "LEFT") + changeDirection("RIGHT"); + if ((key === "arrowdown" || key === "s") && d !== "UP") + changeDirection("DOWN"); } - new SnakeGame(); + function changeDirection(newDirection) { + d = newDirection; + if (newDirection === "LEFT") left.play(); + if (newDirection === "UP") up.play(); + if (newDirection === "RIGHT") right.play(); + if (newDirection === "DOWN") down.play(); + } + + function collision(head, array) { + return array.some( + (segment) => segment.x === head.x && segment.y === head.y + ); + } + + function draw() { + ctx.drawImage(ground, 0, 0); + snake.forEach((segment, index) => { + ctx.fillStyle = index === 0 ? "green" : "white"; + ctx.fillRect(segment.x, segment.y, box, box); + ctx.strokeStyle = "red"; + ctx.strokeRect(segment.x, segment.y, box, box); + }); + ctx.drawImage(foodImg, food.x, food.y); + + let snakeX = snake[0].x; + let snakeY = snake[0].y; + if (d === "LEFT") snakeX -= box; + if (d === "UP") snakeY -= box; + if (d === "RIGHT") snakeX += box; + if (d === "DOWN") snakeY += box; + + if (snakeX === food.x && snakeY === food.y) { + score++; + eat.play(); + food = { + x: Math.floor(Math.random() * 17 + 1) * box, + y: Math.floor(Math.random() * 15 + 3) * box, + }; + } else { + snake.pop(); + } + + let newHead = { x: snakeX, y: snakeY }; + if ( + snakeX < box || + snakeX > 17 * box || + snakeY < 3 * box || + snakeY > 17 * box || + collision(newHead, snake) + ) { + clearInterval(game); + dead.play(); + } + + snake.unshift(newHead); + ctx.fillStyle = "white"; + ctx.font = "45px Changa one"; + ctx.fillText(score, 2 * box, 1.6 * box); + } + + function startGame() { + description.style.display = "none"; + game = setInterval(draw, 100); + } });