Making a Game in JavaScript with No Experience

JavaScript it's probably one of the most popular programming languages on the web right now what originally started out as a way to save time and bandwidth to validate web forms now Powers the biggest time wasters I mean the greatest websites on the web sites like Facebook Netflix Uber and Facebook wait I just said that needless to say more than 98% of websites on the web use JavaScript but what's that have to do with making a game well recently I was working on a secret new website for my cute metroidvania d drop Dynasty which you can wish list on Steam and this got me thinking how hard is it to make a game in JavaScript so that's what we're going to do so I started off by looking for an easy JavaScript framework for me to use I saw some things like phaser and babylonjs but nah this is a little too common place for me I wanted to use something a little bit more obscure and that's when I found k. JS when I heard the earthband music in this shooter demo and after seeing this weird green bean guy burping I knew I was sold so I installed Kaboom that JS and by install I mean I went to some random video I found the minifi JavaScript I slapped it in folder and then I ran vs code but honestly we're getting a little ahead of ourselves really what we should be focusing on is what we're making what is this game we're making in the first place and strangely enough I found a combination that is so powerful between game genre and theming that I don't think you're ready for Google dinosaur game meets capy baras so that's my theme so I hopped over into Affinity designer and started drafting out what a cppy bar design could look like now if you followed this channel for a while now you'll know that I love cute games and so it's a no-brainer that I've been wanting to make a cap game for a long time and making an endless Runner game just made sense because I don't know do Cy bars run a lot I'm sure they do any who I created this little capy bar he's he's so cute I love him I'm going to name him Harold and now we can jump back into Kaboom and try to do the most difficult thing any man has ever dreamed of and that's print hello world turns out it's incredibly easy after that I try to familiarize myself with Kaboom JS and check out their movement tutorial that way we can make this capibara free to walk around and it works now we're going to to make an endless Runner Style game we need to add gravity so we did but okay that's that's a that's a little weak the only thing weaker than that jump is the fact that I continue to get errors all through this process and at first I didn't know how to debug them until I realized you had to inspect the web page and it showed you the errors there so cool next it was time for us to make hazards because we wouldn't have a game without hazards and Herold needs something to jump over so I quickly made a script that just spawns in the objects and then once they go off the screen it just deletes them and then it spawns in more objects come on Harold you can make this J after that I did a double whammy and worked on the scoring system and a game over screen so you collect these points as time progresses and when you hit an object you go to a game over screen and it shows you your points they're really hard to see but trust me they're there they they they're there after this I played around with the spacing and the visual and the size of everything and the jump strength just so that it felt better Herold can finally jump over objects and it we actually have more of a playable game here I did jump back into affinity and created the rest of the hazards the background the floor and just making the game feel more cohesive my thought is that it's inside of like a house or a kitchen bathroom area I don't know and you got some oranges you got some you got a capar taking a bath you have another capy Bara and you have boxes of oranges I don't I don't know what was up with the oranges so I exported the files and put them in the game but you'll notice that we're just we're just only getting oranges and that's too much so I made sure to load in the rest of the Sprites and randomize which ones would spawn in so now we're actually starting to get a game after that I kind of adjusted the window size I changed the background color and I worked on these floors which I'm not going to talk about because they took forever to make and I'm a little embarrassed by it next I added these windows that have a slight parallx scrolling they work perfectly I love it and it was at this point I finally decided to work on the the final animations for the Cy baras I'm not going to lie I don't normally animate in my Vector style so it was a little weird but I'm pretty happy with the results oh yeah and for some reason I like was experimenting with increasing the speed as the game went on yeah I don't know this feels a little cursed for me now that the game play was mostly finished it was time to do all the fun polish in stuff like creating a menu so I jumped back into affinity for a third time and I started working on a title screen and due to the nature of this game I decided to call it Hoy bar also ignore this just just forget about this clip it was at this point I realized that you could actually just import fonts I thought I was going to have to slice the image and put it in but no turns out you can just import it so I did and I add it to the menu so whenever your score is saved it actually looks nice on the menu lastly I add some sound effects threw them in audacity and pour them into the game and it was actually incredibly easy to do I found this amazingly dreamy track that just fits the game really well and I added that in as well and that's Hoy bar that's the game at first going into this challenge I had no idea how hard it was going to be but now I understand why people love JavaScript so much it's just incredibly easy to use and it's fun I just had a good time and I mean who wouldn't making a cppy bar game now if you want to get into programming and you don't know where to start then check out a word from today's sponsor brilliant brilliant has thousands of lessons from from foundational advanced math to programming AI neural networks and more with new lessons being added each month and their interactive lessons have been proven to be six times more effective than passive learning like just watching random lecture videos being able to see what you're learning is really important for engaging with Concepts and Brilliant storytelling makes abstract ideas actually relatable one course I really like is computer science fundamentals it basically is programmers 101 helps with decision-making writing programs and algorithms fantastic and I highly recommend it to try everything brilliant has to offer there is a 30-day free trial all you have to do is visit brilliant.org goodus or click on the link in the description the first 200 view will get 20% off brilliant's annual premium subscription and I just want to say thank you to brilliant for supporting the channel and my Game Dev Journey

Channel: Goodgis

Views: 712,829

Keywords: goodgis, ohio, devlog, game dev, indie dev, game programming, game process, how to make, firith, firith studio

Id: r9I4DuGmJ2Y

Length: 5min 48sec (348 seconds)

Published: Fri Oct 27 2023