From 2fdf4f689acab0193f18e5e46979bd14597adabc Mon Sep 17 00:00:00 2001 From: Ole Morud Date: Mon, 24 Jan 2022 11:28:40 +0100 Subject: [PATCH] attempt to fix ugly indentation from notepad++ --- index.html | 11 +- main.js | 289 +++++++++++++++++++++++++++-------------------------- 2 files changed, 153 insertions(+), 147 deletions(-) diff --git a/index.html b/index.html index a6322fb..40abda6 100644 --- a/index.html +++ b/index.html @@ -7,13 +7,12 @@ canvas { border:1px solid #7f7f7f; background-color: #ffffff; - } .center { - display: block; - margin-left: auto; - margin-right: auto; - width: 50%; + display: block; + margin-left: auto; + margin-right: auto; + width: 50%; } @@ -23,7 +22,7 @@ You are paused
-
+
You are drawing diff --git a/main.js b/main.js index a471306..d8a3569 100644 --- a/main.js +++ b/main.js @@ -1,190 +1,197 @@ - //Game options -var framerate = 150; -var gColumns = 60; -var gRows = 140; -var tileWidth = 12; -var paused = true; -var deleteMode = false; +var framerate = 150; +var gColumns = 60; +var gRows = 140; +var tileWidth = 12; +var paused = true; +var deleteMode = false; //Canvas properties -var canvas_width = gRows * tileWidth; +var canvas_width = gRows * tileWidth; var canvas_height = gColumns * tileWidth; - + //Tiles in game of life var tiles = { - tiles : [...Array(gRows)].map( x => Array(gColumns).fill(0) ), //<< x*y array with all values set to zero - tempTiles : [...Array(gRows)].map( x => Array(gColumns).fill(0) ), //<< same as above - - //One iteration of game of life - iterate : function() { - myGameArea.clear(); //Remove graphics - - //Create temporary 2D array of new values - for(var x=0; x Array(gColumns).fill(0) ); //<< x*y array with all values set to zero - } + tiles: [...Array(gRows)].map(x => Array(gColumns).fill(0)), //<< x*y array with all values set to zero + tempTiles: [...Array(gRows)].map(x => Array(gColumns).fill(0)), //<< same as above + + //One iteration of game of life + iterate: function() { + myGameArea.clear(); //Remove graphics + + //Create temporary 2D array of new values + for (var x = 0; x < gRows; x++) + for (var y = 0; y < gColumns; y++) { + if (![2, 3].includes(this.getNeighbors(x, y))) { + this.tempTiles[x][y] = 0; + } //cell dies if number of neighbors are not 2 or 3 + else if (this.getNeighbors(x, y) == 3) { + this.tempTiles[x][y] = 1; + } //cell is born if there are exactly 3 neighbors + else { + this.tempTiles[x][y] = this.tiles[x][y]; + } //cell remains unchanged otherwise + + //Draw new graphics + if (this.tempTiles[x][y] == 1) { + drawCell(x, y); + } + } + + //Replace old values with new values + for (var x = 0; x < gRows; x++) { + for (var y = 0; y < gColumns; y++) { + this.tiles[x][y] = this.tempTiles[x][y]; + } + } + }, + + //returns number of neighboring cells for cell at position x, y + getNeighbors: function(x, y) { + let neighbors = 0; + + if (x != 0) { + if (y != 0) neighbors += this.tiles[x - 1][y - 1]; + neighbors += this.tiles[x - 1][y]; + if (y < gColumns - 1) neighbors += this.tiles[x - 1][y + 1]; + } + if (y != 0) neighbors += this.tiles[x][y - 1]; + if (y < gColumns) neighbors += this.tiles[x][y + 1]; + if (x < gRows - 1) { + if (y != 0) neighbors += this.tiles[x + 1][y - 1]; + neighbors += this.tiles[x + 1][y]; + if (y < gColumns - 1) neighbors += this.tiles[x + 1][y + 1]; + } + + return neighbors; + }, + + //Sets all cells to zero + clear: function() { + this.tiles = [...Array(gRows)].map(x => Array(gColumns).fill(0)); //<< x*y array with all values set to zero + } } //Initializes canvas and event listeners (starts when HTML has loaded) function startGame() { myGameArea.start(); - - myGameArea.canvas.onclick = function(e) { //<< Mouse click event listener - //outer edges of tiles is set to 0 to simplify neighbor calculation code - //therefore we use x+1 and y+1 - var x = Math.floor(e.offsetX/tileWidth); - var y = Math.floor(e.offsetY/tileWidth); - - if(!deleteMode){ - tiles.tiles[x][y] = 1; - drawCell(x, y); - }else{ - tiles.tiles[x][y] = 0; - unDrawCell(x, y); - } - - //output some info to console - console.log("coords: ", x, y); - console.log("neighbors: ", tiles.getNeighbors(x+1, y+1) ); - } + + myGameArea.canvas.onclick = function(e) { //<< Mouse click event listener + //outer edges of tiles is set to 0 to simplify neighbor calculation code + //therefore we use x+1 and y+1 + var x = Math.floor(e.offsetX / tileWidth); + var y = Math.floor(e.offsetY / tileWidth); + + if (!deleteMode) { + tiles.tiles[x][y] = 1; + drawCell(x, y); + } else { + tiles.tiles[x][y] = 0; + unDrawCell(x, y); + } + + //output some info to console + console.log("coords: ", x, y); + console.log("neighbors: ", tiles.getNeighbors(x + 1, y + 1)); + } } //HTML5 canvas var myGameArea = { - canvas : document.createElement("canvas"), - - start : function() { + canvas: document.createElement("canvas"), + + start: function() { this.canvas.width = canvas_width; this.canvas.height = canvas_height; - this.canvas.style.position = "absolute"; - this.canvas.style.top = "100px"; - this.canvas.style.left = "100px"; - + this.canvas.style.position = "absolute"; + this.canvas.style.top = "100px"; + this.canvas.style.left = "100px"; + this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.frameNo = 0; - this.interval = setInterval(updateGameArea, 1000/framerate); - drawGrid(gColumns, gRows, tileWidth); + this.interval = setInterval(updateGameArea, 1000 / framerate); + drawGrid(gColumns, gRows, tileWidth); }, - - clear : function() { + + clear: function() { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); - drawGrid(gColumns, gRows); + drawGrid(gColumns, gRows); } } //Fill one tile in grid with color function drawCell(x, y) { - ctx = myGameArea.context; - ctx.fillStyle = "#ff0000"; - ctx.fillRect(x*tileWidth, y*tileWidth, tileWidth, tileWidth); - drawGrid(tiles.columns, tiles.rows, tileWidth); + ctx = myGameArea.context; + ctx.fillStyle = "#ff0000"; + ctx.fillRect(x * tileWidth, y * tileWidth, tileWidth, tileWidth); + drawGrid(tiles.columns, tiles.rows, tileWidth); } //Remove graphics from tile in grid function unDrawCell(x, y) { - ctx = myGameArea.context; - ctx.fillStyle = "#ffffff"; - ctx.clearRect(x*tileWidth, y*tileWidth, tileWidth, tileWidth); - drawGrid(tiles.columns, tiles.rows, tileWidth); + ctx = myGameArea.context; + ctx.fillStyle = "#ffffff"; + ctx.clearRect(x * tileWidth, y * tileWidth, tileWidth, tileWidth); + drawGrid(tiles.columns, tiles.rows, tileWidth); } //Display grid on screen -function drawGrid(columns, rows, size){ - //Style parameters - ctx = myGameArea.context; - ctx.lineWidth = 1; - ctx.strokeStyle = "#7F7F7F"; - - //By adding 0.5 we go from 2px width to 1px width - for(var i=1; i<=columns; i++){ - ctx.moveTo(0, i*size+0.5); - ctx.lineTo(canvas_width, i*size+0.5); - ctx.stroke(); - } - - for(var i=1; i<=rows; i++){ - ctx.moveTo(i*size+0.5, 0); - ctx.lineTo(i*size+0.5, canvas_height); - ctx.stroke(); - } +function drawGrid(columns, rows, size) { + //Style parameters + ctx = myGameArea.context; + ctx.lineWidth = 1; + ctx.strokeStyle = "#7F7F7F"; + + //By adding 0.5 the lines are displayed sharper + for (var i = 1; i <= columns; i++) { + ctx.moveTo(0, i * size + 0.5); + ctx.lineTo(canvas_width, i * size + 0.5); + ctx.stroke(); + } + + for (var i = 1; i <= rows; i++) { + ctx.moveTo(i * size + 0.5, 0); + ctx.lineTo(i * size + 0.5, canvas_height); + ctx.stroke(); + } } //Toggles between eraser and pencil -function toggleDrawMode(){ - deleteMode = !deleteMode; - if(deleteMode){ - document.getElementById("drawModeEnabled").innerHTML = "You are erasing"; - }else{ - document.getElementById("drawModeEnabled").innerHTML = "You are drawing"; - } +function toggleDrawMode() { + deleteMode = !deleteMode; + if (deleteMode) { + document.getElementById("drawModeEnabled").innerHTML = "You are erasing"; + } else { + document.getElementById("drawModeEnabled").innerHTML = "You are drawing"; + } } //Set all cells to zero and removes graphics -function clearCells(){ - console.log("attempting to clear cells"); - tiles.clear(); - myGameArea.clear(); +function clearCells() { + console.log("attempting to clear cells"); + tiles.clear(); + myGameArea.clear(); } //Toggles pause and updates text on screen -function togglePause(){ - paused = !paused; - - if(paused){ - document.getElementById("gameIsPaused").innerHTML = "You are paused"; - }else{ - document.getElementById("gameIsPaused").innerHTML = "You are unpaused"; - } +function togglePause() { + paused = !paused; + + if (paused) { + document.getElementById("gameIsPaused").innerHTML = "You are paused"; + } else { + document.getElementById("gameIsPaused").innerHTML = "You are unpaused"; + } } //This function runs every frame -function updateGameArea() { - if(!paused){ - myGameArea.frameNo += 1; - tiles.iterate(); - drawGrid(gColumns, gRows); - } +function updateGameArea() { + if (!paused) { + myGameArea.frameNo += 1; + tiles.iterate(); + drawGrid(gColumns, gRows); + } } \ No newline at end of file