HTML代码触发Out of Memory错误求助（新购设备）

我一眼就看出来了，你代码里的while (score != 10)是个无限同步循环，直接把浏览器主线程卡死，还在不停重复绘制文本，最后把内存耗干抛出错误。

为啥循环停不下来？

• 这个循环会一直占用主线程，浏览器根本没机会处理任何点击事件，你写的onDown函数永远不会触发。
• 就算点击能触发，你在onDown里写的是c.score++，根本没更新外面的score变量，score永远是0，循环自然永远退不出去。

另外你还混淆了原生Canvas和p5.js的语法，比如c.fill(255,153,0)、mouseX这些都是p5的写法，原生Canvas根本不认识，这也会导致胜利画面没法正常绘制。

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
<head> 
  <title>A canvas</title> 
  <style type="text/css"> 
    canvas { border: 1px solid black; } 
  </style>
</head> 
<body> 
  <canvas id="canvas" height="1000" width="1000"></canvas> 
  <script> 
    var canvas = document.getElementById('canvas'); 
    var c = canvas.getContext('2d'); 
    var score = 0;
    var lastMousePos = { x: 0, y: 0 };

    // 一开始先画出游戏提示
    drawGameUI();

    // 绑定点击事件
    canvas.addEventListener('mousedown', onDown, false);
    // 监听鼠标移动，记录坐标（用来画胜利图形）
    canvas.addEventListener('mousemove', function(e) {
      const rect = canvas.getBoundingClientRect();
      lastMousePos.x = e.clientX - rect.left;
      lastMousePos.y = e.clientY - rect.top;
    });

    function onDown(){
      console.log('点击生效！');
      score++;
      // 每次点击后更新画布上的分数
      drawGameUI();
      
      // 检查是否达标
      if(score === 10){
        drawWinScreen();
        // 胜利后就不让继续点击了
        canvas.removeEventListener('mousedown', onDown);
      }
    }

    function drawGameUI() {
      // 先清空画布，不然文本会叠成一团
      c.clearRect(0, 0, canvas.width, canvas.height);
      c.font = "30px Comic Sans MS";
      c.fillText(`当前分数: ${score}`, 500, 200);
      c.fillText("点击屏幕10次，赢下史上最难游戏！", 50, 300);
    }

    function drawWinScreen() {
      c.clearRect(0, 0, canvas.width, canvas.height);
      
      // 用原生Canvas语法画胜利图形
      c.fillStyle = 'rgb(255, 153, 0)';
      // 画椭圆要先开路径
      c.beginPath();
      c.ellipse(lastMousePos.x-90, lastMousePos.y-30, 75, 25, 0, 0, Math.PI * 2);
      c.fill();
      
      c.beginPath();
      c.ellipse(lastMousePos.x-90, lastMousePos.y-80, 85, 35, 0, 0, Math.PI * 2);
      c.fill();
      
      c.fillRect(lastMousePos.x-103, lastMousePos.y-80, 25, 45);
      c.fillRect(lastMousePos.x-132, lastMousePos.y-155, 85, 75);
      
      // 画胜利文本
      c.fillStyle = 'rgb(255, 0, 0)';
      c.font = "50px Comic Sans MS";
      c.fillText("YOU WON", lastMousePos.x-205, lastMousePos.y-170);
    }
  </script> 
</body> 
</html>

• 删掉了死循环，改用事件驱动的方式更新分数，这样浏览器主线程不会被卡死，点击事件能正常响应。
• 把c.score++改成score++，确保分数能正确累加。
• 新增了drawGameUI函数，每次点击后清空画布再重绘，避免文本重叠。
• 把p5.js的语法换成原生Canvas的正确写法，比如用fillStyle设置颜色、beginPath开启路径等。
• 胜利后移除点击事件，防止用户继续点击加分。

这样改完后，代码就能正常运行，再也不会出现内存溢出的问题啦！

内容的提问来源于stack exchange，提问作者i_need_help