2

所以，正如问题所说，我需要根据屏幕大小调整画布大小。然而，事实并非如此。我还需要按比例更新鼠标坐标。似乎我犯了一个致命的错误，即从一开始就没有考虑屏幕尺寸，因为这是我的第一个合适的游戏。我是根据我的 1080p 屏幕制作的游戏。诸如定位东西和检查鼠标坐标之类的东西都是基于 1920x1080 的画布。请帮忙！

Github 链接：

  1. 主游戏，可以运行，但大小取决于您的屏幕：https ://proqbr.github.io/powerdown/
  2. 所有文件（只有 15MB，如果您想通过下载查看）：https ://github.com/proqbr/powerdown
  3. sketch.js（关于这个的几乎主要文件）：https ://github.com/proqbr/powerdown/blob/master/sketch.js

主要是在 sketch.js 中，第 260-263 行是一些 createCanvas 行function setup()​​，未注释createCanvas(1920,1080);的是我正在使用的。在第 302-314 行是一堆 camera.zoom 行，未注释的行是camera.zoom = 1;因为在我的屏幕上主菜单不需要缩放。

第 352 行以后是一些关于知道玩家点击位置的代码，问题是这样的。我确实知道如何使用windowWidth&使画布的内容在所有屏幕上看起来都正确调整大小，windowHeight但是导致问题的是不正确的鼠标坐标。如果有人可以提供帮助，那就太好了。

如果你的游戏有问题，这里有一个快速的第二个视频游戏菜单是如何工作的，尽管它很简单：https ://youtu.be/eZZw5CmOXEE

4

1 回答 1

1

我自己想通了。对于某些值，例如在测试时是否mouseX >= 720必须将其编辑为mouseX >= 785*windowWidth/1920.

对于我使用过的一个翻译，我不得不translate(95,525)对其进行更多的修改，而这是正确工作的翻译translate(displayWidth/2-865*(windowWidth)/1920,displayHeight/2-15*(windowHeight)/1080);

至于屏幕大小调整这工作正常：

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  if(windowHeight > windowWidth){
    factor = windowHeight;
    factdiv = 1080;
  }else{
    factor = windowWidth;
    factdiv = 1920;
  }
}

我不得不弄乱这些以找出一个体面的解决方案

  1. 画布尺寸，即1920, 1080
  2. windowWidth, windowHeight
  3. 并且displayWidth, displayHeight

我还在存储库中更新了相同的内容，因此您可以从这里看到最终结果：https ://proqbr.github.io/powerdown/

于 2020-06-18T11:40:44.800 回答