create-kaplay-game

A CLI tool to scaffold an Electron + Vite + Kaplay game project, in JavaScript or TypeScript.

Features

• Electron + Vite setup
• Kaplay game library
• Customizable window and canvas size
• JavaScript or TypeScript template
• Modern Kaplay context style (export const k = () => new Kaplay.Game(...))
• Direct current directory support: npx create-kaplay-game ./
• Dangerous clear command in created projects: npm run clear (see below)

Usage

Prompt Mode

npx create-kaplay-game

You will be prompted for:

• Project name (enter ./ to use the current directory)
• Language (JavaScript or TypeScript)
• Window width and height

Argument Mode

You can pass the project name as a CLI argument:

npx create-kaplay-game my-game

Or scaffold in the current directory:

npx create-kaplay-game ./

Project Structure

my-kaplay-game/
├── electron.js / electron.ts      # Electron main process (entry, Node.js only)
├── main.js / main.ts              # Vite entry, sets up Kaplay game (browser only)
├── KaplayCTX.js / KaplayCTX.ts    # Your Kaplay context (exported as k())
├── index.html                     # Loads main.js/main.ts as module
├── preload.js                     # Electron preload script
├── clear.js                       # DANGEROUS: deletes everything in the project
├── package.json                   # Project scripts and dependencies
└── ...

Note:

• electron.js/electron.ts is for Electron main process code only (Node.js APIs, window creation, etc.).
• main.js/main.ts is for your Kaplay game and runs in the browser context (Vite entry).
• Do not mix Electron and browser code in the same file.

Kaplay Context Example

Your Kaplay context is exported like this (in KaplayCTX.js or KaplayCTX.ts):

import Kaplay from "kaplay";

export const k = () => {
  const canvas = document.getElementById("game-canvas");
  return new Kaplay.Game({
    canvas,
    width: canvas.width,
    height: canvas.height,
    background: "#eee",
    // Add more Kaplay settings here
  });
};

You can import and call this context in your Kaplay game setup in main.js/main.ts:

import { k } from "./KaplayCTX";
const game = k();

Getting Started

1. Run the CLI (see above).
2. Change into your new project directory (if not using ./):

   cd your-project-name

3. For TypeScript projects, build once:

   npm run build

4. Start the development server:

   npm run dev

Danger: Clear Command in Created Projects

Every project created with this CLI includes a clear.js script and a clear npm script:

npm run clear

Warning: This will delete EVERYTHING in the project directory (including node_modules, .git, and even clear.js itself), leaving the folder completely empty. You will be prompted for confirmation before deletion.

MIT License