6 Months of Learning JavaScript Game Dev in 6 Minutes

In this video, we go over my 6-month journey of learning game development in JavaScript. Initially, I talk about why I decided to learn game development in the first place. Then, we dive into my reasoning for choosing Three.js over a game engine like Unity or Unreal. Finally, we take a look at the 10 game dev experiments I made in this 6 month period.
🐦 Twitter - / suboptimaleng
💻 GitHub - github.com/SuboptimalEng
🌎 Website - suboptimaleng.com
== [ Timestamps ] ==
00:00 Why Learn Game Dev?
00:43 Three.js vs Unity Game Engine
01:37 Solar System Demo
01:54 Tic-Tac-Toe Game
02:16 3D Tic-Tac-Toe Cube
02:37 3D Audio Waveform Visualizer
03:13 Naruto’s Rasengan
03:30 3D Piano
03:55 3D Wordle Clone
04:16 Rubik’s Cube
05:02 Retro Snake 3D
05:40 Frantic Architect Clone
== [ Credits ] ==
Simon Dev - / iced_coffee_dev
Caterina Zamai - www.artstation.com/zaccate
Hand Anatomy by Caterina Zamai - sketchfab.com/3d-models/hand-...
James Harness - sketchfab.com/James.Harness
CRT Monitor by James Harness - sketchfab.com/3d-models/crt-m...
Will Kwan - / _willkwan
Frantic Architect - github.com/wkwan/frantic-arch...
== [ Resources ] ==
Three.js - threejs.org
Three.js Tutorials - sbcode.net/threejs
Cannon.js - github.com/pmndrs/cannon-es
== [ Tags ] ==
#suboptimal #javascript #gamedev

[@andrestellez3229]

Beautiful man, you're the only one who could help me, I watched 8 videos and yours was the only one that saved me

[@Total_Studios_Games]

Your video was very helpful, I'm still learning and getting the hang of it still. I'm into House and EDM. I look forward to seeing more of your

[@moatazemad1854]

BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!This is cool, well done!

[@plasticsamalt6633]

As someone who just started my 3D programming journey, learning JS (and code in general), this video is inspiring as hell! Subscribed

[@SuboptimalEng]

Awesome to see more people starting to learn 3D coding in JavaScript 🙌

[@plasticsamalt6633]

​@@SuboptimalEng I would love some tips, because basically threejs is my goal here, and I just started learning JS.

[@SuboptimalEng]

@@plasticsamalt6633 If you just started learning JS, then I'd recommend making 2D games in HTML canvas. It's a lot easier to get started there. Once you understand the fundmentals, you can start picking up frameworks like Three JS.

[@plasticsamalt6633]

@@SuboptimalEng noted. Thanks!

[@juanmacias5922]

Cool journey, thanks for sharing!

[@arsen3223]

this is really cool man, makes me want to learn this as well!

[@SuboptimalEng]

You can do a lot with JS game dev! Definitely worth trying out 👀

[@mainichiippo]

These are great! Makes me excited to learn threeJS

[@nirajsolanki8773]

So informative, thanks a lot!

[@RajJaiswal538]

I feel the Rubik's cube is hardest among them in terms of logic And also has a lot of potential of some unintentional amazing bugs : P

[@SuboptimalEng]

Agreed. Sometimes, the bug is better than the code

[@andybrice2711]

Rubik's cube logic is probably quite simple if you understand Abstract Algebra and Group Theory. (Which I don't.)

[@RajJaiswal538]

@@andybrice2711 neither do I tho So we're on the same page

[@yahyamn6692]

Excellent video. Clearly explained all the basics to get started on soft soft. Thanks

[@SuboptimalEng]

Thanks Yahya!

[@airelav]

Hello! I just wanna say thank you for the video it did really gave me a perspective in game dev in JavaScript as I'm starting and only doing it as a hobby, but I would really like to pursue some projects of my own so this is great inspiration 👍🏼

[@SuboptimalEng]

Thanks, Valeria! A couple months ago, I was also not sure about making games in JavaScript. But now, I think it is the best decision I made 🙌

[@airelav]

@@SuboptimalEng Yeah! This video really helped me, from now own I'm gonna give priority to game dev cause is supper interesting but also so very challenging for me

[@tusyama5157]

Fantastic stuff, man!

[@qarihassanhameed]

wow. thank you for the amazing video

[@user-zo7up5yw6e]

