时间戳

首页 > 解决方案 > 调整窗口大小时有没有办法调整 Kaboom 游戏的大小

repl.it - 调整窗口大小时有没有办法调整 Kaboom 游戏的大小

问题描述

考虑以下简单的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>

我希望能够调整画布的大小并通过内置的 kaboom 函数反映出来。不幸的是，显式设置画布尺寸不起作用，并且KaboomCtx似乎没有任何调整大小的功能。有没有办法调整kaboom游戏的大小？

标签： repl.itkaboom

解决方案

好吧，我通读了一些 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;

事实证明，已经有一个开放的功能请求。根据代码的当前状态，实现起来似乎很麻烦。

推荐阅读