nice I can't make it work
This commit is contained in:
parent
849ec9f4bc
commit
c6d1a47097
1 changed files with 111 additions and 126 deletions
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue