How To Create Your First Game - JavaScript

The chrome dinosaur game is a pretty cool easter egg, but it is also a pretty easy first game dev project. In this video I show you the basics of how to get started with game dev in JavaScript as well as a bunch of tips to handle more advanced game dev concepts.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/c...
JavaScript Modules Video: • JavaScript ES6 Modules
JavaScript Modules Article: blog.webdevsimplified.com/202...
JavaScript Data Attributes Article: blog.webdevsimplified.com/201...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:30 - HTML
02:35 - CSS
08:00 - World Scaling
12:04 - Update Loop
16:10 - Ground JS
24:50 - Start/Stop Game Logic
29:15 - Dino JS
40:38 - Cactus JS
48:23 - Game Lose Logic
#GameDev #WDS #JavaScript

[@Sockerrus]

The if-statement in your update function helped me solve an issue I've been stuck on for sooo long! Thank you!

[@jamiyana4969]

The way you program and the way you explain things is just PERFECT. Honestly, you are the only reason that I'm trying to learn to code at 3am. I'm trying to finish all the beginner projects before the next semester 😅. Thank you so much for making these wonderful tutorials ❤️

[@ASTERisk44946]

4am here bro ikr

[@wiktoraugustyniak5965]

another great vid bro, i get solid fondamentals in CSS and HTML and im study JS atm and all these projects will help me build good portfolio with projects and understand JS in mor pleasure way, keep it going!

[@melvinnuslahdtuah269]

You are exceptional brother... Please keep doing and sharing more ideas like this for people like me who's just getting into programming... ❤️❤️

[@makamaka487]

I was literally just wondering earlier today how to make a JavaScript game. Thanks for reading my mind Kyle haha

[@pythonandroidappdev3040]

HI

[@quickcodingtuts]

Awesome. Now I can play this game even if I’m offline …wait

[@IshanKesharwani]

That escalated quickly 🤣🤣

[@rightbackatcha22]

I had fun doing this! thank you! some concepts are still very advanced to me making it impossible to grasp, but i guess it's good that I'm getting used to write the code.

[@Android-17]

Thank you so much Kyle! Really appreciate your contents.

[@agustinguerra1575]

bro this is amazing! you deserve all the good

[@CallousCoder]

I love his code style! Very few youngsters develop this cleanly. With nice small single purpose functions. He avoids if else (I hate that so much!) this is a guy you want to make your frontend. For sure!

[@Starkiller2725]

The best tutor on YT as always goes to you!

[@almogattal9701]

I love your videos and this channel. Please post more small games development in JavaScript

[@GsusIsKing]

The code appears to no longer work unfortunately. Both my code checked over multiple times, as well as cloning the exact solution code straight from the GitHub repository linked in the description, both bring up a blank white screen upon opening a webpage. I have tried both Chrome as well as Edge and neither seem to work.

[@Satishkumar-rx7oy]

very nice sir, I learned some concepts which was thinking to learn from past. Thanks

[@aaxen7255]

I've been doing your tutorials and they are excellent, the best out there for JS and CSS imho. But dayyum you were going fast on this one :)

[@silver5866]

Yeah pretty fast. I’m restarting it so I can watch it at 0.75x speed. Lol This was SUPER helpful, love the video!

[@anondolphin71]

Hi Kyle, I'm an amateur self-taught developer (front end) and I've had countless breakdowns in my journey but your explanations make me feel a lot less stupid and give me more confidence to keep going :) thank you so much ! ❤️ I still remember the first video I ever watched was on memoization and I've never hit the subscribe button faster

[@gunjanbhanarkar3291]

Soooo awesome, salute to your work buddy

[@TheFamilysam]

I made sure to watch the video first this time before attempting it myself. Hopefully I can keep up more this time around, thanks for the info, alot to digest but is definitely helpful. edit:It did not...

[@mountaintraveller3764]

Very helpful video bro Love from India❤

[@CrazyCodingChannel]

Really interesting video, like man

[@AS-me8zt]

Honest Opinion as someone with little coding experience, there was parts where it felt very fast and was hard to keep up, take your time, there is a few errors not to any fault of him, DOUBLE CHECK!!! your values especially if you are using this more as a template for different variables and images but same concept as I did, I got stuck a couple times but the best thing was just walking myself back through the process and how it works, I feel satisfied in running into these roadblocks unintentionally because they allowed me to way better understand the code I was learning and how to develop a dubgging mindset, I wholeheartedly recommend developing this game with your favorite animal and a free template, it works!!! there is some comments that talk about issues but they are easily fixable as long as you revise and double check.

[@AS-me8zt]

Also Inspect is your best friend!!!

[@moonyu189]

omg I'm just start learning js, thks your vid very much

[@melzz]

I learn a lot of new thing in JavaScript 👍

[@ow5909]

Great content as always! Thanks! Btw do you have any plans of possibly publishing on something with Next.js?

[@TR1ckY_TV]

Hype Hype Hype 🎶 more of these pls 🤩 and btw . . . . . . . you dropped this 👑 king 😉

[@veeteeplays8742]

I wish I could just take all your coding experience and knowledge and install it in my brain 😭

[@tommyo2172]

you can actually do that. His whole youtube channel is basically his brain knowledge. So if you understand all of his videos then you probably have similar knowledge

[@sennaevil]

@@tommyo2172 Not exactly. There's muscle memory and things of that nature but he can definitely become better.

[@alisafaa140]

npm i expirence

[@lestath2345]

pip3 install programming-knowledge

[@BlackPowder-Michal]

Hi, great and complicated project (for me). I'm at the and of the ground section and ground moving is not working like in your video. Both ground png are moving at the same position so parto of time there is ground and part ot time there is no ground. I found and solve the problem. This variable: const groundElements = document.querySelectorAll("[data-ground]") gives NodeList instead of Array so the solve is : const groundElems = document.querySelectorAll('[data-ground]'); const groundElements =[...groundElems]

[@thehangman1517]

Shit brother, you make this look easy! :D Great share! Thanks a lot! I really learned alot here

[@CallousCoder]

I made this in assembly on the C64 last year. As a round up for my C64 assembly course. But I still need to film the explanation. I don’t code that live in assembly 😂 I made the ground random based on a charset. But this works too.

[@aaaliii4u]

Thank you for the such a great tutorial, but I have a question: do we really need return in the if statement of update function?

[@antonarbus]

even it looks easy under Kyle's hands, that's the most difficult thing i have seen so far!

[@user-eu9rf4nt9c]

Nice job 👍❤️❤️

[@rrbossman]

I've been using JS from the beginning. I watch you videos, not to learn programming, but to watch your teaching. You do a great job! I want to say that you should make sure to use triple =... the 'let' statement == null works, but real world you would get called out. It should be === undefined. Keep up the work

[@kappidrums]

That's not exactly true since using two "=" will allow you to check for both undefined and null without having the problem of zeros or empty string breaking your conditions

[@shivarapolu3180]

If possible please make a video on what keyboard shortcuts/techniques you use repeatedly because I often notice that you are waayy faster

[@RDdggrd]

Hi , Few short cuts for VS code : .classname [TAB] for h2.classname TAB for #id_name TAB for p#id_name TAB for img TAB for

[@howardcrosales4523]

hey bro what about mobile because i doing it on my android phone any tips?? thnks also i dont have other devices only phone

[@koo4838]

it's a good video, thx bro

[@bhumikdhandhukia4471]

For the world scaling part What is the difference between using postion : absolute margin: auto and your part ? It gives pretty good results

[@masternobody1896]

Thanks

[@hamsithacs4091]

hey kyle i saw your whatsapp clone video you mostly use functional component , so do you think functional component is better?

[@asrafulislam5034]

Take Love From #Bangladesh

[@alibinnaseer]

Completed It 🎉🎉

[@babicunlo3638]

took multiple notes, thanks. why check collision with all the cacti though? you can only collide with the left-most one (or two, worst-case scenario)

[@CarlitoProductions]

I was just wondering, why was direct DOM manipulation for the game chosen over using canvas api? I notice a lot of JS games use canvas, and curious about this approach.

[@dawitdemissie4611]

Genius!!

[@alice13eth]

That was fun 🥰

[@tobi807]

I was just wondering: Did you do the game rescaling with js only on purpose? Because you could do the exact same thing with css only, right?

[@mythm2063]

that triggered me as well

[@s.k.609]

yeah it was unnecessary

[@nyonjeezeogar5374]

Kyle the 🐐

[@badtwin82]

Please do me a favour for fonts: if you don't want to include any external source, at least use something like 'font: 1rem/1.2 system-ui' pro-tip: for things like align-itens: center; or justify-content: center; use aic/jcc => tab ;) and if you weren't aware of it: for setting a default value for a custom property, use something like var(--my-property, 1em)

[@ErikBlomqvistSwe]

What do you mean with the 'tab' part?

[@badtwin82]

@@ErikBlomqvistSwe Write a CSS definition in VSCode and try it out ;)

[@RDdggrd]

@@ErikBlomqvistSwe Hi, it is a short cut in VS code. Type aic and then press Tab : vs code will add align-items: center; automatically.

[@badtwin82]

@@RDdggrd thank you for the explanation, seems it helped other people to understand my answer better as well. @Erik Blomqvist sorry for the confusion

[@RDdggrd]

@@badtwin82 😊

[@brownboyintokyo7368]

I get what he is explaining but I do not possess the level and thinking process in order to building something like this efficiently! I have always found game logic confusing. Any suggestions for how to improve the thinking process and be able to make small games like this?

[@musingepitaphy]

sorry, no advice. Just want to emphasize that sometimes he was taking a look toward another screen.

[@shawnlee5956]

15:56 what cpu you using? im using i7 8565u get 16.6 avg... vs yours 6.9 avg feeling your cpu is must stronger than mine 2x

[@WebDevSimplified]

It is my monitor. I have a 144hz monitor. My Cpu is actually 2 years older than yours as I have an i7 6700k

[@BhumikaRaut-xm2ud]

what to do if we want to redirect it to the game overpage or show pop up

[@kishoreramesh8110]

🔥🔥🔥

[@jacksonmain1743]

Hi there, I was wondering if you could help me with some trouble I'm having with the ground code. No matter what I try, I can't get the ground to move. Is there anyway to fix this issue?

[@chrisdragoi2547]

Hey! Did you find a solution ? I have the exact same problem here…

[@sinnastyx]

im working through this tutorial now and am having the same problem. did you find a solution?

[@shwackthenoobsac]

In this game can't we omit the fourth requirement for overlap? When would the dino ever be underneath the cactus?

[@RyanKane]

If you add a duck command and pterodactyls.

[@rishabsharma5307]

Make a video on complex database modelling in MongoDB like one-one, many-one, many-many

[@josephwong2832]

awesome

[@raccoonchannelvn9863]

Cool😎

[@abdorizak]

Why u didn't but the score center of page ?

[@danielraducu9073]

You are a god among mortal men !

[@danny4541]

Hm.. Around @20:00 my code does not work anymore when the ground should start to move. I checked back and forth but it's no use. I can't find the problem 🤷‍♂️It's not even working if I copy all the code 😂However, was nice to learn at least sth.

[@chrisdragoi2547]

Hey, did you find a solution ?

[@ranaalfayz1431]

@@chrisdragoi2547 sammmmee what did you do to make it work

[@Vrum89]

Why I can't to change the source file with "document.querySelectorAll('[data-dino]')" but I can (setting an a 'id' into tag) with "document.getElementById('imageid);" ? EDIT: NeverMind. I used QuerySelectorAll (to retrieve a List) and not QuerySelector (like in your tutorial 😅) BTW: Excellent Tutorial!!!! Thanks a lot!

