How to Make a Game with JavaScript
I am planning my next game creation, which is currently called Cat Chess but might end up being called Cat Defence in the spirit of the Tower Defence genre of games.
As I have already been sharing in my tutorials, part of the framework will be the back end, using the ]Hive Blockchain with Custom JSON](https://peakd.com/hivedev/@makerhacks/custom-json-hive-blockchain). Now we need to look at how the front-end can be made.
Game Engines
My success criteria for the game (outside of it being on Hive) is for it to be a fun process, for me to learn more than I know now, and for it to be "pick up and play" for as many people as possible. Even if I don't succeed in it being popular, I will still "win" if I can learn a whole bunch while failing.
This means, at least in the beginning, it shouldn't be a desktop or native mobile app, even though I use Python as my go-to language and there are things like Game Maker especially for this.
Those systems would require the game to be downloaded and installed, restricting who can (or will be bothered) to play the game and also how much effort I need to put in just to bootstrap it. Especially if I need to contend with app stores, eww. I can always do versions for target systems later, but for now, I need to see if I have a good game idea first with a Minimum Viable Product.
The most widely accessible system would be an HTML5 browser-based game. I could make my own game engine using the Canvas object, but people have done that heavy lifting already.
Seeing as I won't be making money from the game, I don't want to buy a license, so that leaves me with $free, and open-source free.
Two I looked at but ended up not going with are ...
I have done a lot of work with AOZ.Studio, a basic->JavaScript transpiler - it is a very nice system. It does, however, currently require a splash screen.
Phazer is well respected and Object-Oriented.
The one I chose was Kaboom from the Replit folks. It's quite new, light, and made immediate sense when I went through the example code, but the main thing is it provides the features that the majority of 2D games (at least those I will make) require:
- Sprites and animation
- Movement
- Collision detection
- Sounds
- Scenes, Maps/Levels
- Viewport/Camera
- Etc
Coding a Platformer with Kaboom
You can grab the Kaboom JavaScript library at kaboomjs but for now, for speed, I went with Replit and their Kaboom starter blueprint.
Using their provided game assets I built a simple platformer:
The idea of the game is to get you (the ball) to the key by jumping on platforms and avoiding the bomb. You score bonus points for eating the apple.
Very, very simple stuff that I put together in a couple of hours from having never worked with the game engine before, showing the ease of use and clarity of their system.
Scenes
In Kaboom the player experience is partitioned into "Scenes".
For example, I need to have a title page, the game itself, then a screen to show you lost and another to show that you won.
They are constructed very simply:
scene("title", () =>
{
add([
text("Click to start"), {
width: width()
}])
// on mouse click
onClick(() => {
go("game")
})
})
To move to another screen, you use the command go("scene-name")
so my title screen moves to the game after the player clicks anywhere on the screen.
Sprites
Sprites are simply regular graphics that you find on the web. I am using PNG files because they were included already but also because they are crisp, colourful and have a transparent background.
We load the sprite first:
loadSprite("bomb", "sprites/bomb.png")
then we add them to the scene:
// Bomb
var bomb = add([
// list of components
sprite("bomb"),
pos(500, 340),
area(),
body(),
origin("bot"),
"deadly","item"
])
You will notice that our added object has the graphic and the X, Y coordinate specified, as you would expect, but also by specifying "Area" we tell the game engine to check for collisions, and "Body" we tell it that gravity affects this object.
We then get to "Origin", which defines the origin point of the object's position. By default pos() defines the top-left point of the shape, here we change it because I want my objects to sit on platforms or the floor.
Finally, we have tags, which allow grouping and organization of our objects. For example I say that the bomb is deadly, so I can tell the engine what to do with anything deadly rather than duplicate code for everything that could kill the player.
Collision Detection
Using the tags we can have multiple objects play the same role in the game, for example, I said the Apple object is a prize, and prizes give bonus points. Using the same collision detection statement I can also have bananas and a cherry just by adding them to the scene.
player.onCollide("prize", (prize) => {
destroy(prize)
burp();
score.text = parseInt(score.text) +10
})
When we collide with the prize, it is removed from the playfield, and we increase the player's score.
Burp is a special sound effect, but we have other sounds using the built-in features ...
Audio and Sound Effects
Like Sprites, we must load the audio asset before using it:
loadSound("music", "/sounds/music.mp3")
To play a sound we can simply use play("music")
but by assigning a variable we then get to control it later, so music=play("music")
allows us to stop the music using music.stop()
Controls
Kaboom makes controlling your player very easy, for keyboard control you can simply provide functions for each key, with a special Jump function especially for platformers:
onKeyDown("left", () => {player.move(-SPEED, 0)})
onKeyDown("right", () => {player.move(SPEED, 0)})
onKeyDown("up", () => {
if(player.grounded())
{
player.jump(JUMP_FORCE);
}
})
Complete Game in Action
As I said, it is a very basic game, but it allowed me to learn the majority of what I needed to evaluate the game engine before putting too much time and energy into something that might not have worked out.
Thanks for advice. I just found my old phone with simple game I've made for my kids. This game was made with craftyjs, but I've lost sources so need to rewrite it from scratch and will try Kaboom
Congratulations @makerhacks! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):
Your next target is to reach 1500 comments.
You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word
STOP
To support your work, I also upvoted your post!
Check out the last post from @hivebuzz: