Snake 8 bits en développement...

749 mironovbogdan341

Ouvrir dans l'éditeur Publiez votre code

Recommandé

9 March 2023

Formulaire d'inscription responsive Bootstrap

25 November 2025

Recul

1 March 2025

Un code par gurbetshopelectronics

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>

Snake 8 bits en développement...

Recommandé

Formulaire d'inscription responsive Bootstrap

Recul

Un code par gurbetshopelectronics

HTML

CSS

JS

Recommandé

Formulaire d'inscription responsive Bootstrap

Recul

Un code par gurbetshopelectronics

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS