Dantes (обсуждение | вклад) Нет описания правки |
Dantes (обсуждение | вклад) Нет описания правки |
||
| Строка 1: | Строка 1: | ||
( | var canvas = document.createElement("canvas"); | ||
canvas.width = 300; | |||
canvas.height = 300; | |||
document.body.appendChild(canvas); | |||
var ctx = canvas.getContext("2d"); | |||
var gridSize = 10; | |||
var snake = [{x: 50, y: 50}]; | |||
var direction = {x: gridSize, y: 0}; | |||
var food = {x: 100, y: 100}; | |||
var gameOver = false; | |||
function draw() { | |||
ctx.clearRect(0, 0, canvas.width, canvas.height); | |||
ctx.fillStyle = "#00FF00"; | |||
var | snake.forEach(function(segment) { | ||
if ( | ctx.fillRect(segment.x, segment.y, gridSize, gridSize); | ||
}); | |||
ctx.fillStyle = "#FF0000"; | |||
ctx.fillRect(food.x, food.y, gridSize, gridSize); | |||
if (gameOver) { | |||
ctx.fillStyle = "#000000"; | |||
ctx.fillText("Game Over!", canvas.width / 2 - 40, canvas.height / 2); | |||
} | |||
} | |||
function update() { | |||
if (gameOver) return; | |||
var newHead = {x: snake[0].x + direction.x, y: snake[0].y + direction.y}; | |||
if (newHead.x < 0 || newHead.x >= canvas.width || newHead.y < 0 || newHead.y >= canvas.height || collision(newHead)) { | |||
gameOver = true; | |||
return; | |||
} | |||
snake.unshift(newHead); | |||
if (newHead.x === food.x && newHead.y === food.y) { | |||
food = {x: Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize, y: Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize}; | |||
} else { | |||
snake.pop(); | |||
} | |||
} | |||
function collision(head) { | |||
for (var i = 1; i < snake.length; i++) { | |||
if (head.x === snake[i].x && head.y === snake[i].y) { | |||
return true; | |||
} | } | ||
event. | } | ||
}); | return false; | ||
})(); | } | ||
function changeDirection(event) { | |||
if (event.keyCode === 37 && direction.x === 0) { | |||
direction = {x: -gridSize, y: 0}; | |||
} else if (event.keyCode === 38 && direction.y === 0) { | |||
direction = {x: 0, y: -gridSize}; | |||
} else if (event.keyCode === 39 && direction.x === 0) { | |||
direction = {x: gridSize, y: 0}; | |||
} else if (event.keyCode === 40 && direction.y === 0) { | |||
direction = {x: 0, y: gridSize}; | |||
} | |||
} | |||
document.addEventListener("keydown", changeDirection); | |||
function gameLoop() { | |||
update(); | |||
draw(); | |||
if (!gameOver) { | |||
setTimeout(gameLoop, 100); | |||
} | |||
} | |||
gameLoop(); | |||
Версия от 06:28, 17 января 2025
var canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 300;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
var gridSize = 10;
var snake = [{x: 50, y: 50}];
var direction = {x: gridSize, y: 0};
var food = {x: 100, y: 100};
var gameOver = false;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#00FF00";
snake.forEach(function(segment) {
ctx.fillRect(segment.x, segment.y, gridSize, gridSize);
});
ctx.fillStyle = "#FF0000";
ctx.fillRect(food.x, food.y, gridSize, gridSize);
if (gameOver) {
ctx.fillStyle = "#000000";
ctx.fillText("Game Over!", canvas.width / 2 - 40, canvas.height / 2);
}
}
function update() {
if (gameOver) return;
var newHead = {x: snake[0].x + direction.x, y: snake[0].y + direction.y};
if (newHead.x < 0 || newHead.x >= canvas.width || newHead.y < 0 || newHead.y >= canvas.height || collision(newHead)) {
gameOver = true;
return;
}
snake.unshift(newHead);
if (newHead.x === food.x && newHead.y === food.y) {
food = {x: Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize, y: Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize};
} else {
snake.pop();
}
}
function collision(head) {
for (var i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
return true;
}
}
return false;
}
function changeDirection(event) {
if (event.keyCode === 37 && direction.x === 0) {
direction = {x: -gridSize, y: 0};
} else if (event.keyCode === 38 && direction.y === 0) {
direction = {x: 0, y: -gridSize};
} else if (event.keyCode === 39 && direction.x === 0) {
direction = {x: gridSize, y: 0};
} else if (event.keyCode === 40 && direction.y === 0) {
direction = {x: 0, y: gridSize};
}
}
document.addEventListener("keydown", changeDirection);
function gameLoop() {
update();
draw();
if (!gameOver) {
setTimeout(gameLoop, 100);
}
}
gameLoop();