javascript - 调整画布大小可为更大的屏幕提供便利。 不确定如何使功能公平(Resizing canvas size gives advantage to larger screens. Not sure how to keep the functionality while making it fair)

Question

So I am trying to learn javascript by making a game where you click on a canvas to move a circle and you have to dodge multiple other circles coming in your direction.

(因此，我正在尝试通过制作一个游戏来学习JavaScript，该游戏是您在画布上单击以移动一个圆，并且您必须避开朝您方向延伸的其他多个圆。)

I am close to the final result but I just realized that the larger your screen is, the easier it is for you to play.

(我接近最终结果，但我刚刚意识到，屏幕越大，播放起来就越容易 。)

The reason is that the enemies spawn at the edges of the canvas, so if the canvas is bigger, you have more time to react to them since their speed doesn't change.

(原因是敌人在画布的边缘生成，因此，如果画布较大，则由于它们的速度不变，因此您有更多时间对其做出反应。)

The game is supposedly refreshing around 60fps and each time it resizes the canvas depending on if you change your window size.

(据推测，该游戏以60fps的速度刷新，并且每次根据您是否更改窗口大小来调整画布大小时都会刷新。)

The only thing I can think of is increasing the speed of enemies with the size increase but I don't know if there's any other way to go about this.

(我唯一能想到的就是随着大小的增加而增加敌人的速度，但是我不知道是否还有其他方法可以解决这个问题。)

Maybe I could increase the size of the of the player and the enemies to accommodate the change in window size but I don't know which is better or how to make sure I am consistent with the ratio increase.

(也许我可以增加播放器和敌人的大小以适应窗口大小的变化，但我不知道哪个更好，或者如何确保我与比率增加保持一致。)

Any suggestions would be much appreciated.

(任何建议将不胜感激。)

Thanks for your time

(谢谢你的时间)

Here's my full code: https://jsfiddle.net/r2f6eb89/2/ It doesn't actually run on this site so it's just a reference for my logic.

(这是我的完整代码： https : //jsfiddle.net/r2f6eb89/2/它实际上并未在此站点上运行，因此仅是我的逻辑参考。)

Here are the resizing functions:

(以下是调整大小的功能：)

/*
function setCanvasSize() {
  //c.width = window.innerWidth-100;
 //c.height = window.innerHeight-100;

if (window.innerWidth < window.innerHeight) {
c.width = window.innerWidth - 150;
c.height = window.innerWidth - 150;
} else {
   c.width = window.innerHeight - 150;
   c.height = window.innerHeight - 150;
}
}
*/
 function setCanvasSize() {
 c.width = 600;
 c.height = 600;
}

  ask by BillTaha translate from so

Answer 1

等待大神答复