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

9
index.html
View File

@@ -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%;
}
</style>
</head>

251
main.js
View File

@@ -1,69 +1,76 @@
//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
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
//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
//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);
}
}
//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];
},
//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;
//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];
}
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;
},
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
}
//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
}
}
@@ -71,120 +78,120 @@ var tiles = {
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);
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);
}
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) );
}
//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"),
canvas: document.createElement("canvas"),
start : function() {
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";
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();
}
//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();
}
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;
function togglePause() {
paused = !paused;
if(paused){
document.getElementById("gameIsPaused").innerHTML = "You are paused";
}else{
document.getElementById("gameIsPaused").innerHTML = "You are unpaused";
}
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);
}
if (!paused) {
myGameArea.frameNo += 1;
tiles.iterate();
drawGrid(gColumns, gRows);
}
}