js五子棋， 游戏主循环使用window.setInterval，大概在十几秒之后电脑卡死

helloxiaoc

代码中没有涉及到过多的变量读写，程序执行过程中变量的值正常，任务管理器cpu，内存占用正常，但是电脑就是会变卡， 检查了多遍就是不解， 求解决！！！！

1. // 全局属性
   
2. var c = null,
   
3.     ctx = null,
   
4.     // 地图
   
5.     map = null,
   
6.     // 黑棋、白棋，黑棋预落子，白棋预落子
   
7.     blackPiece = null,
   
8.     whitePiece = null,
   
9.     blackPieceA = null,
   
10.     whitePieceA = null,
    
11.     // 格子，棋子的大小
    
12.     size = null,
    
13.     // size的一半
    
14.     halfSize = null,
    
15.     // 画线的数量
    
16.     number = null,
    
17.     // 鼠标所在的X，Y坐标
    
18.     // mapX = null,
    
19.     // mapY = null,
    
20.     // 频繁读取的坐标变量
    
21.     x = null,
    
22.     y = null,
    
23.     // 游戏帧率
    
24.     fps = null;
    
25. 
    
26. window.onload = function () {
    
27. 
    
28.     c = document.getElementById("myCanvas");
    
29.     ctx = c.getContext("2d");
    
30.     ctx.strokeStyle = "#444041";
    
31.     fps = 1000 / 10;
    
32.     size = 50;
    
33.     halfSize = size / 2;
    
34.     number = 16;
    
35.     // mapX = halfSize;
    
36.     // mapY = halfSize;
    
37. 
    
38.     blackPiece = document.createElement('img');
    
39.     blackPiece.src = "./imgs/black.png";
    
40. 
    
41.     whitePiece = document.createElement('img');
    
42.     whitePiece.src = "./imgs/white.png";
    
43. 
    
44.     blackPieceA = document.createElement('img');
    
45.     blackPieceA.src = "./imgs/_black.png";
    
46. 
    
47.     whitePieceA = document.createElement('img');
    
48.     whitePieceA.src = "./imgs/_white.png";
    
49.     // 地图的初始化, 1-黑棋, 2-白棋, 0-无子
    
50.     initMap();
    
51.     console.log(map);
    
52.     // 游戏开始
    
53.     begin();
    
54. };
    
55. 
    
56. function initMap() {
    
57.     map = [];
    
58.     for (let x = 0; x < number; x++) {
    
59.         map[x] = [];
    
60.         for (let y = 0; y < number; y++) {
    
61.             map[x][y] = 0;
    
62.         }
    
63.     }
    
64. }
    
65. 
    
66. function drawCheckerboard() {
    
67.     // 准备重绘棋盘
    
68.     ctx.clearRect(0, 0, c.width, c.height);
    
69.     // 画棋盘线条
    
70.     for(let x = 0; x < number; x++) {
    
71.         ctx.moveTo((x + 1) * size, size);
    
72.         ctx.lineTo((x + 1) * size, number * size);
    
73.     }
    
74.     for(let y = 0; y < number; y++) {
    
75.         ctx.moveTo(size, (y + 1) * size);
    
76.         ctx.lineTo(number * size, (y + 1) * size);
    
77.     }
    
78.     ctx.stroke();
    
79.     // 绘制棋盘上的棋子
    
80.     for (let x = 0; x < number; x++) {
    
81.         for (let y = 0; y < number; y++) {
    
82.             if(1 == map[x][y]) {
    
83.                 ctx.drawImage(blackPiece, (x + 0.5) * size, (y + 0.5) * size, size, size);
    
84.             }
    
85.             else if(2 == map[x][y]) {
    
86.                 ctx.drawImage(whitePiece, (x + 0.5) * size, (y + 0.5) * size, size, size);
    
87.             }
    
88.         }
    
89.     }
    
90. }
    
91. 
    
92. function drawPos() {
    
93.     // 判断鼠标是否在棋盘
    
94.     if(x < halfSize || y < halfSize ||
    
95.         x > c.width - halfSize || y > c.height - halfSize) {
    
96.         return;
    
97.     }
    
98.     console.log("mapX: ", mapX, " mapY:", mapY)
    
99.     console.log("   x: ", x, "   y: ", y);
    
100. 
     
101. 
     
102.     ctx.drawImage(whitePieceA, x, y, size, size);
     
103. }
     
104. 
     
105. function begin() {
     
106.     window.setInterval(
     
107.         // 获取当前坐标
     
108.         function () {
     
109.             c.onmousemove = function (e) {
     
110.                 // 如果此时落子，则落在(x,y)处, 圆心为(x+halfSize, y+halfSize)
     
111.                 x = Math.floor((e.layerX + halfSize) / size) * size - halfSize;
     
112.                 y = Math.floor((e.layerY + halfSize) / size) * size - halfSize;
     
113.                 return;
     
114.             }
     
115.             drawCheckerboard();
     
116.             drawPos();
     
117.         },
     
118.         fps
     
119.     );
     
120. }

复制代码

                               
登录/注册后可看大图

上面是代码， 下面有压缩包，感谢解答！！！

sukiwhip

木有发现压缩包。。。

不二如是

下载包没看到，没进行代码测试。

按照你说的，往往是“内存泄露”，循环没有“终止”，CPU 跑满，浏览器自动杀掉“进程”

helloxiaoc

sukiwhip 发表于 2020-2-20 00:53
木有发现压缩包。。。

掉了， 尴尬

helloxiaoc

不二如是 发表于 2020-2-20 08:14
下载包没看到，没进行代码测试。

按照你说的，往往是“内存泄露”，循环没有“终止”，CPU 跑满，浏览器 ...

任务管理器里面内存和cpu都在20一下， 但就是很卡

陈尚涵

其实，很多编程语言都有这个内存泄漏的问题。你可以判断，如果这个Interval让CPU耗到一定高度，马上刷新页面 ，重新启动Interval