Snake 8 bits en développement...

Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 June 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 8 bits en développement...

Recommandé

Galerie d'animaux

Un code par staticdata256

Terminal de piratage

HTML

CSS

JS

Recommandé

Galerie d'animaux

Un code par staticdata256

Terminal de piratage

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS