英文原文正文为项目原始 README（英文），本站后续会翻译为中文，当前仅剔除图片与无关章节并统一排版。

通知

Replit 不再维护 Kaboom。你可能对社区分支 KaPlay 感兴趣。

轰

Kaboom 是一个 JavaScript 库，帮助你快速且有趣地制作游戏！

开始在 Kaboom Playground 中进行尝试

示例

// initialize context
kaboom()

// define gravity
setGravity(2400)

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

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

// press space to jump
onKeyPress("space", () => {
    // this method is provided by the "body" component above
    bean.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 of 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,
    },
])

用于描述行为的块状命令语法

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

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

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

// all objects with tag "enemy" will move towards 'player' every frame
onUpdate("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
onKeyDown("w", () => {
    player.move(0, 100)
})

用法

使用 create-kaboom 开始一个项目

启动 Kaboom 游戏最快的方法是使用 create-kaboom

$ npm init kaboom mygame

这将为你创建一个名为 mygame 的目录，里面包含我们需要的所有文件

$ cd mygame
$ npm run dev

然后打开 http://localhost:5173 并编辑 src/game.js

作为 NPM 包安装

$ npm install kaboom

import kaboom from "kaboom"

kaboom()

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

也适用于 CommonJS

const kaboom = require("kaboom")

请注意，您需要使用像 esbuild 或 webpack 这样的打包工具才能在 NPM 上使用 Kaboom

浏览器 CDN

这会导出一个全局的 kaboom 函数

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

或用于 ES 模块

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

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

文档

• v3000: https://kaboomjs.com/
• v2000: https://2000.kaboomjs.com/
• v0.5.0: https://legacy.kaboomjs.com/

开发

1. npm install 安装开发包
2. npm run dev 启动开发服务器
3. 访问 http://localhost:8000/ 并选择一个例子
4. 编辑 examples/ 里的例子进行测试

查看 CONTRIBUTION.md 获取完整信息。

社区

• Discord 服务器
• GitHub 讨论
• 推特

游戏

由 Kaboom 制作的游戏集合，由 Kaboom 精选，点击这里。

• 在 Itch.io 上
• 在 Replit 上
• 在 Newgrounds 上

杂项

• 该项目与动视的游戏 Kaboom! 无关
• 感谢 lajbel 在建立 Kaboom 社区方面的帮助
• 感谢 abrudz 提供了惊人的 APL386 字体
• 感谢 Polyducks 提供了惊人的 kitchen sink 字体 字体
• 感谢 0x72 提供了惊人的 Dungeon Tileset
• 感谢 Kenney 提供了惊人的 1-Bit Platformer Pack
• 感谢 mulfok 提供了惊人的 mulfok32 调色板
• 查找位图字体：Oldschool PC Font
• 精选于 Console 50
• 感谢 Umayr 友好地提供 “kaboom” npm 包名
• 请在 kaboom.com 购买烟花
• 如何在蹦床上做 KABOOM