![]() That's a lot to think about! Let's get started and create a project in Replit. Log into your Replit account and create a new repl. Now, give this repl a name, like "snake-kaboom".Īfter the repl has booted up, you should see a main.js file under the "Scenes" section. Kaboom.js is a JavaScript library that contains many useful features to make simple in-browser games. It has functionality to draw shapes and sprites (the images of characters and game elements) to the screen, get user input, play sounds, and more. We'll explore these features and learn how they work by using some of them in our game. Kaboom.js also makes good use of JavaScript's support for callbacks instead of writing loops to read in keyboard input and check if game objects have collided (bumped into each other), Kaboom.js uses an event model, where it tells us when such an event has occurred. Then we can connect up callback functions that act on these events. Using Kaboom.js in Replit takes care of all the boilerplate initialisation code, as well as asset loading, so we can concentrate on writing the game logic and making game graphics and sound. To start, we can get our game board, or map drawn on the screen. This will define the edges of the board so that if the snake crashes into them, we can detect and end the game. Kaboom.js has built-in support for defining game maps, using a text array and the function addLevel. Replace the example code in main.js file with the following to create the game board: This takes away a lot of the hassle normally involved in loading and rendering maps. On the first line we import the kaboom library, and then initialize the context by calling kaboom(). This will give us a blank canvas with a nice checkerboard pattern. We then create a constant for the size of each block on our grid. This is just so we don't need to keep typing in the number, and also helps if we want to experiment later with different block sizes etc. The map, or level design, is expressed in an array of strings. Each row in the array represents one row on the screen. So, we can design visually in text what the map should look like. The width and height parameters specify the size of each of the elements in the map. The pos parameter specifies where on the screen the map should be place – we choose (0,0), which is the top left of the screen, as the starting point for the map. ![]() Then Kaboom.js allows us to specify what to draw for each symbol in the text map. We're only using one symbol here, =, but you can make maps out of many different elements – e.g., a symbol for a wall, a symbol for water, a symbol for a health kit and so on. To tell Kaboom.js what to draw for the symbol, we add the symbol as a key, as in =, and then specify parameters for it. In this code, we draw a red rectangle as each piece of the boundary wall.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |