KaboomJavaScript 游戏库-技术圈

Kaboom 是一个 JavaScript 库，可帮助你轻松快速地制作游戏！

可以在 Kaboom Playground 体验一下。

示例

// initialize context
kaboom();

// load a sprite called "froggy"
loadSprite("froggy", "sprites/froggy.png");

// compose the player game object from multiple components and add it to the game
const froggy = add([
    sprite("bean"),
    pos(80, 40),
    area(),
    body(),
]);

// press space to jump
keyPress("space", () => {
    // this method is provided by the "body" component above
    froggy.jump();
});

Kaboom 使用了一个强大的组件系统，来组成游戏对象和行为。

// add a game obj to the scene from a list of component
const player = add([
    // it renders as a sprite
    sprite("bean"),
    // it has a position
    pos(100, 200),
    // it has a collider
    area(),
    // it is a physical body which will respond to physics
    body(),
    // it has 8 health
    health(8),
    // or give it tags for easier group behaviors
    "player",
    "friendly",
    // plain objects fields are directly assigned to the game obj
    {
        dir: vec2(-1, 0),
        dead: false,
        speed: 240,
    },
]);

描述行为的块状命令式语法：

// .collides() comes from "area" component
player.collides("enemy", () => {
    // .hurt() comes from "health" component
    player.hurt(1)
});

// check fall death
player.action(() => {
    if (player.pos.y >= height()) {
        destroy(player);
        gameOver();
    }
});

// if 'player' collides with any object with tag "enemy", run the callback
player.collides("enemy", () => {
    player.hp -= 1;
});

// all objects with tag "enemy" will move towards 'player' every frame
action("enemy", (e) => {
    e.move(player.pos.sub(e.pos).unit().scale(e.speed));
});

// move up 100 pixels per second every frame when "w" key is held down
keyDown("w", () => {
    player.move(0, 100);
});

用法

NPM

$ npm install kaboom

import kaboom from "kaboom";

kaboom();

add([
    text("oh hi"),
    pos(80, 40),
]);

也适用于 CommonJS ：

const kaboom = require("kaboom");

注意：要把将 Kaboom 与 NPM 结合使用，需要打包器，比如esbuild或者webpack。

Browser CDN

kaboom 全局函数：

<script src="https://unpkg.com/kaboom/dist/kaboom.js"></script>
<script>
kaboom();
</script>

或者跟 es 模块搭配使用：

<script type="module">
import kaboom from "https://unpkg.com/kaboom/dist/kaboom.mjs";
kaboom();
</script>

适用于所有支持 NPM 包的 CDN，例如 jsdelivr、skypack 。