Snake de 8 bits en desarrollo...

Abrir en el editor Publica tu código

Recomendado

10 November 2024

<!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>

Snake de 8 bits en desarrollo...

Recomendado

Formulario HTML CSS OTP

Tarjeta volteada

Un código de slowlogic9

HTML

CSS

JS

Recomendado

Formulario HTML CSS OTP

Tarjeta volteada

Un código de slowlogic9

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS