You can make maps out of different elements, e.g. Kaboom allows us to specify what to draw for each symbol in the text map. The pos parameter specifies where on the screen the map should be placed – we chose 0,0, which is the top left of the screen, as the starting point for the map. The width and height parameters specify the size of each of the elements in the map. 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 map, or level design, is expressed in an array of strings.
Replace the code in main.js with the code below:įirst, we add some game parameters, which we'll use when we define the size of the map, and the default block size for map elements. To start, we need to set up Kaboom with the screen size and colors we want for the game window. Scenes have multiple "layers", allowing us to have game backgrounds, main game objects (like the player, bullets, enemies, etc), and UI elements (like the current score, health, etc). We can then write callback functions to act on these events.Ī Kaboom game is made up of "scenes", which are like levels, or different parts and stages of a game. Kaboom makes good use of JavaScript's support for callbacks: instead of writing loops to read keyboard input and check if game objects have collided, Kaboom uses an event model that tells us when these events have happened. Extract the file on your computer, then add the sprites to the "Sprites" section in the Replit editor, and the sounds to the "Sounds" section.
If you haven't already, download this zip file which contains all the sprites and sounds for the game. You can read up more about this interface here. These special folders take care of loading up assets, and all the necessary code to start scenes and direct the game. Besides the Space Invader icon, you'll notice a few special folders in the file tray, like "Code", "Sprites", and "Sounds". The Replit Kaboom interface is specialised for game-making. We'll use some of these features in our game to explore how Kaboom works. 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. Kaboom.js is a JavaScript library that contains a lot of useful features for making simple browser games. Give this repl a name, like "Space Shooter".Īfter the repl has booted up, you should see a main.js file under the "Code" section. Let's head over to Replit and create a new repl. With every 1000 points the player earns, the game gets faster and more bugs appear.
The spaceship will lose shield strength each time an alien bug hits it. In our game, a player flies a spaceship around a faraway planet, collecting gems and dodging or shooting alien bugs that explode on contact. Increasing challenge: the game gets harder and faster as the player gets better.Good sound effects: to immerse the player in the game and contribute to the overall game vibe.Fast action: the player moves around a lot.Here's what we're aiming for in this game: You can download this zip file with all the sprites and sounds you'll need for this tutorial.
Here's how the game will look when we're done: We'll use Kaboom.js for the game engine, and we'll code it using Replit online IDE (Integrated Development Environment). In this tutorial, we'll build a space shooter game with a platformer feel.