DEV Community

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




Discussion (54)

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

Wow! Great job!
Really fun to play

Collapse
0shuvo0 profile image
Shuvo Author

Glad you liked it.

Collapse
khuljohn_dev profile image
khuliso john thavhiwa

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

Collapse
hardikchopra242 profile image
Hardik Chopra

Really cool ๐Ÿ”ฅ

Collapse
0shuvo0 profile image
Shuvo Author

I am glad you fould it nice!!!

Collapse
tanishqsinghanand profile image
Tanishq Singh Anand

Coool

Collapse
0shuvo0 profile image
Shuvo Author

Glad you liked it.

Collapse
vetras profile image
vetras

What is that doing the code completion on vs-code?
I don't see anyone asking and this is epic. I want that auto complete too!

Collapse
0shuvo0 profile image
Shuvo Author

That is Co-pilot
copilot.github.com/

Collapse
adarshchakraborty profile image
Adarsh Chakraborty

Absolute gaawd.

Collapse
abufattah profile image
Abu Fattah

good work bhai

Collapse
0shuvo0 profile image
Shuvo Author

Many many thanks to you ๐Ÿ˜‡

Collapse
charlenestrain profile image
Charlene Strain

This is awesome, thanks for sharing!

Collapse
0shuvo0 profile image
Shuvo Author

Glad you liked it

Collapse
vsanse profile image
Vishal Sanserwal

Lit ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

Collapse
0shuvo0 profile image
Shuvo Author

Many many thanks

Collapse
vikkrantxx7 profile image
Vikrant Sharma

Nice.

Collapse
0shuvo0 profile image
Shuvo Author

Thank you

Collapse
kiransbaliga profile image
Kiran S Baliga

Hey that's so cool!

Collapse
0shuvo0 profile image
Shuvo Author

Many Thanks

Collapse
brendamichellle profile image
Brenda Michelle

This is awesome!

Collapse
0shuvo0 profile image
Shuvo Author

Many thanks ๐Ÿ’“

Collapse
smane2000 profile image
Srushti

Really awesome project๐Ÿ˜..great work๐Ÿ˜Š

Collapse
0shuvo0 profile image
Shuvo Author

Many many thanks โค

Collapse
ashleyjsheridan profile image
Ashley Sheridan

Slightly click-bait title. You made the red light/green light game, not squid game, that's something very differnt: en.wikipedia.org/wiki/Squid_(game)