Snake de 8 bits en desarrollo...

750 mironovbogdan341

Abrir en el editor Publica tu código

Recomendado

13 May 2025

Página de inicio de sesión de Roblox HTML CSS

31 July 2025

Teclado interactivo

28 March 2025

Conmutador de animación de sprites CSS

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Змейка 8-бит</title>
<style>
  body {
    background-color: black;
    margin: 0;
    overflow: hidden;
  }
  canvas {
    display: block;
    margin: auto;
    background-color: #222;
  }
</style>
</head>
<body>
<canvas id="game" width="320" height="320"></canvas>

const gridSize = 16; // Размер клетки
const width = canvas.width / gridSize; // Количество клеток по ширине
const height = canvas.height / gridSize; // Количество клеток по высоте

// Цвета в стиле 8-бит
const snakeColor = '#00FF00';
const foodColor = '#FF0000';
const bgColor = '#000000';

// Начальные параметры
let snake = [{x: Math.floor(width/2), y: Math.floor(height/2)}];
let direction = {x: 0, y: -1}; // Изначально движется вверх
let food = null;
let gameOver = false;
let score = 0;

// Генерация еды
function spawnFood() {
    let newFood;
    while (true) {
        newFood = {
            x: Math.floor(Math.random() * width),
            y: Math.floor(Math.random() * height)
        };
        // Проверка, чтобы еда не появлялась на змейке
        if (!snake.some(segment => segment.x === newFood.x && segment.y === newFood.y)) {
            break;
        }
    }
    food = newFood;
}

// Обработка клавиш
window.addEventListener('keydown', e => {
    if (e.key === 'ArrowUp' && direction.y !== 1) {
        direction = {x:0, y:-1};
    } else if (e.key === 'ArrowDown' && direction.y !== -1) {
        direction = {x:0, y:1};
    } else if (e.key === 'ArrowLeft' && direction.x !== 1) {
        direction = {x:-1, y:0};
    } else if (e.key === 'ArrowRight' && direction.x !== -1) {
        direction = {x:1, y:0};
    }
});

// Основной цикл игры
function gameLoop() {
    if (gameOver) {
        alert('Игра окончена! Очки: ' + score);
        return;
    }

// Перемещение змейки
    const head = {...snake[0]};
    head.x += direction.x;
    head.y += direction.y;

// Проверка столкновений с границами или собой
    if (
        head.x < 0 || head.x >= width ||
        head.y < 0 || head.y >= height ||
        snake.some(segment => segment.x === head.x && segment.y === head.y)
    ) {
        gameOver = true;
        gameLoop();
        return;
    }

snake.unshift(head);

// Проверка съедания еды
    if (food && head.x === food.x && head.y === food.y) {
        score++;
        spawnFood();
    } else {
        snake.pop();
    }

// Рисуем всё
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

// Рисуем еду
    ctx.fillStyle = foodColor;
    ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);

// Рисуем змейку
    ctx.fillStyle = snakeColor;
    for (let segment of snake) {
        ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
    }

setTimeout(gameLoop, 150); // Скорость игры (меньше — быстрее)
}

// Запуск игры
spawnFood();
gameLoop();
</script>
</body>
</html>

Recomendado

Página de inicio de sesión de Roblox HTML CSS

Teclado interactivo

Conmutador de animación de sprites CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS