React.js Game of Life

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

How do I make an react.js game of life?

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

React.js Game of Life Previews
IQ Test

React.js Game of Life - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React.js Game of Life</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="main"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js'></script>
<script src='https://cdn.jsdelivr.net/refluxjs/0.2.11/reflux.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

React.js Game of Life - Script Codes CSS Codes

/*********************************************************************	Name:	Push - Bootstrap Button Pack	Author:	BootstrapBay - (http://www.bootstrapbay.com/)	Version:	1.0
*********************************************************************/
/******************************************************	CUSTOM BTN VALUES
******************************************************/
.btn {	padding: 14px 24px;	border: 0 none;	font-weight: 700;	letter-spacing: 1px;
}
.btn:focus, .btn:active:focus, .btn.active:focus {	outline: 0 none;
}
/******************************************************	STANDARD BUTTONS
******************************************************/
.btn-warning {	background: #eb8f34;	color: #ffffff;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning {	background: #B85C01;
}
.btn-warning:active, .btn-warning.active {	background: #b87430;	box-shadow: none;
}
/******************************************************	SHARP BUTTONS
******************************************************/
.btn.sharp {	border-radius: 0;
}
/******************************************************	BUTTON SIZING
******************************************************/
.btn-xs, .btn-group-xs > .btn {	padding: 2px 6px;
}
.btn-sm, .btn-group-sm > .btn {	padding: 8px 12px;
}
.btn-lg {	padding: 20px 40px;	border-radius: 4px;
}
.btn-xs.btn-default, .btn-xs.outline {	padding: 0px 4px;
}
.btn-sm.btn-default, .btn-sm.outline {	padding: 6px 10px;
}
.btn-lg.btn-default, .btn-lg.outline {	padding: 18px 38px;
}

React.js Game of Life - Script Codes JS Codes

