Попробуй добежать! Разработчик создал «Игру в кальмара» на JavaScript

Если вы не смотрели сериал «Игра в кальмара», то наверняка слышали о нем из-за огромной волны хайпа, которая охватила весь мир после его выхода. За это время в сети появилось немало продуктов, связанных с сериалом. Простую версию одной из игр сделал фронтенд-разработчик под ником Shuvo. Он создал ее с помощью JavaScript и библиотеки для создания 3D-контента Three.js. Вот как ему это удалось. 

В интернете можно найти множество версий игры, вот только некоторые из них: 

Давайте создадим свою. Если сделаете все правильно, получится такая игра.

Для этого следуйте следующим пунктам: 

1. Базовая настройка Three.js.

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

renderer.setClearColor( 0xb7c3f3, 1 );

const light = new THREE.AmbientLight( 0xffffff );
scene.add( light )

camera.position.z = 5;

function animate() {
    if(gameStat == "over") return
    renderer.render( scene, camera );
    requestAnimationFrame( animate );
    player.update()
}
animate();

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );

}

2. Загрузка 3D-модели куклы. Шаблон можно скачать здесь.

const loader = new THREE.GLTFLoader()
   loader.load("../models/scene.gltf", (gltf) => {
           scene.add( gltf.scene );
           gltf.scene.scale.set(.4, .4, .4);
           gltf.scene.position.set(0, -1, 0);
           this.doll = gltf.scene;
       })

3. Создание class Doll.

function delay(ms){
    return new Promise(resolve => setTimeout(resolve, ms));
}

class Doll{
    constructor(){
        loader.load("../models/scene.gltf", (gltf) => {
            scene.add( gltf.scene );
            gltf.scene.scale.set(.4, .4, .4);
            gltf.scene.position.set(0, -1, 0);
            this.doll = gltf.scene;
        })
    }

    lookBackward(){
        gsap.to(this.doll.rotation, {y: -3.15, duration: .45})
        setTimeout(() => isLookingBackward = true, 150)
    }

    lookForward(){
        gsap.to(this.doll.rotation, {y: 0, duration: .45})
        setTimeout(() => isLookingBackward = false, 450)
    }

    //Makes the doll look back for 1.5 - 3 seconds then look forward for .75 - 1.5 seconds and keep repeating these.
    async start(){
        this.lookBackward()
        await delay((Math.random() * 1000) + 1000)
        this.lookForward()
        await delay((Math.random() * 750) + 750)
        this.start()
    }
}

4. Создание маршрута, который игроки должны преодолеть.

function createCube(size, positionX, rotY = 0, color = 0xfbc851){
    const geometry = new THREE.BoxGeometry(size.w, size.h, size.d);
    const material = new THREE.MeshBasicMaterial( { color: color } );
    const cube = new THREE.Mesh( geometry, material );
    cube.position.x = positionX;
    cube.rotation.y = rotY;
    scene.add( cube );
    return cube
}

function createTrack(){
    createCube({w: start_position * 2 + .2, h: 1.5, d: 1}, 0, 0, 0xe5a716).position.z = -1;
    createCube({w: .2, h: 1.5, d: 1}, start_position, -.35);
    createCube({w: .2, h: 1.5, d: 1}, end_position, .35);
}
createTrack()

5. Создание class Player. (игрок  это просто сфера)

class Player{
    constructor(){
        const geometry = new THREE.SphereGeometry( .3, 32, 16 );
        const material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
        const sphere = new THREE.Mesh( geometry, material );
        sphere.position.z = 1
        sphere.position.x = start_position
        scene.add( sphere )
        this.player = sphere
        this.playerInfo = {
            positionX: start_position,
            velocity: 0
        }
    }

    run(){
        this.playerInfo.velocity = .03
    }

    stop(){
        gsap.to(this.playerInfo, {velocity: 0, duration: .1})
    }

    update(){ //Update function is called in animation loop
        this.check()
        this.playerInfo.positionX -= this.playerInfo.velocity
        this.player.position.x = this.playerInfo.positionX
    }
}

6. Привязка нажатия клавиш к Player.

window.addEventListener('keydown', (e) => {
    if(e.key == "ArrowUp"){
        player.run()
    }
})
window.addEventListener('keyup', (e) => {
    if(e.key == "ArrowUp"){
        player.stop()
    }
})

7. Последним действием нужно собрать все вместе и реализовать логику игры. Полный код проекта хранится в репозитории. 

Для удобства автор также записал пошаговое руководство по созданию игры. 

Примечание: некоторые пользователи отмечают, что игра плохо совместима с браузером Firefox, в котором при нажатии клавиши w открывается окно поиска.