我只是在玩 HTML，但是当我加载我的代码时，我得到了一个错误。错误代码：内存不足答案

【问题标题】：Im just playing around with HTML but when I load my code, I get an error. Error Code: Out of Memory我只是在玩 HTML，但是当我加载我的代码时，我得到了一个错误。错误代码：内存不足
【发布时间】：2020-05-09 14:32:02
【问题描述】：

代码很短，不可能是因为这台笔记本电脑是 4 个月前买的，系统过时了。每次我单击 index.html 文件时，加载需要 50 秒，然后出现错误。我不确定还能做什么，因为 Microsoft 帮助团队毫无用处。我不确定代码中是否有任何错误，因为我无法运行它。任何帮助表示赞赏。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>A canvas</title>
  </head>
  <style type="text/css">
      canvas {
        border: 1px solid black;
      }
  </style>
  <body>
    <canvas id="canvas" height="1000px" width="1000px"></canvas>
    <script>

        var canvas = document.getElementById('canvas');
        var c = canvas.getContext('2d');
        canvas.addEventListener('mousedown', onDown, false);

        var fireWall = false;
        var score = 0;

        while (score != 10){
          c.font = "30px Comic Sans MS"
          c.fillText(score, 500, 200)
          c.font = "30px Comic Sans MS"
          c.fillText("Click the Screen 10 Times to Win the Hardest Game Ever!!!", 50,300);

          function onDown(){
            console.log('working')
            c.score++;
            }

          if(score === 10){
              fireWall = true;
              break;
          }
        }

        if(fireWall === true){
            c.fill(255, 153, 0);
            c.noStroke();
            c.ellipse(mouseX-90, mouseY-30, 75, 25);
            c.ellipse(mouseX-90, mouseY-80, 85, 35);
            c.rect(mouseX-103, mouseY-80, 25,45);
            c.rect(mouseX-132, mouseY-155, 85,75);
            c.textSize(50);
            c.fill(255,0,0);
            c.text("YOU WON", mouseX-205, mouseY-170);
        }

    </script>
  </body>
</html>

com/jywPv.png

【问题讨论】：

您的while 循环永远不会更改score 的值。因此它永远不会退出。
永远不要将函数放入循环中。

标签： javascript html memory

【解决方案1】：

const c = document.getElementById('canvas').getContext('2d');

const game = { // You could use an Object literal to store stuff
  fireWall: false,
  score: 0,
  mouseX: 0,
  mouseY: 0,
};

const draw = () => { // Create a function to handle drawing

  // Don't forget to clear the canvas before painting
  c.clearRect(0, 0, c.canvas.width, c.canvas.height);
  c.font = "30px Comic Sans MS";
  
  if (game.fireWall) {
    c.fillText("YOU WON", game.mouseX-80, game.mouseY-5);
  } else {
    c.fillText(game.score, 500, 200); // Retrieve the score from game Object
    c.fillText("Click the Screen 10 Times to Win the Hardest Game Ever!!!", 50, 300);
  }
}

const onDown = (ev) => { // Don't forget the ev Event!

  if (game.fireWall) return; // Prevent additional clicks if firewall reached

  const bcr = c.canvas.getBoundingClientRect();
  game.mouseX = ev.clientX - bcr.x;
  game.mouseY = ev.clientY - bcr.y;
  game.score++;

  if (game.score >= 10) {
    game.fireWall = true;
  }
  draw();
}

draw(); // First draw!
c.canvas.addEventListener('mousedown', onDown); // And draw on click

canvas {
  border: 1px solid black;
}

&lt;canvas id="canvas" height="1000px" width="1000px"&gt;&lt;/canvas&gt;

【讨论】：