initial commit
This commit is contained in:
Ole Morud
30
main.html
Normal file
30
main.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="main.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<style>
|
||||
canvas {
|
||||
border:1px solid #7f7f7f;
|
||||
background-color: #ffffff;
|
||||
|
||||
}
|
||||
.center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="startGame()" class="center">
|
||||
<br>
|
||||
<button onclick="togglePause()">Pause/Resume</button>
|
||||
<span id="gameIsPaused">You are paused</span>
|
||||
<br>
|
||||
<button onclick="clearCells()">Clear</button>
|
||||
<br>
|
||||
<button onclick="toggleDrawMode()">Draw/Erase</button>
|
||||
<span id="drawModeEnabled">You are drawing</span>
|
||||
</body>
|
||||
<html>
|
||||
191
main.js
Normal file
191
main.js
Normal file
@@ -0,0 +1,191 @@
|
||||
|
||||
//Game options
|
||||
var framerate = 100;
|
||||
var gColumns = 60;
|
||||
var gRows = 140;
|
||||
var box_width = 12;
|
||||
|
||||
//Canvas properties
|
||||
var canvas_width = gRows * box_width;
|
||||
var canvas_height = gColumns * box_width;
|
||||
var paused = true;
|
||||
var deleteMode = false;
|
||||
|
||||
|
||||
|
||||
//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<gRows; x++)
|
||||
for(var y=0; y<gColumns; y++){
|
||||
if(this.getNeighbors(x,y) != 2 && this.getNeighbors(x,y) != 3) 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/box_width);
|
||||
var y = Math.floor(e.offsetY/box_width);
|
||||
|
||||
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() {
|
||||
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.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, box_width);
|
||||
},
|
||||
|
||||
clear : function() {
|
||||
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
drawGrid(gColumns, gRows);
|
||||
}
|
||||
}
|
||||
|
||||
//Fill one tile in grid with color
|
||||
function drawCell(x, y) {
|
||||
ctx = myGameArea.context;
|
||||
ctx.fillStyle = "#ff0000"
|
||||
ctx.fillRect(x*box_width, y*box_width, box_width, box_width);
|
||||
drawGrid(tiles.columns, tiles.rows, box_width);
|
||||
}
|
||||
|
||||
//Remove graphics from tile in grid
|
||||
function unDrawCell(x, y) {
|
||||
ctx = myGameArea.context;
|
||||
ctx.fillStyle = "#ffffff"
|
||||
ctx.clearRect(x*box_width, y*box_width, box_width, box_width);
|
||||
drawGrid(tiles.columns, tiles.rows, box_width);
|
||||
}
|
||||
|
||||
//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();
|
||||
}
|
||||
}
|
||||
|
||||
//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";
|
||||
}
|
||||
}
|
||||
|
||||
//Set all cells to zero and removes graphics
|
||||
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";
|
||||
}
|
||||
}
|
||||
|
||||
//This function runs every frame
|
||||
function updateGameArea() {
|
||||
if(!paused){
|
||||
myGameArea.frameNo += 1;
|
||||
tiles.iterate();
|
||||
drawGrid(gColumns, gRows);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user