const globals={ timer: null, timerRuns: false, fps: 18, lastSelectedCellX: 0, lastSelectedCellY: 0, mouseDown: false, mouseUp: false, cellSize: 15, gol: null, rect: null, ctx: null, paintLivingCell: paintLivingCellNormal, paintDeadCell: paintDeadCellNormal, paintCells: paintCellsNormal, discoMode: false, }; const audio = new Audio('https://cdn.discordapp.com/attachments/693566381773553685/868888442656940062/output.m4a'); const elements={ inputCellSize: null, labelFPS: null, canvas: null, btnStart: null, btnStop: null, btnNextGen: null, btnReset: null, container: null, }; const onResize = function() { elements.canvas.width = elements.sizeObtainer.offsetWidth; elements.canvas.height = elements. sizeObtainer.offsetHeight-elements.container.offsetHeight; globals.rect = elements.canvas.getBoundingClientRect(); keepCellsOnGridSizeChange(); changeBtnDisabledStateBasedOnLivingCells(); updateView(); } const onWindowMouseUp= function(e) { globals.mouseDown = false; globals.mouseUp = true; } const onCanvasMouseDown= function(e) { globals.mouseDown = true; globals.mouseUp = false; const selectedCellX = parseInt( (e.clientX - globals.rect.left) / globals.cellSize); const selectedCellY = parseInt( (e.clientY - globals.rect.top) / globals.cellSize); globals.lastSelectedCellX = selectedCellX; globals.lastSelectedCellY = selectedCellY; userSelectedCell(selectedCellX, selectedCellY); } const onCanvasMouseMove= function(e) { if (globals.mouseDown && !globals.mouseUp) { const selectedCellX = parseInt( (e.clientX - globals.rect.left) / globals.cellSize, ); const selectedCellY = parseInt( (e.clientY - globals.rect.top) / globals.cellSize); if ( globals.lastSelectedCellX != selectedCellX || globals.lastSelectedCellY != selectedCellY) { globals.lastSelectedCellX = selectedCellX; globals.lastSelectedCellY = selectedCellY; userSelectedCell(selectedCellX, selectedCellY); } } } const onClickNextGeneration= function() { globals.gol.nextGeneration(); globals.paintCells(); } const onResetClick= function() { reset(); elements.btnNextGen.disabled = true; elements.btnStart.disabled = true; elements.btnReset.disabled = true; elements.btnStop.disabled = true; } const onFPSChange= function(element) { globals.fps = element.value; elements.labelFPS.textContent =globals.fps; if (globals.timerRuns) { clearInterval(globals.timer); startTimer(globals.fps); } } const onCellSizeChange= function(element) { globals.cellSize = element.value; elements.canvas.width = elements.sizeObtainer.offsetWidth; keepCellsOnGridSizeChange(); changeBtnDisabledStateBasedOnLivingCells(); updateView(); } const onClickStart= function() { startTimer(globals.fps); if (globals.discoMode) { audio.play(); } } const onDiscoModeClick= function(element) { if (element.checked) { globals.paintDeadCell = paintDeadCellDisco; globals.paintLivingCell = paintLivingCellDisco; globals.paintCells = paintCellsDisco; globals.discoMode = true; if (globals.timerRuns) { audio.play(); } } else { globals.paintDeadCell = paintDeadCellNormal; globals.paintLivingCell = paintLivingCellNormal; globals.paintCells = paintCellsNormal; globals.discoMode = false; if (globals.timerRuns) { audio.pause(); } } updateView(); } const onClickStop= function() { elements.btnNextGen.disabled = false; elements.btnStart.disabled = false; stopTimer(); } function paintLivingCellDisco(x, y) { const randomColor = Math.floor(Math.random()*16777215).toString(16); paint(x, y, '#'+randomColor, '#4d4d4d'); } function paintDeadCellDisco(x, y) { paint(x, y, '#000000', '#4d4d4d'); } function paintLivingCellNormal(x, y) { paint(x, y, '#000000', '#4d4d4d'); } function paintDeadCellNormal(x, y) { paint(x, y, '#ffffff', '#4d4d4d'); } function paintCellsNormal() { globals.gol.changedCells.forEach((value) => { if (globals.gol.viewGrid[value.x][value.y].gen > 0) { paintLivingCellNormal(value.x, value.y); } else { paintDeadCellNormal(value.x, value.y); } }); if (globals.gol.changedCells.size==0) { stopTimer(); elements.btnReset.disabled=true; } } function paintCellsDisco() { globals.gol.livingCells.forEach((value) => { paintLivingCellDisco(value.x, value.y); }); globals.gol.changedCells.forEach((value) => { if (globals.gol.viewGrid[value.x][value.y].gen == 0) { paintDeadCellDisco(value.x, value.y); } }); if (globals.gol.livingCells.size==0) { stopTimer(); elements.btnReset.disabled=true; } } window.onload = function() { 'use strict'; elements.canvas = document.getElementById('gol-grid'); elements.sizeObtainer = document.getElementById('size-obtainer'); elements.container = document.getElementById('container'); elements.canvas.width = elements.sizeObtainer.offsetWidth; elements.canvas.height = elements. sizeObtainer.offsetHeight-elements.container.offsetHeight; elements.btnStart = document.getElementById('btn-start'); elements.btnStop = document.getElementById('btn-stop'); elements.btnNextGen = document.getElementById('btn-next-gen'); elements.btnReset = document.getElementById('btn-reset'); elements.labelFPS = document.getElementById('fps-value'); elements.inputCellSize = document.getElementById('cell-size'); globals.rect = elements.canvas.getBoundingClientRect(); globals.ctx = elements.canvas.getContext('2d'); globals.gol = new GameOfLive(getWidth(), getHeight()); window.addEventListener('mouseup', onWindowMouseUp); window.addEventListener('resize', onResize); document.body.appendChild(audio); audio.loop = true; updateView(); }; function GameOfLive(width, height) { 'use strict'; const viewGrid = [width]; for (let x = 0; x < width; x++) { viewGrid[x] = [height]; for (let y = 0; y < height; y++) { viewGrid[x][y] = {gen: 0, nei: 0}; } } return { viewGrid: viewGrid, width: width, height: height, changedCells: new Set(), livingCells: new Map(), setNewGridState: function() { this.changedCells.clear(); for (let y = 0; y < this.height; y++) { for (let x = 0; x < this.width; x++) { const oldState = this.viewGrid[x][y].gen; // gets the living neighbors const livingNeighbors = this.viewGrid[x][y].nei; if (!(oldState === 0 && livingNeighbors === 0)) { // new state will be overwritten or kept let newState = oldState; // Implementation of Rules // if true the cell should die if (livingNeighbors < 2 || livingNeighbors > 3) { newState = 0; if (oldState > 0) { // remove from living if oldState was alive this.livingCells.delete(x.toString() +'-'+ y.toString()); this.changedCells.add({x: x, y: y}); } } else if (livingNeighbors === 3) { // increase the generation of the cell newState++; if (oldState === 0) { // if it was born add to living cells this.livingCells.set(x.toString() +'-'+ y.toString(), { x: x, y: y, }); this.changedCells.add({x: x, y: y}); } } else if (livingNeighbors === 2) { // increase the generation if oldState was alive if (oldState > 0) { newState++; } } this.viewGrid[x][y].gen = newState; this.viewGrid[x][y].nei = 0; } } } }, increaseNeighbors: function(xIn, yIn) { const yMin = yIn - 1; const yMax = yIn + 1; const xMin = xIn - 1; const xMax = xIn + 1; for (let y = yMin; y <= yMax; y++) { for (let x = xMin; x <= xMax; x++) { if (!(y === yIn && x === xIn)) { let yNeighbor = y; let xNeighbor = x; if (y >= this.height) { yNeighbor = y - this.height; } if (y < 0) { yNeighbor = this.height + y; } if (x >= this.width) { xNeighbor = x - this.width; } if (x < 0) { xNeighbor = this.width + x; } this.viewGrid[xNeighbor][yNeighbor].nei += 1; } } } }, nextGeneration: function() { // increases the Neigbors for each living cell this.livingCells.forEach((value, key, map) => { this.increaseNeighbors(value.x, value.y); }); this.setNewGridState(); }, }; } function paint(xInput, yInput, cellColor, gridColor) { 'use strict'; globals.ctx.fillStyle = cellColor; globals.ctx.strokeStyle = gridColor; const x = xInput * globals.cellSize; const y = yInput * globals.cellSize; globals.ctx.strokeRect(x, y, globals.cellSize -1, globals.cellSize -1); globals.ctx.fillRect(x, y, globals.cellSize - 1, globals.cellSize - 1); } function updateView() { 'use strict'; for (let y = 0, height = globals.gol.height; y < height; y++) { for (let x = 0, width = globals.gol.width; x < width; x++) { if (globals.gol.viewGrid[x][y].gen > 0) { globals.paintLivingCell(x, y); } else { globals.paintDeadCell(x, y); } } } if (globals.gol.livingCells.size==0) { stopTimer(); elements.btnReset.disabled=true; } } function stopTimer() { elements.btnStop.disabled = true; if (globals.timer) { clearInterval(globals.timer); globals.timerRuns = false; } if (globals.discoMode) { audio.pause(); } } function startTimer(fps) { globals.timer = setInterval(function() { globals.gol.nextGeneration(); globals.paintCells(); }, 1000 /globals.fps); elements.btnNextGen.disabled = true; elements.btnStart.disabled = true; elements.btnStop.disabled = false; globals.timerRuns = true; } function reset() { globals.gol = null; globals.gol = new GameOfLive(getWidth(), getHeight()); updateView(); stopTimer(); } function getHeight() { return parseInt(elements.canvas.height / globals.cellSize, 10); } function getWidth() { return parseInt(elements.canvas.width / globals.cellSize, 10); } function userSelectedCell(selectedCellX, selectedCellY) { const inIndexRange = ( selectedCellX < globals.gol.width && selectedCellX >= 0 && selectedCellY < globals.gol.height && selectedCellY >= 0 ); if (inIndexRange) { if (globals.gol.viewGrid[selectedCellX][selectedCellY].gen === 0) { globals.gol.viewGrid[selectedCellX][selectedCellY].gen = 1; globals.gol.livingCells.set( selectedCellX.toString() +'-'+ selectedCellY.toString(), { x: selectedCellX, y: selectedCellY, }); globals.paintLivingCell(selectedCellX, selectedCellY); } else { globals.gol.viewGrid[selectedCellX][selectedCellY].gen = 0; globals.gol.livingCells.delete( selectedCellX.toString() +'-'+ selectedCellY.toString(), ); globals.paintDeadCell(selectedCellX, selectedCellY); } changeBtnDisabledStateBasedOnLivingCells(); } } function changeBtnDisabledStateBasedOnLivingCells() { if (globals.gol.livingCells.size>0) { elements.btnStart.disabled=false; elements.btnReset.disabled=false; elements.btnNextGen.disabled=false; } else { elements.btnStart.disabled=true; elements.btnReset.disabled=true; elements.btnNextGen.disabled=true; } } function keepCellsOnGridSizeChange() { livingCells = globals.gol.livingCells; const width = getWidth(); const height = getHeight(); globals.gol = new GameOfLive(width, height); livingCells.forEach((value, key) => { if (value.x

Game of Disco Life