Game of Life

Developer
Mihkel
Size
2,922 Kb
Views
10,120
  1. Game of Life Previews
  2. Game of Life HTML Codes
  3. Game of Life CSS Codes
  4. Game of Life JS Codes

How do I make an game of life?

Conway's game of life with canvas. What is a game of life? How do you make a game of life? This script and codes were developed by Mihkel on 08 December 2022, Thursday.

Game of Life Previews
IQ Test

Game of Life - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Game of Life</title> <meta charset="UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1 class="hero">Conway's Game of Life</h1> <canvas id="canvas"></canvas> <div> <button type="button" class="btn reset">Reset</button> <button type="button" class="btn pause">Pause</button> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Game of Life - Script Codes CSS Codes

body {	height: 100%;	background-color: #333;	color: #fafafa;	display: flex;	align-content: center;	justify-content: center;	font-family: 'Lato', sans-serif;
}
.hero {	font-weight: 300;	letter-spacing: 5px;	text-align: center;
}
#canvas {	box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
.btn {	font-family: 'Lato', sans-serif;	padding: 6px 20px;	margin-top: 6px;	background-color: transparent;	color: #fafafa;	border: none;	box-shadow: 0 0 4px rgba(0,0,0,0.4);	cursor: pointer;	transition: 100ms background-color;	outline: #000;	text-transform: uppercase;	letter-spacing: 1px;	font-size: 14px;
}
.btn:hover {	background-color: #222;	border-color: transparent;
}
.pause {	margin-left: 4px;
}

Game of Life - Script Codes JS Codes

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var COL_WIDTH = 12;
var COL_HEIGHT = 12;
var ROWS = 50;
var COLS = 70;
canvas.width = COLS * COL_WIDTH;
canvas.height = ROWS * COL_HEIGHT;
function Cell(r,c) {	this.r = r;	this.c = c;	this.isAlive = Math.random() > 0.5;	this.neighbors = 0;	this.draw = function () {	var color = this.isAlive ? "#fafafa" : "#333";	ctx.fillStyle = color;	ctx.fillRect(this.r * COL_WIDTH, this.c * COL_HEIGHT, COL_WIDTH, COL_HEIGHT);	};
}
function Conway() {	this.grid = this.generateGrid();	this.paused = false;	this.surroundings = [[-1, -1], [-1, 0], [-1, 1], [0, 1], [1, 1], [1, 0], [1, -1], [0, -1]];	this.buttons = {	reset: document.querySelector(".reset"),	pause: document.querySelector(".pause")	};
}
Conway.prototype.generateGrid = function () {	var grid = [];	for (var r = 0; r < ROWS; r++) {	grid[r] = [];	for (var c = 0; c < COLS; c++) {	grid[r][c] = new Cell(c, r);	}	}	this.grid = grid;
};
Conway.prototype.renderGrid = function () {	for (var r = 0; r < ROWS; r++) {	for (var c = 0; c < COLS; c++) {	this.grid[r][c].draw();	}	}
};
Conway.prototype.isUnderpopulated = function (r,c) {	var cell = this.grid[r][c];	return cell.neighbors < 2;
};
Conway.prototype.isOverpopulated = function (r,c) {	var cell = this.grid[r][c];	return cell.neighbors > 3;
};
Conway.prototype.isResurrectable = function (r,c) {	var cell = this.grid[r][c];	return !cell.isAlive && cell.neighbors === 3;
};
Conway.prototype.isWithinGrid = function (r,c) {	return r >= 0 && r < ROWS && c >= 0 && c < COLS;
};
Conway.prototype.updateNeighborsForCell = function (r,c) {	var cell = this.grid[r][c];	cell.neighbors = 0;	for (var i = 0; i < this.surroundings.length; i++) {	var surroundings = this.surroundings[i];	var row = surroundings[0];	var col = surroundings[1];	if (this.isWithinGrid(r + row, c + col)) {	var neighbor = this.grid[r + row][c + col];	if (neighbor.isAlive) {	cell.neighbors++;	}	}	}
};
Conway.prototype.updateNeighbors = function () {	for (var r = 0; r < ROWS; r++) {	for (var c = 0; c < COLS; c++) {	this.updateNeighborsForCell(r,c);	}	}
};
Conway.prototype.updateStateForCell = function (r,c) {	var cell = this.grid[r][c];	if (this.isUnderpopulated(r, c) || this.isOverpopulated(r, c)) {	cell.isAlive = false;	} else if (this.isResurrectable(r, c)) {	cell.isAlive = true;	}
};
Conway.prototype.updateStates = function () {	for (var r = 0; r < ROWS; r++) {	for (var c = 0; c < COLS; c++) {	this.updateStateForCell(r, c);	}	}
};
Conway.prototype.play = function () {	if (!this.paused) {	this.renderGrid();	this.updateNeighbors();	this.updateStates();	}	requestAnimationFrame(this.play.bind(this));
};
Conway.prototype.reset = function () {	if (this.paused) {	this.paused = false;	this.buttons.pause.innerHTML = "Pause";	}	this.generateGrid();
};
Conway.prototype.pause = function () {	this.paused = !this.paused;	this.buttons.pause.innerHTML = (this.paused ? "Resume" : "Pause");
};
Conway.prototype.init = function () {	this.generateGrid();	this.buttons.reset.addEventListener("click", this.reset.bind(this));	this.buttons.pause.addEventListener("click", this.pause.bind(this));	this.play();
};
var conway = new Conway();
conway.init();
Game of Life - Script Codes
Game of Life - Script Codes
Home Page Home
Developer Mihkel
Username Krokodill
Uploaded December 08, 2022
Rating 3
Size 2,922 Kb
Views 10,120
Do you need developer help for Game of Life?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mihkel (Krokodill) Script Codes
Name
Pomodoro Timer
Loading animation
Dungeon Crawler
Camper Leaderboard
React Weather Broadcast
Snake Game
Wikipedia Viewer
Slide out navigation
Twitch Status 2.0
React Markdown Preview
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!