Thank you very much , now I will understand the functionality

[@mahedulhasan5515]

well understood. Thank you you are the best teacher.

[@HassanHassan-hl6tv]

Your actually the goat, This helped so much thank you.

[@AOP2912]

Really nice and helpful... Thanks!

[@TheUnkow]

That "failed" cube is mesmerising. Thanks for sharing this video. Hope you will have success upon your path.

[@SuboptimalEng]

Thanks a bunch!

[@mattcardoso1503]

Awesome, man! One day I intend to dig into game development as well, just for the fun

[@SuboptimalEng]

Definitely, it's super fun to get hooked on a piece of software you wrote. Doesn't happen often to me in web development, but happens quite frequently when I make games.

[@mattcardoso1503]

@@SuboptimalEng That's exactly how I feel, man. It's wonderful that you got to discover that feeling! And thanks for the incentive given in this video... I have much to learn from you. Stay awesome. ‍🔥👊

[@mustycom-tech5463]

Best soft soft Introduction Ever!!

[@staticdopekilm621]

Thanks bro that was really helpful

[@karimaskarimas553]

Worked for me thank you!

[@adnancodesweb]

I feel your struggle man.. love your videos as well.

[@SuboptimalEng]

The struggle of coding games in JavaScript is real, but it's worth it! Keep pushing through 💪

[@joonaal1567]

Dude. Thank you so much.

[@nabinbhattrai1506]

thanks so much man

[@sarathps1666]

This is really cool, Just started myself

[@curiez]

Thank you. super program!

[@nikos_theonas_official]

i really apreciate your help with dowloanding this software

[@coindivision388]

Gained a sub on this one, good shit man!

[@Belive_s]

Works, thank you boy

[@BMmovies829]

Worked, thx

[@roldanacebo8835]

merci beaucoup a toi :))

[@ohgaabkkkkj]

Really helpfull tutorials. Helped a lot

[@jasonponce7415]

Yoo tnx dude, everytNice tutorialng works. I LIKE IT

[@musicbox2675]

by any ans, but I can make what I envision, and that's the greatest gift to . You are, without a doubt, an expert teacher. You may

[@chekaroxas9262]

I tried and it is installed thank u very much anda

[@vlone.666]

have. But, your tutorial was amazing and I have made a semi-decent soft. Thanks!

[@lyricsbyfio1708]

working fine thank you

[@gamer_minecraft_yt2163]

BROOO THANK YOU!!!!!!!!!!!!!!!!! YOU'R THE BEST!!!!!! I LEARNED EVERYTNice tutorialNG I NEEDED TO KNOW THAN YOU VERY

[@darisamran801]

Oh it's really works) god bless you

[@gourobsaha8130]

Its working man!!

[@clivekingco1865]

TNice tutorials was very helpful thankyou.

[@256k_]

the broken cube was fantastic. hope you kept it

[@shriyanshjoshi5368]

ITS REALLY WORKED LOL THANK YOU DUDE

[@abraarz2971]

Very cool!

[@abdelrahman5094]

such a fantastic video reccomendation

[@SuboptimalEng]

Looks like praying to the KZbin algorithm every day is finally working 🙌

[@drsensor]

Proper cache control and lazy loading is really hard to achieve in engine that doesn't target web browser as it's first priority. Though streaming 3D model is still challenging in any engine or rendering-lib

[@alteredsensations8273]

YO YOUUURRRR ART IT BEAUTIFUL

[@coolsai]

cool!

[@utsavfilmwala]

thanks helpful vid

[@sarnarider9872]

utilised and enjoyed wNice tutoriallst increasing in value.

[@johnclarkmabutin7944]

TNice tutorials is much more simple than I thought with you explaining it. Currently half way through and I feel like I know everytNice tutorialng already lmao

[@Ivan-dt9mc]

nice video man

[@kool-breez]

That Rubik's cube would make an awesome loading 'spinner'. Side note: I think some of the stuff you covered in the three.js tutorial (planets rotation), could help finish that rasengan model :)

[@SuboptimalEng]

I think the rasengan requires more glsl shader skills 😅

[@kool141]

@@SuboptimalEng You’ll get it, your first attempt was really good :D

[@alkhemist6631]

I'm here struggling with logic. This is great. Kudos to you

[@SuboptimalEng]

Thanks, I'm sure you'll figure it out 🤓

[@mingxindong3150]

