如何根据屏幕大小正确调整 canvas 大小？ Javascript (p5.js)

Question

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

Github 链接：

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

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

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

万一您这边的游戏有问题，这里有一个快速的第二个视频如何游戏菜单工作，尽管它非常简单：https://youtu.be/eZZw5CmOXEE

Answer 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;
  }
}

我不得不弄乱这些来找出一个像样的解决方案

canvas 维度即 1920, 1080
windowWidth, windowHeight
还有displayWidth, displayHeight

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

如何根据屏幕大小正确调整 canvas 大小？ Javascript (p5.js)

How to properly resize canvas according to screen size? Javascript (p5.js)

javascript

canvas

resize

p5.js

mouse-coordinates