olemorud/game-of-life
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

attempt to fix ugly indentation from notepad++

Browse Source
This commit is contained in:
Ole Morud
2022-01-24 11:28:40 +01:00
parent 961a592f3b
commit 2fdf4f689a
2 changed files with 153 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@@ -7,13 +7,12 @@
canvas { canvas {
border:1px solid #7f7f7f; border:1px solid #7f7f7f;
background-color: #ffffff; background-color: #ffffff;
} }
.center { .center {
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 50%; width: 50%;
} }
</style> </style>
</head> </head>
@@ -23,7 +22,7 @@
<span id="gameIsPaused">You are paused</span> <span id="gameIsPaused">You are paused</span>
<br> <br>
<button onclick="clearCells()">Clear</button> <button onclick="clearCells()">Clear</button>
<br> <br>
<button onclick="toggleDrawMode()">Draw/Erase</button> <button onclick="toggleDrawMode()">Draw/Erase</button>
<span id="drawModeEnabled">You are drawing</span> <span id="drawModeEnabled">You are drawing</span>
</body> </body>

289
main.js
View File

@@ -1,190 +1,197 @@
//Game options //Game options
var framerate = 150; var framerate = 150;
var gColumns = 60; var gColumns = 60;
var gRows = 140; var gRows = 140;
var tileWidth = 12; var tileWidth = 12;
var paused = true; var paused = true;
var deleteMode = false; var deleteMode = false;
//Canvas properties //Canvas properties
var canvas_width = gRows * tileWidth; var canvas_width = gRows * tileWidth;
var canvas_height = gColumns * tileWidth; var canvas_height = gColumns * tileWidth;
//Tiles in game of life //Tiles in game of life
var tiles = { var tiles = {
tiles : [...Array(gRows)].map( 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 tempTiles: [...Array(gRows)].map(x => Array(gColumns).fill(0)), //<< same as above
//One iteration of game of life //One iteration of game of life
iterate : function() { iterate: function() {
myGameArea.clear(); //Remove graphics myGameArea.clear(); //Remove graphics
//Create temporary 2D array of new values //Create temporary 2D array of new values
for(var x=0; x<gRows; x++) for (var x = 0; x < gRows; x++)
for(var y=0; y<gColumns; y++){ 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 if (![2, 3].includes(this.getNeighbors(x, y))) {
else if(this.getNeighbors(x,y) == 3) { this.tempTiles[x][y] = 1; } //cell is born if there are exactly 3 neighbors this.tempTiles[x][y] = 0;
else { this.tempTiles[x][y] = this.tiles[x][y]; } //cell remains unchanged otherwise } //cell dies if number of neighbors are not 2 or 3
else if (this.getNeighbors(x, y) == 3) {
//Draw new graphics this.tempTiles[x][y] = 1;
if(this.tempTiles[x][y] == 1){ } //cell is born if there are exactly 3 neighbors
drawCell(x, y); else {
} this.tempTiles[x][y] = this.tiles[x][y];
} } //cell remains unchanged otherwise
//Replace old values with new values //Draw new graphics
for(var x=0; x<gRows; x++) if (this.tempTiles[x][y] == 1) {
for(var y=0; y<gColumns; y++) drawCell(x, y);
this.tiles[x][y] = this.tempTiles[x][y]; }
}, }
//returns number of neighboring cells for cell at position x, y //Replace old values with new values
getNeighbors : function(x, y) { for (var x = 0; x < gRows; x++) {
let neighbors = 0; for (var y = 0; y < gColumns; y++) {
this.tiles[x][y] = this.tempTiles[x][y];
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];
} //returns number of neighboring cells for cell at position x, y
if(y != 0) neighbors += this.tiles[x] [y-1]; getNeighbors: function(x, y) {
if(y < gColumns) neighbors += this.tiles[x] [y+1]; let neighbors = 0;
if(x < gRows-1){
if(y != 0) neighbors += this.tiles[x+1][y-1]; if (x != 0) {
neighbors += this.tiles[x+1][y ]; if (y != 0) neighbors += this.tiles[x - 1][y - 1];
if(y < gColumns-1) 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; if (y != 0) neighbors += this.tiles[x][y - 1];
}, if (y < gColumns) neighbors += this.tiles[x][y + 1];
if (x < gRows - 1) {
//Sets all cells to zero if (y != 0) neighbors += this.tiles[x + 1][y - 1];
clear: function() { neighbors += this.tiles[x + 1][y];
this.tiles = [...Array(gRows)].map( x => Array(gColumns).fill(0) ); //<< x*y array with all values set to zero 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) //Initializes canvas and event listeners (starts when HTML has loaded)
function startGame() { function startGame() {
myGameArea.start(); myGameArea.start();
myGameArea.canvas.onclick = function(e) { //<< Mouse click event listener myGameArea.canvas.onclick = function(e) { //<< Mouse click event listener
//outer edges of tiles is set to 0 to simplify neighbor calculation code //outer edges of tiles is set to 0 to simplify neighbor calculation code
//therefore we use x+1 and y+1 //therefore we use x+1 and y+1
var x = Math.floor(e.offsetX/tileWidth); var x = Math.floor(e.offsetX / tileWidth);
var y = Math.floor(e.offsetY/tileWidth); var y = Math.floor(e.offsetY / tileWidth);
if(!deleteMode){ if (!deleteMode) {
tiles.tiles[x][y] = 1; tiles.tiles[x][y] = 1;
drawCell(x, y); drawCell(x, y);
}else{ } else {
tiles.tiles[x][y] = 0; tiles.tiles[x][y] = 0;
unDrawCell(x, y); unDrawCell(x, y);
} }
//output some info to console //output some info to console
console.log("coords: ", x, y); console.log("coords: ", x, y);
console.log("neighbors: ", tiles.getNeighbors(x+1, y+1) ); console.log("neighbors: ", tiles.getNeighbors(x + 1, y + 1));
} }
} }
//HTML5 canvas //HTML5 canvas
var myGameArea = { var myGameArea = {
canvas : document.createElement("canvas"), canvas: document.createElement("canvas"),
start : function() { start: function() {
this.canvas.width = canvas_width; this.canvas.width = canvas_width;
this.canvas.height = canvas_height; this.canvas.height = canvas_height;
this.canvas.style.position = "absolute"; this.canvas.style.position = "absolute";
this.canvas.style.top = "100px"; this.canvas.style.top = "100px";
this.canvas.style.left = "100px"; this.canvas.style.left = "100px";
this.context = this.canvas.getContext("2d"); this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]); document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0; this.frameNo = 0;
this.interval = setInterval(updateGameArea, 1000/framerate); this.interval = setInterval(updateGameArea, 1000 / framerate);
drawGrid(gColumns, gRows, tileWidth); drawGrid(gColumns, gRows, tileWidth);
}, },
clear : function() { clear: function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
drawGrid(gColumns, gRows); drawGrid(gColumns, gRows);
} }
} }
//Fill one tile in grid with color //Fill one tile in grid with color
function drawCell(x, y) { function drawCell(x, y) {
ctx = myGameArea.context; ctx = myGameArea.context;
ctx.fillStyle = "#ff0000"; ctx.fillStyle = "#ff0000";
ctx.fillRect(x*tileWidth, y*tileWidth, tileWidth, tileWidth); ctx.fillRect(x * tileWidth, y * tileWidth, tileWidth, tileWidth);
drawGrid(tiles.columns, tiles.rows, tileWidth); drawGrid(tiles.columns, tiles.rows, tileWidth);
} }
//Remove graphics from tile in grid //Remove graphics from tile in grid
function unDrawCell(x, y) { function unDrawCell(x, y) {
ctx = myGameArea.context; ctx = myGameArea.context;
ctx.fillStyle = "#ffffff"; ctx.fillStyle = "#ffffff";
ctx.clearRect(x*tileWidth, y*tileWidth, tileWidth, tileWidth); ctx.clearRect(x * tileWidth, y * tileWidth, tileWidth, tileWidth);
drawGrid(tiles.columns, tiles.rows, tileWidth); drawGrid(tiles.columns, tiles.rows, tileWidth);
} }
//Display grid on screen //Display grid on screen
function drawGrid(columns, rows, size){ function drawGrid(columns, rows, size) {
//Style parameters //Style parameters
ctx = myGameArea.context; ctx = myGameArea.context;
ctx.lineWidth = 1; ctx.lineWidth = 1;
ctx.strokeStyle = "#7F7F7F"; ctx.strokeStyle = "#7F7F7F";
//By adding 0.5 we go from 2px width to 1px width //By adding 0.5 the lines are displayed sharper
for(var i=1; i<=columns; i++){ for (var i = 1; i <= columns; i++) {
ctx.moveTo(0, i*size+0.5); ctx.moveTo(0, i * size + 0.5);
ctx.lineTo(canvas_width, i*size+0.5); ctx.lineTo(canvas_width, i * size + 0.5);
ctx.stroke(); ctx.stroke();
} }
for(var i=1; i<=rows; i++){ for (var i = 1; i <= rows; i++) {
ctx.moveTo(i*size+0.5, 0); ctx.moveTo(i * size + 0.5, 0);
ctx.lineTo(i*size+0.5, canvas_height); ctx.lineTo(i * size + 0.5, canvas_height);
ctx.stroke(); ctx.stroke();
} }
} }
//Toggles between eraser and pencil //Toggles between eraser and pencil
function toggleDrawMode(){ function toggleDrawMode() {
deleteMode = !deleteMode; deleteMode = !deleteMode;
if(deleteMode){ if (deleteMode) {
document.getElementById("drawModeEnabled").innerHTML = "You are erasing"; document.getElementById("drawModeEnabled").innerHTML = "You are erasing";
}else{ } else {
document.getElementById("drawModeEnabled").innerHTML = "You are drawing"; document.getElementById("drawModeEnabled").innerHTML = "You are drawing";
} }
} }
//Set all cells to zero and removes graphics //Set all cells to zero and removes graphics
function clearCells(){ function clearCells() {
console.log("attempting to clear cells"); console.log("attempting to clear cells");
tiles.clear(); tiles.clear();
myGameArea.clear(); myGameArea.clear();
} }
//Toggles pause and updates text on screen //Toggles pause and updates text on screen
function togglePause(){ function togglePause() {
paused = !paused; paused = !paused;
if(paused){ if (paused) {
document.getElementById("gameIsPaused").innerHTML = "You are paused"; document.getElementById("gameIsPaused").innerHTML = "You are paused";
}else{ } else {
document.getElementById("gameIsPaused").innerHTML = "You are unpaused"; document.getElementById("gameIsPaused").innerHTML = "You are unpaused";
} }
} }
//This function runs every frame //This function runs every frame
function updateGameArea() { function updateGameArea() {
if(!paused){ if (!paused) {
myGameArea.frameNo += 1; myGameArea.frameNo += 1;
tiles.iterate(); tiles.iterate();
drawGrid(gColumns, gRows); drawGrid(gColumns, gRows);
} }
} }