Awesome

crisp-game-lib

English | 日本語

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

Getting started

Download docs/getting_started/index.html.
Open index.html in a text editor and write the code of your game in the <script> element.
Open index.html in a browser and play the game.
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)

Clone or download this repository.
npm install
Copy the docs/_template directory and rename it to docs/[your own game name].
Open docs/[your own game name]/main.js with the editor (VSCode is recommended) and write your own game code.
npm run watch_games
Open the URL http://localhost:4000?[your own game name] with a browser to play the game. The page is live-reloaded when the code is rewritten.

Publish your own game

Place main.js, docs/bundle.js, and docs/index.html on the webserver in the following directory structure.

┝ [games root directory (any name)]
   ┝ [your own game name]
   │  └ main.js
   ┝ bundle.js
   └ index.html

Open the URL [Address of games root directory]/index.html?[your own game name] with a browser.

Use with a bundler

If you want to build a game using a bundler (e.g. Vite), do the following.

npm install crisp-game-lib at your project directory.
Copy docs/_template_bundler/index.html and docs/_template_bundler/main.js to your project directory.
Write game code in main.js.
Build with the bundler.

If you want to describe the game using TypeScript, rename main.js to main.ts.

Function introduction demo

Drawing / Collision / Input / Audio

Kenta Cho’s “Crisp Game Lib” Games, written by Terry Cavanagh, known as the developer of Super Hexagon and VVVVVV
Guide to getting started with CrispGameLib, written by Juno Nguyen
crisp-game-lib, a game library for creating mini-games with minimal effort

Tips

By drawing with color("transparent"), you can get the result of collision detection without drawing any shape on the screen.
The collision detection is based on the drawing history of the shape. Therefore, even if a drawn shape is overwritten with a background-colored shape, the collision detection in that area will not disappear.
The base value for the random seed for sound generation is generated from the title and description strings. If you want to use seed in options to adjust the generated sound, it is better to do so after the title and description are fixed.
To improve the performance of the game, do the following (mainly for mobile devices):
- Use simple or dark theme. Do not specify a theme that uses pixi.js (pixel, shape, shapeDark, crt) in options. WebGL post-effects may worsen performance.
- Minimize drawing bars, lines, or arcs. They are drawn as a combination of many rectangles and are highly detrimental to the collision detection process.
If you want to create a game that can be played comfortably on a mobile device, I recommend that you adopt one of the following three control methods.
- One-button
- Slide operation left or right direction only
- Tapping on a specific place on the screen
For more information on how to create a one-button game, please refer to the following article I wrote: How to realize various actions in a one-button game
The sounds-some-sounds library can be used to play music. To play music written in MML, use the sss.playMml() function.
If you want to run crisp-game-lib games on small devices such as M5Stack or Adafruit PyBadge, you can use the C implementation version crisp-game-lib-portable.