[@hemat297]

Some one please send me link or separate images are used in this project

[@rahulpothula1902]

Does these projects increase the value of our resume'??

[@ervanaz4850]

How to add a code that writes ..blabla to the screen right after you lose the game every time?

[@vinoth6255]

One my office crush asking this, If you are too good at front end do this dinosaur jump game on your own.

[@nahual69]

How long did it take you to actually code this game?

[@jboyle453519]

im on like hour 10 lol

[@wadihrizk]

I believe that some people were born smarter than others.

[@foochertyi3714]

How to fix CORS Errors in Javascript????? it keeps showing blocked by CORS policy

[@three-two-onesas]

He has a video on that

[@rashmigajananvernekar4692]

What are the steps for publishing these games?

[@jcoucelanga4373]

we need rpg upgrades and stuff :D

[@wamanimemaster2330]

please learn how to make 3d model with vertex array etc... without using any library or framework (three.js, etc...) or at least tell me is it possible and if not how three.js show 3d? 🙏🙏🙏🙏🙏🙏

[@jajarobert6244]

Why is this game not running in mobilephone despite changing event listener to touchstart

[@three-two-onesas]

Because he didn’t implement that

[@luanfigueiredo6156]

hi , i dont understand wtat this " *:: before , *::after" mean, somebody can explain?

[@BorisScotch]

the * (star) means every element and the ::before and ::after refer to pseudoelements, very useful to set the box-sizing to border box on * (all the elements), all before pseudoelements and all after pseudoelements in every project (when you select all elements with the * pseudoelements are not included). In this particular case he is not using any after or before pseudoelements, but is a good practice nevertheless

[@aliimranadil2]

How to start the game on mobile

[@aaronparker8141]

TimeStamp 29:52

[@SteveosCPU]

Hi Kyle. I like your videos but "Web Dev Simplified "? I could write that game in a page of code albeit long lines of code. Why did you make it soooo complicated?

[@EmperorBob]

"page of code"?

[@optional.]

You teach everything clearly but I hate my sleepy brain

[@inopsek]

People use canvas for gaming.

[@MrJulito88]

Top

[@s.k.609]

hey dude, This code is not working

[@three-two-onesas]

Not exactly. There is an end screen if you stay in the game too long

[@aidanbenbow6682]

At the beginning of the project, couldn't you just use a bootstrap container to achieve the desired scaling effect?

[@tristanwait4itlegendary]

is it also Touch

[@three-two-onesas]

No

[@three-two-onesas]

Not exact. There is an end screen and clouds and sound effects.

[@johannes1498]

Just the update loop part could be already 50 minutes long, it doesn't make any sense in such a short time of explaining it

[@bavongpaavong4998]

I wantt those dino pic

[@yuvansreesrigiri6135]

I put the video in 2x playback speed to learn it twice as fast I am SPEED!!!

[@ifecojahs8151]

I love your tutorials but this is so complicated

[@three-two-onesas]

43:09

[@satyasai69]

How to play in mobile

[@three-two-onesas]

You cant

[@user-ko2yo3zx8h]

your audio has an issue

[@pythonandroidappdev3040]

HI

[@bradleyjoseph6678]

My Dino won’t jump

[@itswilliboy7054]

hi

[@dagoshuaaaaaaaart]

Off

[@yashvantvala519]

first

[@7aidas7]

Didn't learn anything. Too much code for simple game. Even after repeating code and game working.

[@talhazaryab]

Awesome. Now I can play this game even if I’m offline .... wait

[@melodyparker3485]

Copy

[@jeanrodrigues6249]

Floppy

[@malharsardeshmukh4057]

You make all the projects too complex.Please try to use simple javascript syntax which would be understood for us

[@malemyengkhom56]

Same here bro!! This video is really overwhelming 🥲

[@three-two-onesas]

Guys just learn JavaScript

[@three-two-onesas]

Not with khan academy though

[@kaiumali9738]

Your pronunciation not clear. Speak slowly