What is Kaboom?
Getting Started with Kaboom
To start up your kaboom app, you will need to call Kaboom to initialize the kaboom context like so:
P.S. If the building environment for your application is your code editor, make sure to import the Kaboom.JS library as well as your JS file into your html file.
Create your Scene
In Kaboom, everything belongs to a scene. We can think of the scene as essentially what the game is going to look like, behave, and involve.
In the example above, we’ve call the scene method for our “main” scene and will pass in the other components of the game inside of the function. Lastly, we will need to call the scene using start at the end.
Load your Sprites and Create Player
Now, we’ll want to start “drawing” our sprites onto our game UI. In computer graphics, a sprite is a two-dimensional bitmap that is integrated into a larger scene, most often in a 2D video game. For this tutorial, I used a yeti sprite I pulled from Imgur.
In order to load our sprites and create our players, we’ll want to call the load sprite method, pass in our sprite image info, and in the scene create the player.
If all your code is correct, you should successfully see the yeti sprite on your screen. Right-click on your index.html file, copy the path, and open the path in a new browser page.
We’ll want to start adding basic behavior to our sprite by adding the body component to your initialized sprite. This method essentially makes your sprite adhere to the “rules of gravity”. Once this method is called, your sprite will start falling of the screen, so we’ll want to create a temporary platform as well.
Kaboom Key Events
The body method gives your sprite access to methods like <jump> and <move>. We can call these methods in combination with key events to add more interesting behavior to our sprite. Let’s give our Yeti the ability to move left and right and jump. Add the following lines of code within your main scene function.
Add A Background Image
To wrap up this quick intro tutorial to kaboom, let’s add a background image to our UI and scale it to size.
As an FYI, i removed the loadRoot method, since I am using two sprites from two different websites. As a result, I coded the full web address in the loadSprite method.
Voila, your game should look as so:
Now that you know the basics, go ahead and feel free to play around with creating your first game! I recommend following along with the FreeCodeCamp tutorial and afterwards trying to build a simple game on your own!
Credit for Sprite images: