Snake de 8 bits em desenvolvimento...

114 mironovbogdan341

Abrir no Editor Publique Seu Código

Recomendado

30 March 2025

Efeito de embaralhamento de texto

17 May 2025

site moderno

19 October 2024

Portfólio do desenvolvedor HTML V2

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 de 8 bits em desenvolvimento...

Recomendado

Efeito de embaralhamento de texto

site moderno

Portfólio do desenvolvedor HTML V2

HTML

CSS

JS

Recomendado

Efeito de embaralhamento de texto

site moderno

Portfólio do desenvolvedor HTML V2

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS