I made Squid Game with JavaScript

#javascript #webdev #programming #beginners

I just made a really simple version of Red Light Green Light game from Squid Game with JavaScript and THREE.JS.
You can play it here.
If you want a step by step tutorial on how to create this game I have create a YouTube tutorial that you can check.

But if you want just a brief keep reading this article.

So here are the steps I took to create the game:
i. Basic project setup with 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 );

}

ii. Use 3d model of doll from squid game.

    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;
        })

iii. I also made a Doll class for convenience.

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()
    }
}

iv. Then I made the track the players have to cross using some cubes.


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()

v. then I also made a Player class(player is just a sphere)

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
    }
}

vi. Then I added key press events to the Player.

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

vii. Finally I just put everything together and implementing game logics to make it functional.

You can get complete codes here

You may find my articles and YouTube videos interesting to check them out.

Shuvo

Frontend Developer and YouTuber. Channel link: https://www.youtube.com/c/AngleBrace

width="710" height="399" src="https://www.youtube.com/embed/7bTuSZ94F6A" allowfullscreen loading="lazy">

Top comments (53)

Ebrahiem Gamal Mohammed • Oct 28 '21 • Edited

That is amazing, you are doing a great work.
but just a hint, I tried your demo and the game logic was reversed. For instance, the player must move when the Doll looking backward not forward.

Thanks for sharing.

Shuvo • Oct 28 '21

Actually in the Netflix series player could only move when the doll is looking backward

chrSchroers • Oct 28 '21 • Edited

Yeah but in your game, backward means you can see the back of the doll. but she is actually facing the players (because her view goes to the track), so i guess that is the confusion here.

would be better if the doll was on the left side of the screen, facing towards right, when players should not move.

anyway, great work! i got it immediately :)

Shuvo • Oct 28 '21

Alright got it Thanks

Shuvo • Oct 25 '21

Great suggestion. Actually in many games you can use a,s,w,d instead on arrow keys so I choose w since it represents UpArrow

Srushti • May 16 '22

Hii there... I'm trying to make the same project as u did Becz I was fascinated by ur work I wanted to do the same..but I'm unable to load the three.gltf loader file. I'm keep getting the error I hope u solve my issue...just want to try ur exciting project so plz help buddy