"use strict";
var Actions = Reflux.createActions(["updateCellStatus"]);
var CellStore = Reflux.createStore({	listenables: [Actions],	updateCellStatus: function updateCellStatus(row, col) {	var body = { row: row, col: col };	this.trigger(body);	}
});
var Cell = React.createClass({	displayName: "Cell",	getInitialState: function getInitialState() {	return { isAlive: null };	},	componentWillMount: function componentWillMount() {	this.setState({ isAlive: this.props.isAlive });	},	onClick: function onClick() {	Actions.updateCellStatus(this.props.row, this.props.col);	this.setState({ isAlive: !this.state.isAlive });	},	componentWillReceiveProps: function componentWillReceiveProps(nextProps) {	this.setState({ isAlive: nextProps.isAlive });	},	render: function render() {	var cellStyle = {	width: 12,	height: 12,	dislay: "inline-block",	float: "left",	border: "1px solid #000",	background: this.state.isAlive ? "#FFF" : "#333"	};	return React.createElement("div", { onClick: this.onClick, style: cellStyle });	}
});
var Buttons = React.createClass({	displayName: "Buttons",	getInitialState: function getInitialState() {	return { text: "Pause" };	},	render: function render() {	var margin = { margin: "10px 5px" };	return React.createElement(	"div",	{ style: margin },	React.createElement(	"button",	{ style: margin, type: "button", onClick: this.props.pause, className: "btn btn-warning btn-sm sharp" },	this.state.text	),	React.createElement(	"button",	{ style: margin, type: "button", onClick: this.props.reset, className: "btn btn-warning btn-sm sharp" },	"Reset"	),	React.createElement(	"button",	{ style: margin, type: "button", onClick: this.props.clear, className: "btn btn-warning btn-sm sharp" },	"Clear"	)	);	}
});
var Generation = React.createClass({	displayName: "Generation",	getInitialState: function getInitialState() {	return { generation: 0 };	},	render: function render() {	return React.createElement(	"h4",	null,	"Generation: ",	this.state.generation	);	}
});
var Grid = React.createClass({	displayName: "Grid",	mixins: [Reflux.listenTo(CellStore, "onCellClick")],	getInitialState: function getInitialState() {	return {	size: 40,	grid: [],	neighborCells: [[-1, 0], [-1, 1], [0, 1], [1, 1], [1, 0], [1, -1], [0, -1], [-1, -1]]	};	},	componentWillMount: function componentWillMount() {	function Cell() {	this.isAlive = Math.random() > 0.7;	this.neighbors = 0;	}	var grid = [];	for (var i = 0; i < this.state.size; i++) {	var row = [];	for (var j = 0; j < this.state.size; j++) {	row.push(new Cell());	}	grid.push(row);	}	this.setState({ grid: grid });	this.renderGrid();	},	onCellClick: function onCellClick(body) {	var row = body.row;	var col = body.col;	var cell = this.state.grid[row][col];	cell.isAlive = !cell.isAlive;	},	pause: function pause(e) {	if (e.target.innerHTML === "Pause") {	clearInterval(this.interval);	this.refs.buttons.setState({ text: "Start" });	} else {	this.refs.buttons.setState({ text: "Pause" });	this.renderGrid();	}	},	reset: function reset() {	clearInterval(this.interval);	for (var i = 0; i < this.state.size; i++) {	for (var j = 0; j < this.state.size; j++) {	var cell = this.state.grid[i][j];	cell.isAlive = Math.random() > 0.7;	}	}	this.refs.generation.setState({ generation: 0 });	this.refs.buttons.setState({ text: "Pause" });	this.renderGrid();	},	clearBoard: function clearBoard() {	clearInterval(this.interval);	for (var i = 0; i < this.state.size; i++) {	for (var j = 0; j < this.state.size; j++) {	var cell = this.state.grid[i][j];	cell.isAlive = false;	}	}	this.refs.generation.setState({ generation: 0 });	this.refs.buttons.setState({ text: "Start" });	this.forceUpdate();	},	isWithinGrid: function isWithinGrid(row, col) {	return row >= 0 && row < this.state.size && col >= 0 && col < this.state.size;	},	getNeighbors: function getNeighbors(row, col) {	var cell = this.state.grid[row][col];	cell.neighbors = 0;	for (var i = 0; i < this.state.neighborCells.length; i++) {	var position = this.state.neighborCells[i];	var r = position[0];	var c = position[1];	if (this.isWithinGrid(row + r, col + c)) {	var neighbor = this.state.grid[row + r][col + c];	if (neighbor.isAlive) cell.neighbors++;	}	}	},	updateCellState: function updateCellState(row, col) {	var cell = this.state.grid[row][col];	if (cell.neighbors < 2 || cell.neighbors > 3) {	cell.isAlive = false;	} else if (cell.neighbors === 3 && !cell.isAlive) {	cell.isAlive = true;	}	},	updateAllCells: function updateAllCells() {	for (var i = 0; i < this.state.size; i++) {	for (var j = 0; j < this.state.size; j++) {	this.getNeighbors(i, j);	}	}	for (var i = 0; i < this.state.size; i++) {	for (var j = 0; j < this.state.size; j++) {	this.updateCellState(i, j);	}	}	},	updateGeneration: function updateGeneration() {	var check = false;	outerloop: for (var i = 0; i < this.state.size; i++) {	for (var j = 0; j < this.state.size; j++) {	var cell = this.state.grid[i][j];	if (cell.isAlive) {	check = true;	break outerloop;	}	}	}	if (check) this.refs.generation.setState({ generation: this.refs.generation.state.generation + 1 });	},	renderGrid: function renderGrid() {	this.interval = setInterval(function () {	this.updateAllCells();	this.updateGeneration();	this.forceUpdate();	}.bind(this), 1);	},	render: function render() {	document.body.style.background = "#333";	document.body.style.color = "#FAFAFA";	var gridStyle = {	width: this.state.size * 12,	height: this.state.size * 12,	background: "#FAFAFA",	margin: "0 auto",	marginTop: 30,	WebKitBoxShadow: "0 0 5px rgba(0, 0, 0, 1)",	MozBoxShadow: "0 0 5px rgba(0, 0, 0, 1)",	boxShadow: "0 0 5px rgba(0, 0, 0, 1)"	};	var headerStyle = {	fontSize: 46,	fontWeight: 100,	letterSpacing: 5,	fontFamily: "Roboto",	marginTop: 30	};	var cells = [];	for (var i = 0; i < this.state.size; i++) {	var row = [];	for (var j = 0; j < this.state.size; j++) {	var cell = this.state.grid[i][j];	row.push(React.createElement(Cell, { key: i + j, isAlive: cell.isAlive, row: i, col: j }));	}	cells.push(row);	}	return React.createElement(	"div",	{ className: "container text-center" },	React.createElement(	"h1",	{ style: headerStyle },	"Game of Life"	),	React.createElement(	"div",	{ style: gridStyle },	cells	),	React.createElement(Buttons, { ref: "buttons", pause: this.pause, reset: this.reset, clear: this.clearBoard }),	React.createElement(Generation, { ref: "generation" })	);	}
});
ReactDOM.render(React.createElement(Grid, null), document.getElementById("main"));
React.js Game of Life - Script Codes
React.js Game of Life - Script Codes
Home Page Home
Developer Mihkel
Username Krokodill
Uploaded December 08, 2022
Rating 3
Size 5,760 Kb
Views 10,120
Do you need developer help for React.js 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
Local Weather
Game of Life
Twitch Status 2.0
Pomodoro Timer
Wikipedia Viewer
React Pokedex
Simon Game
Random Quote Machine
Snake Game
Camper Leaderboard
Create amazing Facebook ads 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!