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