有没有办法在 window 调整大小时调整 Kaboom 游戏的大小

Question

考虑以下简单的kaboom“游戏”：

kaboom();

function makeWallComps(name, x, y, w, h) {
  return [
    name,
    "wall",
    origin("center"),
    rect(w, h),
    pos(x, y),
    outline(),
    area()
  ];
}

let leftWall = add(makeWallComps("left", 5, height() / 2, 10, height()));
let rightWall = add(makeWallComps("right", width() - 5, height() / 2, 10, height()));
let topWall = add(makeWallComps("top", width() / 2, 5, width() - 20, 10));
let bottomWall = add(makeWallComps("bottom", width() / 2, height() - 5, width() - 20, 10));

let obj = add([
  "obj",
  origin("center"),
  rect(20, 20),
  pos(width() / 2, height() / 2),
  outline(),
  area(),
  { dir: rand(-180, 180) }
]);

obj.use(move(obj.dir, 100));

// bounce
obj.collides("wall", function huh(obstacle) {
  if (obstacle.is("left")) {
    console.log("left");
    if (obj.dir < -90) {
      obj.dir = -180 - obj.dir;
    } else if (obj.dir > 90) {
      obj.dir = 180 - obj.dir;
    }
  } else if (obstacle.is("right")) {
    console.log("right");
    if (obj.dir < 0) {
      obj.dir = -180 - obj.dir;
    } else {
      obj.dir = 180 - obj.dir;
    }
  } else if (obstacle.is("top")) {
    obj.dir *= -1;
  } else if (obstacle.is("bottom")) {
    obj.dir *= -1;
  }
  obj.use(move(obj.dir, 100));
});

window.addEventListener(
  'resize',
  () => {
    // I want to resize the game window
    // This does not work: 
    // canvas.width = document.documentElement.clientWidth;
    // canvas.height = document.documentElement.clientHeight;
    
    leftWall.use(pos(5, height() / 2));
    leftWall.use(rect(10, height()));
    rightWall.use(pos(width() - 5, height() / 2));
    rightWall.use(rect(10, height()));
    topWall.use(pos(width() / 2, 5));
    topWall.use(rect(width() - 20, 10));
    bottomWall.use(pos(width() / 2, height() - 5));
    bottomWall.use(rect(width() - 20, 10));
  }
);

<script src="https://cdn.jsdelivr.net/npm/kaboom@2000.0.0-beta.24/dist/kaboom.min.js"></script>

我希望能够调整 canvas 的大小并通过内置的 kaboom 函数反映出来。不幸的是，明确设置 canvas 尺寸不起作用，并且 KaboomCtx 似乎没有任何调整大小的功能。有什么方法可以调整卡布姆游戏的大小吗？

Answer 1

您可以使用 kaboom 的内置 scale() 功能调整游戏大小。初始化kaboom时必须是运行，如：

kaboom({
    scale: 4,
});
//This multiplies game size by 4
//your kaboom code here

Here's the official documentation for scale() function.

注意：更改kaboom的比例后，它可能会改变精灵的位置，因此您可能需要重新调整它们。

Answer 2

好吧，我通读了一些 Kaboom 源代码，发现这在初始化后非常严重不可修改。

const app = appInit({
    // gconf.width is the initial width specified in the call to kaboom()
    width: gconf.width,
    height: gconf.height,
    scale: gconf.scale,
    crisp: gconf.crisp,
    canvas: gconf.canvas,
    root: gconf.root,
    stretch: gconf.stretch,
    touchToMouse: gconf.touchToMouse ?? true,
    audioCtx: audio.ctx,
});

const gfx = gfxInit(app.gl, {
    background: gconf.background ? rgb(gconf.background) : undefined,
    width: gconf.width,
    height: gconf.height,
    scale: gconf.scale,
    texFilter: gconf.texFilter,
    stretch: gconf.stretch,
    letterbox: gconf.letterbox,
});

// This creates functions width() and height() that just returns the values passed to gfxInit()
const {
    width,
    height,
} = gfx;

原来已经有 open feature request 了。根据代码的当前状态，实施起来似乎很繁琐。

有没有办法在 window 调整大小时调整 Kaboom 游戏的大小

Is there a way to resize a Kaboom game when the window is resized

repl.it

kaboom