Вот пример простой игры «Змейка», реализованной на HTML, CSS и JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Snake Game</title>
<style>
#game-board {
border: 1px solid black;
width: 400px;
height: 400px;
position: relative;
}
.snake-part {
width: 20px;
height: 20px;
position: absolute;
}
.food {
width: 20px;
height: 20px;
position: absolute;
background-color: red;
}
</style>
</head>
<body>
<h1>Snake Game</h1>
<div id="game-board"></div>
<script>
const gameBoard = document.getElementById('game-board');
const snakePartSize = 20;
const initialSnakeLength = 3;
let snake = [];
let food = null;
let direction = 'right';
function createSnake() {
for (let i = initialSnakeLength - 1; i >= 0; i--) {
snake.push({ x: i, y: 0 });
}
}
function drawSnake() {
gameBoard.innerHTML = '';
snake.forEach(part => {
const snakePart = document.createElement('div');
snakePart.style.left = part.x * snakePartSize + 'px';
snakePart.style.top = part.y * snakePartSize + 'px';
snakePart.classList.add('snake-part');
gameBoard.appendChild(snakePart);
});
}
function createFood() {
const foodX = Math.floor(Math.random() * (gameBoard.offsetWidth / snakePartSize));
const foodY = Math.floor(Math.random() * (gameBoard.offsetHeight / snakePartSize));
food = { x: foodX, y: foodY };
const foodElement = document.createElement('div');
foodElement.style.left = food.x * snakePartSize + 'px';
foodElement.style.top = food.y * snakePartSize + 'px';
foodElement.classList.add('food');
gameBoard.appendChild(foodElement);
}
function moveSnake() {
const head = { x: snake[0].x, y: snake[0].y };
switch (direction) {
case 'up':
head.y--;
break;
case 'down':
head.y++;
break;
case 'left':
head.x--;
break;
case 'right':
head.x++;
break;
}
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
createFood();
} else {
snake.pop();
}
}
function changeDirection(event) {
const keyPressed = event.keyCode;
switch (keyPressed) {
case 37:
if (direction !== 'right') {
direction = 'left';
}
break;
case 38:
if (direction !== 'down') {
direction = 'up';
}
break;
case 39:
if (direction !== 'left') {
direction = 'right';
}
break;
case 40:
if (direction !== 'up') {
direction = 'down';
}
break;
}
}
function checkCollision() {
const head = snake[0];
if (
head.x < 0 ||
head.x >= gameBoard.offsetWidth / snakePartSize ||
head.y < 0 ||
head.y >= gameBoard.offsetHeight / snakePartSize
) {
clearInterval(gameLoop);
alert('Game Over!');
}
for (let i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
clearInterval(gameLoop);
alert('Game Over!');
break;
}
}
}
createSnake();
drawSnake();
createFood();
const gameLoop = setInterval(() => {
moveSnake();
drawSnake();
checkCollision();
}, 200);
document.addEventListener('keydown', changeDirection);
</script>
</body>
</html>Этот код создает простую игру «Змея», в которой игрок управляет змеей, которая поедает пищу и растет дольше. Игра реализована с использованием HTML, CSS и JavaScript. Змея управляется с помощью клавиш со стрелками, и игра заканчивается, если змея сталкивается с границами игрового поля или сама с собой.