DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for I made Squid Game with JavaScript
Shuvo
Shuvo

Posted on

I made Squid Game with JavaScript

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

}
Enter fullscreen mode Exit fullscreen mode

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;
        })
Enter fullscreen mode Exit fullscreen mode

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()
    }
}
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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
    }
}
Enter fullscreen mode Exit fullscreen mode

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()
    }
})
Enter fullscreen mode Exit fullscreen mode

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.

0shuvo0 image




Top comments (55)

Collapse
 
ebrahiemgamalmohamed profile image
Ebrahiem Gamal Mohammed • Edited on

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.

Collapse
 
0shuvo0 profile image
Shuvo Author

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

Collapse
 
chrschroers profile image
chrSchroers • Edited on

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

Thread Thread
 
0shuvo0 profile image
Shuvo Author

Alright got it Thanks

Collapse
 
smane2000 profile image
Srushti

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

Collapse
 
kaiquegarcia profile image
Kaique Garcia

it's cool, but it's not Firefox friendly :/ (the keyword 'w' open the search box) (I think any letter will open it...)

but still cool

Collapse
 
0shuvo0 profile image
Shuvo Author

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

Collapse
 
kaiquegarcia profile image
Kaique Garcia

Hehehe, I think you can solve this by creating some keypress event to prevent the default behavior. Try it!

Thread Thread
 
0shuvo0 profile image
Shuvo Author

Okay Thanks again

Collapse
 
akrambzgh profile image
Akram Bouzoualegh

your game is brock.........bruh

Collapse
 
0shuvo0 profile image
Shuvo Author

Many thanks ๐Ÿ’“

Collapse
 
akrambzgh profile image
Akram Bouzoualegh

welcome!!! <3 <3 <3 (: (: (:

Collapse
 
menomanabdulla profile image
menomanabdulla

Cool one

Collapse
 
0shuvo0 profile image
Shuvo Author

Many Thanks

Collapse
 
colortools profile image
Color Tools ๐ŸŒˆ

Wow, amazing. Cong โœŒ๐Ÿพ

Collapse
 
0shuvo0 profile image
Shuvo Author

Many many thanks

Collapse
 
bmaniar profile image
Bhargav Maniar

Wow! Great job!

Collapse
 
0shuvo0 profile image
Shuvo Author

Thanks, glad you liked it

Collapse
 
sheikhprotik profile image
improtik

interesting

Collapse
 
0shuvo0 profile image
Shuvo Author

๐Ÿ˜Š

Collapse
 
ryan_jr profile image
JRRyan606

this is just unbelievable!!, amazing..... keep up the good work!!

Collapse
 
0shuvo0 profile image
Shuvo Author

Many many thanks for your motivation

Collapse
 
manuthecoder profile image
Manu

Wow! Great job!
Really fun to play

Collapse
 
0shuvo0 profile image
Shuvo Author

Glad you liked it.

Collapse
 
khulyso12 profile image
khulyso-Devยฎ๐Ÿ‡ฟ๐Ÿ‡ฆ

nice one buddy

Collapse
 
0shuvo0 profile image
Shuvo Author

Many Thanks

Collapse
 
snehal_02 profile image
Snehal Adbol

Cool ๐Ÿ”ฅ

Collapse
 
0shuvo0 profile image
Shuvo Author

Thanks for your interest

Collapse
 
trung_2901 profile image
Hoquoctrung

๐Ÿ˜ฒ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

Collapse
 
0shuvo0 profile image
Shuvo Author

โค๐Ÿงก๐Ÿ’›๐Ÿ’š

Collapse
 
franckgoth profile image
Franck

Nice one :)

Collapse
 
iahk151020 profile image
iahk151020

so cool :3

Collapse
 
0shuvo0 profile image
Shuvo Author

I'm glad that you liked it

Classic DEV Post from 2020:

js visualized

๐Ÿš€โš™๏ธ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! ๐Ÿฅณ

Happy coding!