123 lines
3.4 KiB
JavaScript
123 lines
3.4 KiB
JavaScript
"use strict";
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const cvs = document.getElementById("game");
|
|
const ctx = cvs.getContext("2d");
|
|
const startBtn = document.getElementById("start");
|
|
const description = document.getElementById("description");
|
|
const box = 32;
|
|
|
|
const ground = new Image();
|
|
ground.src = "img/ground.png";
|
|
|
|
const foodImg = new Image();
|
|
foodImg.src = "img/food.png";
|
|
|
|
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");
|
|
|
|
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", 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);
|
|
|
|
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");
|
|
}
|
|
|
|
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);
|
|
}
|
|
});
|