while loop breaking html canvas 游戏

Question

所以我正在尝试使用 html canvas 和 js 制作游戏，我在 characters/items 中产卵，但有时它们会聚在一起，所以我写了一会儿循环以继续重新生成它们，直到它们之间有一定的差距。但是，每当我插入 while 循环时，game/browser freezes/crashes。我做错了什么吗？

我的代码：

let mx = Math.floor(Math.random() * (Math.floor(1536) - Math.ceil(512)) + Math.ceil(512));
let m = new Image;
m.src = "./Mushroom.png";

let bx = Math.floor(Math.random() * (Math.floor(3072) - Math.ceil(512)) + Math.ceil(512));
let b = new Image;
b.src = "./Bee.png";

let cx = Math.floor(Math.random() * (Math.floor(4608) - Math.ceil(512)) + Math.ceil(512));
let c = new Image;
c.src = "./Coin.png";

while (true) {
  if (mx - bx < 128 || mx - cx < 128 || bx - mx < 128 || bx - cx < 128 || cx - mx < 128 || cx - bx < 128) {
    mx = Math.floor(Math.random() * (Math.floor(1536) - Math.ceil(512)) + Math.ceil(512));
    bx = Math.floor(Math.random() * (Math.floor(3072) - Math.ceil(512)) + Math.ceil(512));
    cx = Math.floor(Math.random() * (Math.floor(4608) - Math.ceil(512)) + Math.ceil(512));
  } else {
    break;
  };
};

Answer 1

您创建了一个永不中断的无限循环，因为 if 条件始终为真（请参阅 Vilx 的回答）。

while (true) {
  if (true)
    ...
  } else {
    break;
  };
}

这会导致浏览器冻结。

总的来说：创建一个确保距离的函数，并在 items/characters 的每次移动后调用它。确保不要在无限循环中也计算 items/characters 的移动，而是使用 setInterval 来调用 a) 计算移动和 b) 确保项目分离的函数.

示例（这仍然在做一些奇怪的事情，但它至少有效）- 不知道你的最终 objective 是什么。我还纠正了其他一些小错误。享受吧！

<html>
<head>
<script type="text/javascript" type="text/javascript">   
function nextMove() {
let mx = Math.floor(Math.random() * (Math.floor(1536) - Math.ceil(512)) + Math.ceil(512));
let m = new Image();
m.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABySURBVDhP7ZFLDsAgCES9/7V6MDpkUBFJ1HbRTV9i5DPPjUUyyoQtRuKU0WuCcwtVhj7VPMHvzdIk3rdq0yTN1+vIJPTfyQ9MouYvH6Dmd/+Mc+rTVIsX2PSbCXoFlr43wdAArNMnOLdQJfaEUY8tPCI3hStcGseO1cgAAAAASUVORK5CYII=";

let bx = Math.floor(Math.random() * (Math.floor(3072) - Math.ceil(512)) + Math.ceil(512));
let b = new Image();
b.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABySURBVDhP7ZFLDsAgCES9/7V6MDpkUBFJ1HbRTV9i5DPPjUUyyoQtRuKU0WuCcwtVhj7VPMHvzdIk3rdq0yTN1+vIJPTfyQ9MouYvH6Dmd/+Mc+rTVIsX2PSbCXoFlr43wdAArNMnOLdQJfaEUY8tPCI3hStcGseO1cgAAAAASUVORK5CYII=";

let cx = Math.floor(Math.random() * (Math.floor(4608) - Math.ceil(512)) + Math.ceil(512));
let c = new Image();
c.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABySURBVDhP7ZFLDsAgCES9/7V6MDpkUBFJ1HbRTV9i5DPPjUUyyoQtRuKU0WuCcwtVhj7VPMHvzdIk3rdq0yTN1+vIJPTfyQ9MouYvH6Dmd/+Mc+rTVIsX2PSbCXoFlr43wdAArNMnOLdQJfaEUY8tPCI3hStcGseO1cgAAAAASUVORK5CYII=";

  if (mx - bx < 128 || mx - cx < 128 || bx - mx < 128 || bx - cx < 128 || cx - mx < 128 || cx - bx < 128) {
    mx = Math.floor(Math.random() * (Math.floor(1536) - Math.ceil(512)) + Math.ceil(512));
    bx = Math.floor(Math.random() * (Math.floor(3072) - Math.ceil(512)) + Math.ceil(512));
    cx = Math.floor(Math.random() * (Math.floor(4608) - Math.ceil(512)) + Math.ceil(512));
  }

let myCanvas = document.getElementById('myCanvas');
myCanvas.appendChild(m); 
myCanvas.appendChild(b); 
myCanvas.appendChild(c); 

m.style.marginLeft = mx;
m.style.martinTop = 100;
b.style.marginLeft = bx;
b.style.martinTop = 100;
c.style.marginLeft = cx;
c.style.martinTop = 100;
}

var myIntervalTimer = setInterval(nextMove, 100); // call every 100 milliseconds
</script>
<body id='myCanvas'>
</body>
</html>

Answer 2

循环将是无限的，因为它永远不会到达 break。那是因为您的 if 语句将始终采用第一个分支。考虑：

if ( a-b < 128 || b-a < 128 ) {
    console.log("yay");
}

无论 a 或 b 中的值是什么，条件始终为真。

你想要的是：

if ( Math.abs(a-b) < 128 ) {
    console.log("yay");
}

while loop breaking html canvas 游戏

While loop breaking html canvas game

html

javascript

canvas

html5-canvas