crisp-game-lib

English | 日本語

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

• Step-by-step guide on creating a game using the crisp-game-lib

• Reference of crisp-game-lib

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 with the editor (VSCode is recommended) and write your own game code.

5. npm run watch_games

6. 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

1. 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
   

2. 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.

1. npm install crisp-game-lib at your project directory.

2. Copy docs/_template_bundler/index.html and docs/_template_bundler/main.js to your project directory.

3. Write game code in main.js.

4. Build with the bundler.

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

Function introduction demo

• Drawing (DEMO)

• Collision (DEMO)

• Input (DEMO)

• Sound (DEMO)

Related articles

• 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.