3D Змейка на Three.js

Конечно! Ниже представлен простой пример 3D-игры "Змейка" с использованием HTML, CSS и JavaScript с библиотекой Three.js. Этот пример предоставляет базовую функциональность, которую вы можете расширять и улучшать по своему усмотрению.

Шаги для запуска игры:

Создайте HTML-файл: Создайте новый файл, например, snake3d.html.
Вставьте следующий код в созданный файл.
Откройте файл в вашем веб-браузере.

Полный код игры "Змейка" в 3D:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>3D Змейка на Three.js</title>
    <style>
        body { margin: 0; overflow: hidden; }
        #info {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 100%;
            color: #fff;
            font-family: Arial, sans-serif;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div id="info">Используйте клавиши WASD и стрелки для управления змейкой.</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // Настройка сцены, камеры и рендерера
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Свет
        const light = new THREE.PointLight(0xffffff, 1);
        light.position.set(10, 10, 10);
        scene.add(light);

        // Размеры игрового поля
        const GRID_SIZE = 20;
        const UNIT = 1;

        // Материал для змейки и еды
        const snakeMaterial = new THREE.MeshPhongMaterial({color: 0x00ff00});
        const foodMaterial = new THREE.MeshPhongMaterial({color: 0xff0000});

        // Змейка
        let snake = [];
        let snakeDirection = new THREE.Vector3(1, 0, 0); // Начальное направление

        // Создание головы змейки
        function addSnakeSegment(position) {
            const geometry = new THREE.BoxGeometry(UNIT, UNIT, UNIT);
            const cube = new THREE.Mesh(geometry, snakeMaterial);
            cube.position.copy(position);
            scene.add(cube);
            snake.push(cube);
        }

        addSnakeSegment(new THREE.Vector3(0, 0, 0));

        // Еда
        let food;
        function spawnFood() {
            if (food) {
                scene.remove(food);
            }
            const geometry = new THREE.BoxGeometry(UNIT, UNIT, UNIT);
            food = new THREE.Mesh(geometry, foodMaterial);
            const x = Math.floor(Math.random() * GRID_SIZE - GRID_SIZE / 2) * UNIT;
            const y = Math.floor(Math.random() * GRID_SIZE - GRID_SIZE / 2) * UNIT;
            const z = Math.floor(Math.random() * GRID_SIZE - GRID_SIZE / 2) * UNIT;
            food.position.set(x, y, z);
            scene.add(food);
        }

        spawnFood();

        // Обработка ввода с клавиатуры
        const keyMap = {};
        window.addEventListener('keydown', function(event) {
            keyMap[event.key] = true;
        });
        window.addEventListener('keyup', function(event) {
            keyMap[event.key] = false;
        });

        // Функция обновления направления змейки
        function updateDirection() {
            if (keyMap['ArrowUp'] || keyMap['w']) {
                snakeDirection.set(0, 1, 0);
            } else if (keyMap['ArrowDown'] || keyMap['s']) {
                snakeDirection.set(0, -1, 0);
            } else if (keyMap['ArrowLeft'] || keyMap['a']) {
                snakeDirection.set(-1, 0, 0);
            } else if (keyMap['ArrowRight'] || keyMap['d']) {
                snakeDirection.set(1, 0, 0);
            } else if (keyMap['q']) { // Вверх по Z
                snakeDirection.set(0, 0, 1);
            } else if (keyMap['e']) { // Вниз по Z
                snakeDirection.set(0, 0, -1);
            }
        }

        // Таймер игры
        const SPEED = 5; // Скорость обновления (раз в секунду / SPEED)
        let lastMoveTime = 0;

        // Основной цикл анимации
        function animate(time) {
            requestAnimationFrame(animate);

            if (time - lastMoveTime > 1000 / SPEED) {
                lastMoveTime = time;

                updateDirection();

                // Вычисление новой позиции головы
                const head = snake[0];
                const newPos = head.position.clone().add(snakeDirection.clone().multiplyScalar(UNIT));

                // Проверка столкновений с границами
                if (Math.abs(newPos.x) > GRID_SIZE/2 * UNIT ||
                    Math.abs(newPos.y) > GRID_SIZE/2 * UNIT ||
                    Math.abs(newPos.z) > GRID_SIZE/2 * UNIT) {
                    alert('Игра окончена! Вы столкнулись с границей.');
                    window.location.reload();
                }

                // Проверка столкновений с собой
                for (let segment of snake) {
                    if (segment.position.equals(newPos)) {
                        alert('Игра окончена! Вы столкнулись с собой.');
                        window.location.reload();
                    }
                }

                // Добавление нового сегмента
                addSnakeSegment(newPos);

                // Проверка на поедание еды
                if (newPos.distanceTo(food.position) < UNIT / 2) {
                    spawnFood();
                } else {
                    // Удаление последнего сегмента
                    const tail = snake.pop();
                    scene.remove(tail);
                }

                // Обновление позиции камеры
                camera.position.set(newPos.x + 10, newPos.y + 10, newPos.z + 10);
                camera.lookAt(newPos);
            }

            renderer.render(scene, camera);
        }

        animate();

        // Обработка изменения размера окна
        window.addEventListener('resize', function() {
            const width = window.innerWidth;
            const height = window.innerHeight;
            renderer.setSize(width, height);
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
        });
    </script>
</body>
</html>

Объяснение ключевых частей кода:

Three.js: Используется для рендеринга 3D-графики. Подключается через CDN.
Сцена, камера и рендерер: Основные компоненты для отображения 3D-мира.
Змейка: Представлена как массив кубов (THREE.Mesh), каждый из которых является сегментом змейки.
Еда: Также куб, который появляется в случайных позициях на игровом поле.
Управление: Используются клавиши стрелок и W, A, S, D для управления направлением змейки. Дополнительно Q и E для движения по оси Z.
Коллизии: Проверяются столкновения с границами игрового поля и с самим собой. В случае столкновения игра перезапускается.
Камера: Следит за головой змейки, обеспечивая обзор игрового процесса.
Анимация: Основной цикл animate обновляет состояние игры с заданной скоростью.

Дополнительные улучшения:

Добавление уровней сложности: Увеличение скорости змейки по мере роста.
Графические улучшения: Использование текстур, освещения и теней для более привлекательного внешнего вида.
Звуковые эффекты: Добавление звуков при поедании еды или столкновениях.
Управление камерой: Позволить игроку изменять угол обзора или использовать свободную камеру.

Этот пример предоставляет основу для 3D-игры "Змейка". Вы можете расширять функциональность, добавлять новые элементы и улучшать визуальную составляющую по своему вкусу. Удачи в разработке!

3D Змейка на Three.js

Question

Thought

Answer

Шаги для запуска игры:

Полный код игры "Змейка" в 3D:

Объяснение ключевых частей кода:

Дополнительные улучшения:

Share this Q&A