JavaScript - Kaboom.js

Kaboom.js 让您轻松创建 JavaScript 游戏。除了控制不同的场景外，您还可以添加物理效果、检测碰撞和制作精灵。使用 Kaboom.js，您可以专注于制作引人入胜且富有创意的游戏，而无需编写复杂的代码。不妨考虑添加其他功能，例如背景、强化道具或得分，以进一步提升您的游戏体验!

Kaboom 入门

要启动 Kaboom 应用，您需要调用 Kaboom 来初始化 Kaboom 上下文 -

kaboom({
    global: true,
});

如果您在代码编辑器中构建应用，请小心将 JS 文件和 Kaboom.JS 库导入到 HTML 文件中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Kaboom Game</title>
    <script src="https://kaboomjs.com/lib/0.5.0/kaboom.js"></script>
</head>
<body>
    <script src="example.js"></script>
</body>
</html>

创建你的场景

在 Kaboom 中，一切都是场景的组成部分。场景本质上决定了游戏的外观、行为和运行方式。

kaboom({
   global: true,
});

scene("main", () => {
   //...
   }   
]);

在上面的例子中，scene 方法在我们的"主"场景中被激活，其他游戏元素在函数内部提供。最后，我们需要在结尾处使用 start 来调用场景。

加载精灵并创建玩家

现在我们必须开始将精灵"绘制"到游戏 UI 上。精灵是包含在更大场景中的二维位图，通常用于 2D 视频游戏中。在本章中，我们将使用从 Imgur 抓取的 Yeti 精灵。

为了加载精灵并构建玩家，我们将使用 load sprite 方法，输入精灵图像信息，然后在场景中创建玩家。在前面的例子中，我们为"主"场景调用 scene 方法，并将剩余的游戏元素传递给函数。最后，我们必须在结尾处使用 start 来引用场景。

kaboom({
  global: true,
});

loadRoot('https://i.imgur.com/');
loadSprite('yeti', 'OqVwAm6.png');

scene('main', () => {
  const yeti = add([
   sprite('yeti'),
   pos(80, 80),
   color(255, 188, 0),  
  ]);
});

start('main');

如果您的代码正确无误，您应该会在屏幕上看到一个雪人精灵。右键单击您的 index.html 文件，复制路径，然后将其粘贴到新的浏览器页面中。

输出

这将生成以下结果 -

我们首先将 body 组件添加到已初始化的精灵中。此方法会有效地强制您的精灵遵循"重力规则"。运行此方法后，您的精灵将开始滑出屏幕，因此我们还必须创建一个临时平台。

kaboom({
  global: true,
});

loadRoot('https://i.imgur.com/');
loadSprite('yeti', 'OqVwAm6.png');

scene('main', () => {
  const yeti = add([
   sprite('yeti'),
   pos(80, 80),
   color(255, 188, 0),  
   body(),
  ]);

  // 添加地面
  add([
    rect(width(), 12),
    pos(0, 280),
    origin('topleft'),
    solid(),
  ]);
});

start('main');

输出

这将产生以下结果 -

Kaboom 按键事件

body 方法允许你的精灵使用 jump 和 move 等方法。我们可以将这些方法与按键事件结合使用，为精灵提供更多有趣的行为。让我们为雪人添加左右移动和跳跃的能力。在你的主场景函数中添加以下代码行。

kaboom({
  global: true,
});

loadRoot('https://i.imgur.com/');
loadSprite('yeti', 'OqVwAm6.png');

scene('main', () => {
  const yeti = add([
    sprite('yeti'),
    pos(80, 80),
    color(255, 188, 0),  
    body(),
  ]);

  // Add the ground
  add([
    rect(width(), 12),
    pos(0, 280),
    origin('topleft'),
    solid(),
  ]);

  // 添加跳跃和移动的控制
  const JUMP_FORCE = 320;
  const MOVE_SPEED = 120;

  keyPress("space", () => {
    yeti.jump(JUMP_FORCE);
  });

  keyDown("left", () => {
    yeti.move(-MOVE_SPEED, 0);
  });

  keyDown("right", () => {
    yeti.move(MOVE_SPEED, 0);
  });
});

start('main');

输出

这将生成以下结果 -

添加背景图片

为了结束 Kaboom 的这一章，我们将在 UI 中添加一张背景图片，并调整其大小以适应屏幕大小。

kaboom({
   global: true,
});

loadSprite("yeti", "https://i.imgur.com/OqVwAm6.png");
loadSprite("bg", "/Users/abc/Downloads/image.jpg");

scene("main", () => {
   // 添加背景精灵
   add([
      sprite("bg"),
      scale(width() / 240, height() / 240), // 调整背景大小
      origin("topleft"),
   ]);
   
   const yeti = add([
      sprite("yeti"),
      pos(80, 80),
      color(255, 188, 0), 
      body(),
   ]);
   
   // Add the ground
   add([
      rect(width(), 12),
      pos(0, 280),
      origin("topleft"),
      solid(),
   ]);
   
   // 跳跃和移动的控制
   const JUMP_FORCE = 320;
   const MOVE_SPEED = 120;
   
   keyPress("space", () => {
      yeti.jump(JUMP_FORCE);
   });
   
   keyDown("left", () => {
      yeti.move(-MOVE_SPEED, 0);
   });
   
   keyDown("right", () => {
      yeti.move(MOVE_SPEED, 0);
   });
});

start("main");

输出

这将导致以下结果 -