因此，我尝试用html画布和JavaScript编写《生命游戏》，并且在许多在线教程的帮助下，我设法编写了一些我仍然相信的代码。但是当我在浏览器中启动html页面并启动游戏本身时， （也就是说，我能够选择起始单元格），该站点的运行速度令人难以置信。我用console.log（...）检查了代码到多远，所以发现它死在主循环中的某个地方。我不明白的一件事是，当检查某些for循环变量的值时，似乎它们超出了for中给定的限制。谢谢您的帮助，很可能我遗漏了一些明显的东西。
// variables etc.
var pGame = 0;
var sGame = 0;
const sc = 20;
const c = document.getElementById("canvas");
c.addEventListener("mousedown", fillPixel);
const ctx = c.getContext("2d");
ctx.scale(sc, sc);
const columns = c.width / sc;
const rows = c.height / sc;
function createTable() {
return new Array(columns).fill(null)
.map(() => new Array(rows).fill(0));
}
var tableOne = createTable();
var tableTwo = createTable();
//functions
function fillPixel(event) {
if (sGame == 0) {
var x = Math.floor((event.clientX - canvas.offsetLeft - 5) / sc);
var y = Math.floor((event.clientY - canvas.offsetTop - 5) / sc);
if (tableOne[x][y] == 0) {
ctx.fillRect(x, y, 1, 1);
tableOne[x][y] = 1;
console.log("filled x" + x + " y" + y);
}else{
ctx.clearRect(x, y, 1, 1);
tableOne[x][y] = 0;
console.log("cleared x" + x + " y" + y);
}
}
}
function pauseGame() {
if (sGame == 1) {
if (pGame == 0) {
pGame = 1;
document.getElementById("b1").innerHTML = "resume";
}else{
pGame = 0;
document.getElementById("b1").innerHTML = "pause";
startGame();
}
}
}
function resetGame(){
sGame = 0;
pGame = 0;
document.getElementById("b1").innerHTML = "pause";
tableOne = createTable();
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function startGame() {
sGame = 1;
console.log("while");
while (pGame == 0) {
tableOne = createTable();
for (let col = 0; col < tableOne.length; col++){
for (let row = 0; row < tableOne[col].length; row++){
console.log("col" + col + " row" + row);
const cell = tableOne[col][row];
let neighbours = 0;
for (let i = -1; i < 2; i++){
for (let j = -1; j < 2; j++){
if (i == 0 && j == 0) {
continue;
}
const xCell = col + i;
const yCell = row + j;
if (xCell >= 0 && yCell >= 0 && xCell < 70 && yCell < 20) {
neighbours += tableOne[xCell][yCell];
}
}
}
console.log("applying rules");
if (cell == 1 && (neighbours == 2 || neighbours == 3)) {
tableTwo[col][row] = 1;
}else if (cell == 0 && neighbours == 3) {
tableTwo[col][row] = 1;
}
}
}
console.log("drawing");
tableOne = tableTwo.map(arr => [...arr]);
tableTwo = createTable();
for (let k = 0; k < tableOne.length; k++){
for (let l = 0; l < tableOne[k]length; l++){
if (tableOne[k][l] == 1) {
ctx.fillRect(k, l, 1, 1);
}
}
}
}
}body {
background-color: #F1E19C;
margin: 0;
}
.button {
background-color: #2C786E;
color: #FFFFFF;
border: none;
padding: 10px 20px;
text-align: center;
font-size: 16px;
}
#header {
background-color: #2C786E;
font-family: 'Times New Roman';
padding: 10px 15px;
color: #FFFFFF;
font-size: 20px;
}
#footer {
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
text-align: center;
font-family: 'Roboto';
}
#canvas {
border: 5px solid #813152;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
display: block;
cursor: crosshair
}
#btns {
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="tres.css">
</head>
<body>
<div id="header">
<h1>Game of Life</h1>
</div>
<p>
<canvas id="canvas" width="1400" height="400"></canvas>
</p>
<p id="btns">
<button class="button" onclick="startGame()"> start </button>
<button class="button" id="b1" onclick="pauseGame()"> pause </button>
<button class="button" onclick="resetGame()"> clear </button>
</p>
<div id="footer">
<p>©2020</p>
</div>
<script src="dos.js"></script>
<body/>
</html>JavaScript必须记住的一件事是，它是一种单线程语言。而且，当任何JavaScript代码运行时，页面上的任何交互都将变得不可能。浏览器中的JavaScript主要是由event
驱动的，您可以一次执行一小段代码，然后进入空闲状态。然后，当事件发生时（单击按钮，计时器，HTTP响应），您将为该事件执行处理程序。正如@Jacob指出的那样，您无法在JavaScript中永远循环。浏览器中的JavaScript期望您具有响应事件然后退出的代码，以便浏览器可以处理更多事件。事件包括脚本加载，页面加载，计时器，鼠标事件，键盘事件，触摸事件，网络事件等。