Tech

Start Your Game Dev Journey With the Simplicity of 24a2


24a2 is a very basic, but fully operational, game engine for JavaScript programmers. It has an unusual look and feel, but you can use it to learn the fundamentals of game programming.


With support for a game loop, colorful graphics, and simple input, 24a2 has everything you need to create small games with minimal effort.

Check out 24a2 and start your journey toward full game development today.


What Is 24a2?

24a2 is a small, open-source engine that helps you build basic games. It’s very easy to learn and all you need to start building your games is a web browser and a text editor.

24a2 takes its name from its resolution: 24 x 24. Even compared to other minimalistic engines like PICO-8, with its 128 x 128 resolution, this is tiny! 24a2 uses circular ‘pixels’, with large gaps between them, so it’s quite distinctive looking.

A basic skiing game with the player shown on a pathway in the middle of two green areas.

You probably won’t be using 24a2 to come up with the next smash hit video game, but that’s not really the point. 24a2 is perfect for beginners, and you can use it to learn some of the fundamental concepts behind game development.

It’s also great for prototyping a core concept. If you find yourself getting distracted by complex game physics or sprite animations, stripping all of that away should help you focus.

What’s more, the 24a2 source code is a single TypeScript file. You can use it for inspiration, or even modify it, to create your own, more advanced game engine.

How Do You Use 24a2?

Start with a basic template for your game:

 <html>
  <head>
    <script
      src="https://cdn.jsdelivr.net/gh/jamesroutley/24a2/build/engine.js">
    </script>
    <script src="game.js"></script>
  </head>
  <body></body>
</html>

Notice how this uses a content delivery network (cdn.jsdelivr.net) to source the engine.js file, so you don’t even need to download or install anything.

The second script, game.js, is for your own game code. Start with the absolute minimum working code, to check everything works properly:

new Game({}).run();

This tiny program will display the default 24a2 grid in your web browser:

The default 24x24 grid of light grey circles that make up 24a2's playfield.

Next, you’ll want to familiarize yourself with 24a2’s callback functions that form the core of the engine. These concepts are transferable across game engines, so learning how they work will benefit you beyond your use of 24a2.

There’s a handful of essential functions that you can define and pass to the Game() constructor via a config object.

 let config = {
  create: create,
  update: update,
  onKeyPress: onKeyPress,
  onDotClicked: onDotClicked
};

let game = new Game(config);
game.run();

24a2 calls the function you specify in config.create when it starts up. You can use this to initialize your game’s own configuration, set up data structures, etc.

 function create(game) {} 

The update function runs periodically for the duration of your game. This is the main game loop which, in other engines, usually consists of separate steps to update game state and redraw the screen. With 24a2, you’ll handle both operations in this function.

 function update(game) {} 

Finally, to capture input, you’ll want to handle arrow key presses, mouse clicks, or both. 24a2 passes a direction to your onKeyPress function when the player presses an arrow key. It passes x and y coordinates to onDotClicked if they click a dot using their mouse.

 function onKeyPress(direction) {}
function onDotClicked(x, y) {}

What Kinds of Game Can You Create With 24a2?

The 24a2 site contains three example games including a tutorial. The others it showcases are a simple Snake game and a Skiing challenge.

The GitHub repository includes links to some other games including Space invaders, Tic-Tac-Toe, and a minimal Paint program. You Killed a Bear is more advanced and Maze Craze is a good demonstration of how to layer additional graphics on top of the standard grid.

24MadRush is a Tetris ‘clone’ which makes great use of the color palette. It also starts with an innovative playable tutorial that demonstrates its features.

24MadRush, a falling-block game with a patch of mixed color dots on the lower 4 rows.

The Technical Specs of 24a2 Games

24a2 is very limited, by design. But this provides an excellent opportunity for creativity. One of the top tips for being more creative is to embrace constraints.

Besides its limited resolution, 24a2 restricts you to:

  • A color palette of just nine colors: those in the rainbow plus black and gray.
  • Very basic input: arrow key presses and mouse clicks on the dot grid.
  • Silence: there is no support for music or sound effects whatsoever.

However, you can always write supplementary JavaScript code to extend your game beyond these limitations. And, since the engine is open-source, you are free to develop it in whichever way you see fit.

Spur Yourself On to Greater Things With 24a2

Try testing yourself with 24a2. Recreate a classic game or invent one of your own. Turn-based games, like board games, will work very well with the engine.

If 24a2 ignites your passion for game dev, there are plenty of opportunities to continue the journey. PICO-8, Godot, Unity, and GameMaker are all popular choices.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button