Классический вариант игры «Змейка»
Файл index.html
<!DOCTYPE html>
<html>
<head>
<title>Змейка</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="snake.js"></script>
</body>
</html>
Файл snake.js
// Инициализация игры
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var blockSize = 10;
var widthInBlocks = width / blockSize;
var heightInBlocks = height / blockSize;
var score = 0;
// Рисуем рамку
var drawBorder = function () {
ctx.fillStyle = "Gray";
ctx.fillRect(0, 0, width, blockSize);
ctx.fillRect(0, height - blockSize, width, blockSize);
ctx.fillRect(0, 0, blockSize, height);
ctx.fillRect(width - blockSize, 0, blockSize, height);
};
// Рисуем счет
var drawScore = function () {
ctx.font = "20px Courier";
ctx.fillStyle = "Black";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Счет: " + score, blockSize, blockSize);
};
// Отменяем стандартное поведение клавиш
var directions = {
37: "left",
38: "up",
39: "right",
40: "down"
};
document.addEventListener("keydown", function (event) {
var newDirection = directions[event.keyCode];
if (newDirection !== undefined) {
snake.setDirection(newDirection);
}
});
// Отображение сообщения о конце игры
var gameOver = function () {
clearInterval(intervalId);
ctx.font = "60px Courier";
ctx.fillStyle = "Black";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Конец игры", width / 2, height / 2);
};
// Создаем блок
var Block = function (col, row) {
this.col = col;
this.row = row;
};
// Рисуем круглый блок
Block.prototype.drawCircle = function (color) {
var centerX = this.col * blockSize + blockSize / 2;
var centerY = this.row * blockSize + blockSize / 2;
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(centerX, centerY, blockSize / 2, 0, Math.PI * 2, false);
ctx.fill();
};
// Рисуем квадратный блок
Block.prototype.drawSquare = function (color) {
var x = this.col * blockSize;
var y = this.row * blockSize;
ctx.fillStyle = color;
ctx.fillRect(x, y, blockSize, blockSize);
};
// Проверяем, находится ли блок в том же месте, что и другой блок
Block.prototype.equal = function (otherBlock) {
return this.col === otherBlock.col && this.row === otherBlock.row;
};
// Создаем змею
var Snake = function () {
this.segments = [
new Block(7, 5),
new Block(6, 5),
new Block(5, 5)
];
this.direction = "right";
this.nextDirection = "right";
};
// Рисуем змею
Snake.prototype.draw = function () {
for (var i = 0; i < this.segments.length; i++) {
this.segments[i].drawSquare("Blue");
}
};
// Перемещаем змею
Snake.prototype.move = function () {
var head = this.segments[0];
var newHead;
this.direction = this.nextDirection;
if (this.direction === "right") {
newHead = new Block(head.col + 1, head.row);
} else if (this.direction === "down") {
newHead = new Block(head.col, head.row + 1);
} else if (this.direction === "left") {
newHead = new Block(head.col - 1, head.row);
} else if (this.direction === "up") {
newHead = new Block(head.col, head.row - 1);
}
if (this.checkCollision(newHead)) {
gameOver();
return;
}
this.segments.unshift(newHead);
if (newHead.equal(apple.position)) {
score++;
apple.move();
} else {
this.segments.pop();
}
};
// Проверяем, не столкнулась ли змея со стеной или собственным телом
Snake.prototype.checkCollision = function (head) {
var leftCollision = (head.col === 0);
var topCollision = (head.row === 0);
var rightCollision = (head.col === widthInBlocks - 1);
var bottomCollision = (head.row === heightInBlocks - 1);
var wallCollision = leftCollision || topCollision || rightCollision || bottomCollision;
var selfCollision = false;
for (var i = 0; i < this.segments.length; i++) {
if (head.equal(this.segments[i])) {
selfCollision = true;
}
}
return wallCollision || selfCollision;
};
// Устанавливаем направление движения змеи
Snake.prototype.setDirection = function (newDirection) {
if (this.direction === "up" && newDirection === "down") {
return;
} else if (this.direction === "right" && newDirection === "left") {
return;
} else if (this.direction === "down" && newDirection === "up") {
return;
} else if (this.direction === "left" && newDirection === "right") {
return;
}
this.nextDirection = newDirection;
};
// Создаем яблоко
var Apple = function () {
this.position = new Block(10, 10);
};
// Рисуем яблоко
Apple.prototype.draw = function () {
this.position.drawCircle("LimeGreen");
};
// Перемещаем яблоко
Apple.prototype.move = function () {
var randomCol = Math.floor(Math.random() * (widthInBlocks - 2)) + 1;
var randomRow = Math.floor(Math.random() * (heightInBlocks - 2)) + 1;
this.position = new Block(randomCol, randomRow);
};
// Создаем объекты змеи и яблока
var snake = new Snake();
var apple = new Apple();
// Запускаем игру
var intervalId = setInterval(function () {
ctx.clearRect(0, 0, width, height);
drawScore();
snake.move();
snake.draw();
apple.draw();
drawBorder();
}, 100);
4 Comments
Xổ số Long An — một trong những nhà đài uy tín nhất hiện nay, đã trở thành món ăn tinh thần không thể thiếu của hàng triệu người. Bạn đã biết cách tham gia và tăng cơ hội trúng thưởng chưa? Cùng Dự đoán Xổ số Long An khám phá ngay những bí quyết thú vị! xổ số Long An
Xổ số Phú Yên — một trong những nhà đài uy tín nhất hiện nay, đã trở thành món ăn tinh thần không thể thiếu của hàng triệu người. Bạn đã biết cách tham gia và tăng cơ hội trúng thưởng chưa? Cùng Dự đoán Xổ số Phú Yên khám phá ngay những bí quyết thú vị! xổ số Phú Yên
Xổ số Bình Dương — một trong những nhà đài uy tín nhất hiện nay, đã trở thành món ăn tinh thần không thể thiếu của hàng triệu người. Bạn đã biết cách tham gia và tăng cơ hội trúng thưởng chưa? Cùng Dự đoán Xổ số Bình Dương khám phá ngay những bí quyết thú vị! Dự đoán Xổ số Bình Dương
Xổ số Bình Phước — một trong những nhà đài uy tín nhất hiện nay, đã trở thành món ăn tinh thần không thể thiếu của hàng triệu người. Bạn đã biết cách tham gia và tăng cơ hội trúng thưởng chưa? Cùng Dự đoán Xổ số Bình Phước khám phá ngay những bí quyết thú vị! Dự đoán Xổ số Bình Phước