From c6d1a47097295b91f9590a20ca2df10d9fd66537 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Tue, 25 Feb 2025 11:32:25 +0100
Subject: [PATCH] nice I can't make it work
---
secret/snake/game.js | 237 ++++++++++++++++++++-----------------------
1 file changed, 111 insertions(+), 126 deletions(-)
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);
+ }
});