DEV Community

ABA Games
ABA Games

Posted on

crisp-game-lib, a game library for creating mini-games with minimal effort

crisp-game-lib is a JavaScript library for making browser games quickly and easily. I made 50 minigames in 2014, and I made Haxe library mgl and CoffeeScript library to make those games. After that, I continued to make mini-games and libraries. Using this experience, I created crisp-game-lib as a library with the minimum functionality needed to create classic, arcade-like mini-games.

GitHub logo abagames / crisp-game-lib

Minimal JavaScript library for creating classic arcade-like mini-games running in the browser


English | ๆ—ฅๆœฌ่ชž

crisp-game-lib is a JavaScript library for creating browser games quickly and easily.

Sample games and sample codes

Sample games are listed on my browser games page. Click Play to play the game in your browser (PC or mobile).

Sample code for each game is main.js in each directory in the crisp-game-lib-games/docs directory.

Getting started

  1. Download docs/getting_started/index.html.

  2. Open index.html in a text editor and write the code of your game in the <script> element.

  3. Open index.html in a browser and play the game.

  4. You can publish the game by putting index.html on your web server.

Write your own game (with the help of IntelliSense and Live Reload)

  1. Clone or download this repository.

  2. npm install

  3. Copy the docs/_template directory and rename it to docs/[your own game name].

  4. Open docs/[your own game name]/main.jsโ€ฆ

I have already made more than 150 games using crisp-game-lib, and this library has been well dogfooded. With crisp-game-lib, you can create browser games that work on PC and mobile by simply writing the game's title, description, and the update function that is called 60 times per second as a single JavaScript file (click the image below to play).

The game has all the functions necessary for mini-games: drawing functions for boxes, lines, arcs, text, characters, etc.,

ref_drawing screenshot

Drawing functions

a collision detection function integrated with these drawing functions,

ref_collision screenshot

Collision detection function

an input acquisition function that supports both mouse and touch panels, and a sound effect function allows you to select the name of the sound you want to play.

In addition, there is a BGM function that is automatically generated simply by setting isPlayingBgm to true in the options. If you don't like the sound generated, you can change the sound by giving an appropriate integer to seed.

There is also a replay function that can be enabled simply by setting isReplayEnabled to true. By merely selecting theme, we can change the game's appearance to retro CRT style, dot art style, etc. We can define the pixel art with the characters array.

There is also an article on the crisp-game-lib written by Terry Cavanagh, known as the developer of Super Hexagon and VVVVVV.

crisp-game-lib is not suitable for creating complex, long-playing games. But we can make simple action games with this library in a short time. I would be happy if you could use it to create mini-games for your daily hobbies or prototyping hyper-casual games.

Discussion (0)