Incredible I will be glad if I can finish one small project in 3 months

[@SuboptimalEng]

I always set a deadline and try to get something working. It doesn't have to be perfect the first time!

[@facundoalvarez8245]

thank u

[@callme_nagi]

Good choice!

[@always_swagin]

when you’re in the channel rack, click on gms to open up the gms nu, in the light blue screen on the top left look where it says

[@TomServo-tg2tj]

i love the aesthetic of making things 3d for no practical reasoning but with cool lighting

[@SuboptimalEng]

Lighting is everything 💡

[@User-qwtruaia719]

GR8 IDEA TYTY

[@itzdragondreamxdgg4157]

Couldn't agree more!

[@MHW-nu7pz]

Nice video! I really love what you built! I will be going to start to learn the threejs. Is it that I have to be good at math before starting it?

[@SuboptimalEng]

That’s great to hear! You don’t need much math unless you want to become a shader magician.

[@MHW-nu7pz]

@SuboptimalEng Really? Only the shader requires advanced math?

[@SuboptimalEng]

Depends on how complex your applications are. Most of the games I made in this video do not use math beyond trigonometry. The last game uses physics, but I imported a library to help with that.

[@Skylla54]

I love your stuff

[@SuboptimalEng]

Always good to see more game devs out there! Can’t wait till “Metaverse engineer” becomes a job role 👏

[@Skylla54]

@@SuboptimalEng Google&Apple&co will block such job description, definitly XD As long there is no offical description. I keep calling myself 🐻-Dev (b3AR Dev alias Web3AR Dev alias Fullstack Web3 AR Blockchain/SmartContract Developer alias 🐻-Dev 😄🤷‍♀)

[@SuboptimalEng]

@@Skylla54 can't believe it's come to something this complicated 😂

[@luisabertoestevez5145]

Nice tutorial. I have been having content issues with my hmdi connected speaker and subwoofer. No soft is coming through, still coming out of

[@cineural]

The Rubik cube glitch would be a really cool loading screen

[@SuboptimalEng]

Or a retro windows screensaver

[@henryzhang6512]

just discovered your channel. love your content! (more than simondev 😉)

[@SuboptimalEng]

That's high praise - Simon's videos are super cool - thanks a bunch!

[@sarveshsakpal8241]

super

[@hssageni9893]

actually I'm a web developer and when I woke up this this morning why not making games then i came across this vd it was really beneficial for me and now I'm gonna start my journey in game dev with three.js and I loved the piano you made it's gonna be my first project since I really love music and most of piano games are payed or not that responsive so I'll make it for all the guys that really want to learn playing the piano and the financial support is what stopping them inchaalah when I'm done I'll put an update in this comment hope me luck

[@raihankarimpriyo2004]

Perfect tutorial, I just bought it and tNice tutorials helps heaps

[@astitvastudios]

Damn. Nice job. I realy couldn't find a proper tutorial explaining everytNice tutorialng you needed clearly but then i found tNice tutorials treasure of a video.

[@veryupstandinguy]

Hey man awesome work was just wondering if all of this was in a website instead of a program I really want to learn Javastrip as well but I want to program a program basically and i dont want it to be in a web browser

[@myporpor1184]

Next ti, can you install one of those apps that creates a circle around your mouse pointer? Sotis it’s hard for to find where

[@stickguy9109]

Nice video but there's one thing I should point out. If you know any programming language like Js for example unity is not hard. I say go for it, if you wanna get serious with gamedev a library is not an artistic tool

[@SuboptimalEng]

Unity is not hard, but running it on my computer with Chrome and VS Code is impossible 😂

[@stickguy9109]

@@SuboptimalEng Oh I understand. Well then there's no choice but to make your own web based game engine

[@GalaxyTime5416]

@@stickguy9109 im working on one

[@KennyFully]

Unity isn’t hard to use but at the same time I’m not trying to give people a portion of my money!

[@10inall28]

@@GalaxyTime5416 wat is it

[@sujitkumarsingh3200]

4:23 that is not a bug, that is feature 😁. A nice one.

[@samdavepollard]

very cool you should write a book (seriously) subbed

[@SuboptimalEng]

Thanks Sam! I think I’d need to learn quite a bit more before writing a book.

[@quantumempire5647]

Rétro snake looks awesome!

[@SuboptimalEng]

Thanks Quantum, it's probably my favorite one as well!

[@DevlogBill]

I think you should make the Rubik cube broken. Looked really cool

[@SuboptimalEng]

Agreed

[@nimrodargallon9100]

all the different elents together in a language that is universal. I've seen plenty of DAW tutorials being new, but tNice tutorials is by far the best so

[@nosebleed4304]

Thank you for taking the ti to do tNice tutorials i know I’m gonna enjoy figuring it out

[@gianpaulemersondj6275]

works gj

[@breh2716]

Bruh i feel like you have superpowers making super complicated things left and right likw it's nothing, i hope to be like you someday.

[@SuboptimalEng]

Appreciate the compliment! Though I still have a long way to go before I feel like I have superpowers 😅

[@breh2716]

@@SuboptimalEng 4 years of experience IS super powers in itself lol

[@WolfgangRechberger86]

Nice work. Have you tried playcanvas as well? Keep up the great work!

[@SuboptimalEng]

Thanks! Unfortunately haven’t tried playcanvas yet.

[@mahesh4274]

Very cool anna

[@SuboptimalEng]

Thanks Mahesh!

[@DevlogBill]

Hi suboptimal Engineer, I am back, and I am still learning to code, but I am having fun doing so. I would have never imagined but picking up React and learning how to write in this library with useState and useEffect has improved my skills in writing functions, I use to suck badly. I would have never guessed by me learning React this would be the case. Now, I would like to improve my skills in classes, and I figured can you improve your skills in JavaScript and classes and objects by making games? I was wondering by you creating games has this improved your skills in JavaScript and if so, how? Thanks for sharing your video, it inspires me.

[@thompsonevergreen8006]

"will learning JavaScript by making projects improve my abilities in JavaScript?" Yeah

[@divyanshprakash7356]

In The setup If the master channel is located in the top, next to the counter, then no - IT stays witNice tutorialn acceptable limits, when I play so of

[@TheFlopster]

That was one of the most beautiful bugs I have seen in my life

[@SuboptimalEng]

It’s not a bug, it’s a feature 😉

[@legendrags]

imagine if he released the buggy cube as a rage game

[@lidestudios5094]

The rubiks cube bug reminds me of another bug I got in my Matlab class when I accidentally coded perfect 3D rotation on a 2D graph due to some error in my math formula lol Can't help but appreciate these bugs

[@SuboptimalEng]

Have to agree here. Often times the bugs give more interesting visualizations than the fixes.

[@rahulsinghbisht3796]

now i am in a good mood

[@adflyadfly4137]

From any js library can we create any game like tycoon used cars game? Like car moves in (3d object), follow route, park in given slot etc??

[@SuboptimalEng]

You can make small fun games in JS, but if it is super complex then it might be better to go with Unity or Unreal.

[@the2ndlanguage4me52]

Pertama nyoba instal di MacOS Monterey error, udah gitu di Bantu sama mimin, ternyata harus pake yang 2021 , daaan tadi nyoba, Sudah berhasil! Terima kasih Sudah membantu sampe berhasil instal 🙏

[@nariharicreations]

I bought soft soft today!

[@skulllive7368]

how do you get all the tutorial and samples on the left. mine doesnt have sNice tutorialt

[@rewiredbyadhd]

Dude, I already subscribed but if you make educational videos with all those projects and things you learned, I'll pay you without hesitation.

[@SuboptimalEng]

I’ve made a video for each project already! You can find them on my channel if you go scroll all the way down before my Three.js tutorials. Currently learning WebGPU with TypeScript so might do some videos on that next 🤓

[@sonhoang2392]

my laptop speakers. Any suggestions on what to do to get my soft back? I recently updated. Any help would be greatly appreciated.

[@eotstv9197]

In The setup what soft is that the little one

[@mulualemtekle6094]

hang in there bro, we're all in this together, =)

[@SuboptimalEng]

word

[@mulualemtekle6094]

@@SuboptimalEng also subscribing, notifications on, gonna be liking all of your videos too, I appreciate what you're doing

[@SuboptimalEng]

@@mulualemtekle6094 Appreciate the support! Building games in JS ain't easy, but someone's gotta do it 😅

[@oatcookies_]

i was at the 8 minutes mark then i got engrossed in the potential masterpiece i could make and started dancing and bobbinb my head

[@DOUBLEM]

The best but I need more ti to make 100% best soft hehehehe thanks for the video bro.