JavaScript is one of the most widely used programming languages on the web today. It began as a tool to validate web forms efficiently, saving time and bandwidth. Now, it powers major websites like Facebook, Netflix, and Uber. In fact, over 98% of websites utilize JavaScript.
What does this have to do with game development? Recently, while working on a website for my charming metroidvania game, “Capybara Dynasty,” I pondered the challenges of creating a game using JavaScript. This curiosity led me to explore various JavaScript frameworks suitable for game development.
While researching, I discovered frameworks like Phaser and Babylon.js. However, I was drawn to something less conventional and stumbled upon Kaboom.js. A demo featuring lively music and a quirky character convinced me to give it a try. After installing Kaboom.js, I was ready to begin my game development adventure.
Before diving into coding, I needed a game concept. I envisioned a unique blend of the Google dinosaur game with capybaras. Using Affinity Designer, I sketched a capybara character named Harold, aligning with my passion for cute games.
Starting with the classic “Hello, World!” challenge in Kaboom.js was straightforward. I then followed a movement tutorial to enable Harold to walk. To create an endless runner game, I incorporated gravity, although the initial jump was weak. Debugging errors became a learning experience as I inspected the web page to resolve issues.
Next, I added hazards for Harold to jump over, scripting the spawning and deletion of objects as they moved off-screen. A scoring system and game over screen were implemented, allowing players to collect points and view their score upon hitting an obstacle. Adjustments to visuals and jump strength enhanced gameplay, enabling Harold to successfully leap over obstacles.
Returning to Affinity, I created additional assets like the background and floor to enhance the game’s cohesiveness. The setting, resembling a kitchen or bathroom, featured capybaras and oranges. I exported these files and randomized the spawning objects in the game.
After adjusting the window size and background color, I introduced windows with slight parallax scrolling, which functioned seamlessly. Final animations for the capybaras were developed, and I experimented with increasing game speed as it progressed.
With the gameplay nearly complete, I polished the game by designing a title screen and importing fonts for an improved appearance. Sound effects and a dreamy background track were added, complementing the game’s atmosphere.
Thus, “Hoy Bar” was born. Initially, I underestimated the challenge, but now I understand the appeal of JavaScript. It’s incredibly user-friendly and enjoyable.
If you’re interested in programming and unsure where to begin, consider exploring Brilliant, today’s sponsor. They offer thousands of lessons on topics ranging from foundational math to programming and AI. Their interactive lessons are proven to be more effective than passive learning methods.
One course I particularly recommend is “Computer Science Fundamentals,” which covers essential programming concepts and decision-making. Brilliant offers a 30-day free trial, and the first 200 viewers can receive 20% off their annual premium subscription. Thank you to Brilliant for supporting the channel and my game development journey!
Research and compare different JavaScript frameworks like Phaser, Babylon.js, and Kaboom.js. Create a presentation highlighting their strengths and weaknesses for game development. This will help you understand the tools available and choose the best one for your projects.
Using Kaboom.js, develop a basic game prototype. Start with a “Hello, World!” example and gradually add features like character movement and simple obstacles. This hands-on experience will reinforce your understanding of game mechanics and JavaScript coding.
Use a design tool like Affinity Designer to create your own game assets, such as characters and backgrounds. Experiment with different styles and themes. This activity will enhance your creativity and give you practical skills in digital design.
Develop a scoring system for your game where players can earn points and see their scores displayed on the screen. This will teach you how to manage game state and user interface elements in JavaScript.
Pair up with a classmate to review each other’s game code. Provide constructive feedback and suggest improvements. This collaborative activity will improve your coding skills and help you learn from different coding styles and approaches.
Here’s a sanitized version of the provided YouTube transcript:
—
JavaScript is one of the most popular programming languages on the web right now. Originally, it started as a way to save time and bandwidth to validate web forms, but now it powers some of the biggest websites, such as Facebook, Netflix, and Uber. In fact, more than 98% of websites use JavaScript.
So, what does this have to do with making a game? Recently, I was working on a new website for my cute metroidvania game, “Capybara Dynasty,” which you can wish list on Steam. This got me thinking about how hard it is to make a game in JavaScript.
I started by looking for an easy JavaScript framework to use. I came across options like Phaser and Babylon.js, but I wanted something a bit more obscure, and that’s when I found Kaboom.js. After seeing a demo with some fun music and a quirky character, I was sold. I installed Kaboom.js and got started.
Before diving into the code, I needed to decide what kind of game I wanted to create. I came up with a unique combination: the Google dinosaur game meets capybaras. So, I hopped into Affinity Designer to draft a capybara design. If you’ve followed this channel for a while, you know I love cute games, so creating a capybara game felt like a natural fit.
I designed a cute capybara character named Harold and then jumped back into Kaboom.js to tackle the classic “Hello, World!” challenge, which turned out to be quite easy. Next, I familiarized myself with Kaboom.js and followed their movement tutorial to allow Harold to walk around.
To create an endless runner game, I added gravity, but the initial jump felt a bit weak. I encountered several errors during this process, but I learned to inspect the web page to debug them. After that, I created hazards for Harold to jump over, implementing a script to spawn and delete objects as they moved off-screen.
I also worked on a scoring system and a game over screen, where players collect points over time and see their score when they hit an object. I adjusted the visuals and jump strength to improve gameplay, and Harold could finally jump over obstacles.
I returned to Affinity to create additional assets, including the background and floor, to make the game feel more cohesive. The setting resembles a kitchen or bathroom area, featuring capybaras and some oranges. I exported the files and made sure to randomize the objects that would spawn in the game.
After adjusting the window size and background color, I added windows with slight parallax scrolling, which worked perfectly. I then focused on final animations for the capybaras, experimenting with increasing the game speed as it progressed.
Once the gameplay was mostly finished, I polished the game by creating a title screen and importing fonts for a nicer appearance. I also added sound effects and a dreamy background track that fit the game well.
And that’s “Hoy Bar,” the game I created. Initially, I had no idea how challenging this would be, but now I understand why people love JavaScript. It’s incredibly easy to use and fun.
If you’re interested in programming and don’t know where to start, I recommend checking out a word from today’s sponsor, Brilliant. They offer thousands of lessons on topics ranging from foundational math to programming and AI. Their interactive lessons are proven to be more effective than passive learning methods.
One course I particularly like is “Computer Science Fundamentals,” which covers essential programming concepts and decision-making. Brilliant offers a 30-day free trial, and the first 200 viewers can get 20% off their annual premium subscription. Thank you to Brilliant for supporting the channel and my game development journey!
—
This version removes any informal language, repetitive phrases, and maintains a professional tone while preserving the main ideas and structure of the original transcript.
Javascript – A high-level, versatile programming language commonly used to create interactive effects within web browsers. – Many modern websites rely on Javascript to enhance user experience and provide dynamic content.
Game – A structured form of play, often undertaken for entertainment or fun, which can be developed using programming languages and engines. – The students collaborated to create a 2D platformer game as part of their computer science project.
Coding – The process of writing instructions for a computer to execute, using a programming language. – She spent the weekend coding a new feature for her mobile app project.
Framework – A pre-built set of tools and libraries that provide a foundation for developing software applications. – React is a popular JavaScript framework used for building user interfaces.
Development – The process of creating, designing, and maintaining software applications. – Software development requires a deep understanding of algorithms and data structures.
Debugging – The process of identifying and removing errors or bugs from computer software. – Debugging is a crucial step in ensuring that the program runs smoothly and efficiently.
Programming – The act of writing computer programs to perform specific tasks or solve problems. – Programming requires logical thinking and problem-solving skills.
Assets – Resources such as images, sounds, and code that are used in the development of software applications, particularly games. – The game developers spent weeks creating and optimizing the visual assets for their new release.
Tutorial – An instructional guide or lesson that teaches how to use software or perform specific tasks in coding. – The online tutorial helped her understand the basics of Python programming.
Aesthetics – The visual appearance and design of a software application, which affects user experience and engagement. – The app’s aesthetics were praised for their clean and modern design.
