window.onload = function () { var canvas = document.getElementById("board"); var ctx = canvas.getContext("2d"); var control = this.document.getElementById("ctr"); var controlClear = this.document.getElementById("ctrclear"); var controlShuffle = this.document.getElementById("ctrshuffle"); var inputFrames = this.document.getElementById("frames"); var running = false; var tileSize = 5; var boardSizeX = window.innerWidth - 5; var boardSizeY = window.innerHeight - 70; boardSizeX -= boardSizeX % tileSize; boardSizeY -= boardSizeY % tileSize; var frames = 15; inputFrames.value = 15; canvas.style.width = boardSizeX + 1 + "px"; canvas.style.height = boardSizeY + 1 + "px"; canvas.width = boardSizeX + 1; canvas.height = boardSizeY + 1; canvas.style.backgroundColor = "#aaaaaa"; var boardState = []; var loopY = boardSizeY / tileSize; var loopX = boardSizeX / tileSize; for (y = 0; y < loopY; y++) { var boardLine = []; for (x = 0; x < loopX; x++) { var living = (Math.random() * 100) < 25; boardLine.push(living); ctx.fillStyle = living ? "#ffffff" : "#000000"; ctx.fillRect(x * tileSize + 1, y * tileSize + 1, tileSize - 1, tileSize - 1); } boardState.push(boardLine); } update = function () { var newBoardState = []; var living, xm, xp, ym, yp; for (y = 0; y < loopY; y++) { var newBoardLine = []; for (x = 0; x < loopX; x++) { living = 0; xm = x - 1; if (xm < 0) xm = loopX - 1; ym = y - 1; if (ym < 0) ym = loopY - 1; xp = x + 1; if (xp >= loopX) xp = 0; yp = y + 1; if (yp >= loopY) yp = 0; if (boardState[ym][xm]) living++; if (boardState[ym][x]) living++; if (boardState[ym][xp]) living++; if (boardState[y][xm]) living++; if (boardState[y][xp]) living++; if (boardState[yp][xm]) living++; if (boardState[yp][x]) living++; if (boardState[yp][xp]) living++; if (boardState[y][x]) { if (living == 2 || living == 3) { newBoardLine.push(true); } else { newBoardLine.push(false); ctx.fillStyle = "#000000"; ctx.fillRect(x * tileSize + 1, y * tileSize + 1, tileSize - 1, tileSize - 1); } } else { if (living == 3) { newBoardLine.push(true); ctx.fillStyle = "#ffffff"; ctx.fillRect(x * tileSize + 1, y * tileSize + 1, tileSize - 1, tileSize - 1); } else { newBoardLine.push(false); } } } newBoardState.push(newBoardLine); } boardState = newBoardState.splice(0); }; canvas.onclick = function (event) { var x = Math.floor((event.offsetX - 2) / tileSize); var y = Math.floor((event.offsetY - 2) / tileSize); boardState[y][x] = !boardState[y][x]; ctx.fillStyle = (boardState[y][x]) ? "#ffffff" : "#000000"; ctx.fillRect(x * tileSize + 1, y * tileSize + 1, tileSize - 1, tileSize - 1); }; var interval; control.onclick = function () { if (running) { control.innerText = "Start"; clearInterval(interval); } else { control.innerText = "Stop"; interval = setInterval(update, 1000 / frames); } running = !running; }; controlClear.onclick = function () { for (y = 0; y < loopY; y++) { for (x = 0; x < loopX; x++) { boardState[y][x] = false; ctx.fillStyle = "#000000"; ctx.fillRect(x * tileSize + 1, y * tileSize + 1, tileSize - 1, tileSize - 1); } } }; controlShuffle.onclick = function () { for (y = 0; y < loopY; y++) { for (x = 0; x < loopX; x++) { boardState[y][x] = (Math.random() * 100) < 25; ctx.fillStyle = (boardState[y][x]) ? "#ffffff" : "#000000"; ctx.fillRect(x * tileSize + 1, y * tileSize + 1, tileSize - 1, tileSize - 1); } } }; inputFrames.onchange = function (event) { frames = event.target.value; if (running) { clearInterval(interval); interval = setInterval(update, 1000 / frames); } }; control.click(); };

Game of Life