The idea of creating games with JavaScript may seem daunting at first if you aren’t familiar with the basics, such as how to get started, the various game engines available to streamline the development process, etc.
In this guide, we’ll demonstrate how to use Boxbox.js and Box2D by building a simple “Angry Birds” clone. We’ll focus on how to create JavaScript Boxbox.js entities and blocks and how to represent real-world objects with it.
Getting started with Boxbox.js and Box2D
Before we delve into coding, let’s quickly go over the libraries we’ll be using to develop our game.
Boxbox.js is a JavaScript framework for making games. It uses the Box2d engine under the hood, which is very difficult for beginners to get around with at first glance. Boxbox.js helps simplify the process of creating simple and fun 2D games with the Box2D library.
First, download and add the libraries to your HTML file.
Create an index.html
file and add the following code.
<html> <head> <script src="https://github.com/hecht-software/box2dweb/blob/master/Box2d.min.js"></script> <script src="https://github.com/incompl/boxbox/blob/master/boxbox.min.js"></script> </head> <body> <main> <canvas id="angrybird" width=640 height=380></canvas> </main> // Added our custom Game <script src="AngryBird.js"></script> </body> </html>
Setting up the canvas
Create a file called AngryBird.js
and paste in the following initialization code.
const canvas = document.getElementById("angrybird"); const ourWorld = boxbox.createWorld(canvas);
Using the ourWorld
object, we can call the createEntity
method to create various types of entities or objects in our ourWorld
.
Creating our bird and ground entities
In the case below, we’re creating a circle entity called bird
. As you’ve probably guessed by now, we’re going to represent our bird as a circle.
We’ll give our bird the following properties below and added an onKeyDown
function to trigger the bird to jump at any key down event.
ourWorld.createEntity({ name: "bird", shape: "circle", radius: 1, imageStretchToFit: true, density: 4, x: 2, onKeyDown: function (e) { this.applyImpulse(200, 60); }, });
Next, we’ll create another entity called ground
, which will represent our floor. In the world of physic, if anything is not blocking an object or if it is not set to static, gravity will move it downward below the surface.
To avoid losing our entities, we created the ground
entity with the following properties. We should also make sure it’s set to static so it doesn’t move downward.
ourWorld.createEntity({ name: "ground", shape: "square", type: "static", color: "rgb(0,0,0)", width: 20, height: 0.5, y: 12.5, });
Building obstacles
The following code creates a block, which will represent the obstacles for our bird to hit. Since we’ll be generating three of the same type of block, it’s a good idea to create a since
object to represent it.
const block = { name: "block", shape: "square", color: "red", width: 0.5, height: 4, onImpact: function (entity, force) { if (entity.name() === "bird") { this.color("black"); } }, };
Using the block
generated above, we created our first obstacle with the following unique property.
ourWorld.createEntity(block, { x: 15 }
Using the the block
generated above, we created our second obstacle with the following unique property.
ourWorld.createEntity(block, { x: 17 }
Using the the block
generated above, we created our third obstacle with the following unique property.
ourWorld.createEntity(block, { x: 16, y: 1, width: 4, height: .5 }
Finalizing our game
Putting the above code together produces the code below.
const canvas = document.getElementById("angrybird"); const ourWorld = boxbox.createWorld(canvas); ourWorld.createEntity({ name: "bird", shape: "circle", radius: 1, imageStretchToFit: true, density: 4, x: 2, onKeyDown: function (e) { this.applyImpulse(200, 60); }, }); ourWorld.createEntity({ name: "ground", shape: "square", type: "static", color: "rgb(0,0,0)", width: 20, height: 0.5, y: 12.5, }); const block = { name: "block", shape: "square", color: "red", width: 0.5, height: 4, onImpact: function (entity, force) { if (entity.name() === "bird") { this.color("black"); } }, }; ourWorld.createEntity(block, { x: 15, }); ourWorld.createEntity(block, { x: 17, }); ourWorld.createEntity(block, { x: 16, y: 1, });
If you did everything right, your “Angry Birds” clone game should look like this.
For next steps, you might consider including images, for example, to make the circle look like a bird — or, really, anything you can imagine.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Conclusion
In this article, we demonstrated how to create a simple 2D game using JavaScript and how to create an “Angry Birds” clone using BoxBox.js.
What will you build with this new knowledge? Feel free to share in the comments.
Are you adding new JS libraries to improve performance or build new features? What if they’re doing the opposite?
There’s no doubt that frontends are getting more complex. As you add new JavaScript libraries and other dependencies to your app, you’ll need more visibility to ensure your users don’t run into unknown issues.
LogRocket is a frontend application monitoring solution that lets you replay JavaScript errors as if they happened in your own browser so you can react to bugs more effectively.

LogRocket works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.
Build confidently — Start monitoring for free.
Excellent friend. I am 13 yr old boy and I’ve probably learnt html, css, basics of javascript and I’m gonna learn c++.helped a lot