Conway's game of life in ReactJS

Developer
Brian
Size
6,668 Kb
Views
18,216
  1. Conway's game of life in ReactJS Previews
  2. Conway's game of life in ReactJS HTML Codes
  3. Conway's game of life in ReactJS CSS Codes
  4. Conway's game of life in ReactJS JS Codes

How do I make an conway's game of life in reactjs?

A quick and dirty attempt to create 'Conway's game of life'. I was inspired to give it a shot after seeing video describing it. For those unfamiliar, the rules (from the wiki) are:. What is a conway's game of life in reactjs? How do you make a conway's game of life in reactjs? This script and codes were developed by Brian on 22 November 2022, Tuesday.

Conway's game of life in ReactJS Previews
IQ Test

Conway's game of life in ReactJS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Conway's game of life in ReactJS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div> <script src='https://fb.me/react-with-addons-0.14.3.js'></script>
<script src='https://fb.me/react-dom-0.14.3.js'></script> <script src="js/index.js"></script>
</body>
</html>

Conway's game of life in ReactJS - Script Codes CSS Codes

body { color: white; background: #1c1c1f;
}
.main { font: 16px / 1 Arial; position: relative;
}
.conway { border: 1px dotted #fff;
}
.conway--world { text-align: center;
}
.conway--controls { border: 1px solid #FFF; height: 80px; padding: 10px 0 20px; text-align: center;
}
.conway--controls button { color: #000; margin-bottom: 15px; margin-right: 15px;
}
.conway--controls input { color: #000; font-style: italic; font-weight: bold; margin: 0 10px; padding-left: 5px; width: 80px;
}
.conway--cell { box-sizing: border-box; background: transparent; border: 1px solid #5F5F5F; cursor: pointer; float: left; height: 15px; margin: 1px; -webkit-transition: background .2s ease-in; transition: background .2s ease-in; width: 15px;
}
.conway--cell:hover { background: #B0B0B0;
}
.conway--cell_alive { background: #8BC2F5;
}
.conway--cell_alive:hover { background: #8BC2F5;
}
.conway--cell_dead { background: #393D44;
}

Conway's game of life in ReactJS - Script Codes JS Codes

"use strict";
var App = React.createClass({	displayName: "App",	render: function render() {	return React.createElement(	"div",	{ className: "main" },	React.createElement(Conway, null)	);	}
});
var Conway = React.createClass({	displayName: "Conway",	mixins: [React.addons.LinkedStateMixin],	componentWillMount: function componentWillMount() {	window.addEventListener('resize', this.windowResized);	this.setState({ worldDimensions: this.getWorldDimensions() });	},	getDefaultProps: function getDefaultProps() {	return {	cellDimension: 15,	cellMargin: 2,	lifeSpeed: 150	};	},	getInitialState: function getInitialState() {	return {	lifeRunning: false,	lifeSpeed: this.props.lifeSpeed,	livingCells: {},	lifeGeneration: 0,	worldDimensions: {	height: 0,	width: 0	}	};	},	render: function render() {	return React.createElement(	"div",	{ className: "conway" },	React.createElement(	"div",	this.getWorldProps(),	this.renderCells()	),	React.createElement(	"div",	{ className: "conway--controls" },	React.createElement(	"button",	{ onClick: this.handleBeginClick },	"begin"	),	React.createElement(	"button",	{ onClick: this.handleStopClick },	"stop"	),	React.createElement(	"button",	{ onClick: this.handleRandomClick },	"random"	),	React.createElement(	"button",	{ onClick: this.handleResetClick },	"reset"	),	"speed (in ms)",	React.createElement("input", { type: "text", valueLink: this.linkState('lifeSpeed') }),	React.createElement(	"div",	null,	"Generation: ",	this.state.lifeGeneration	)	)	);	},	renderCells: function renderCells() {	var aliveClass;	var colCount = this.getCellCount('width');	var rowCount = this.getCellCount('height');	var cellKey;	var cellProps;	var cells = [];	var deadClass;	for (var yCord = 0; yCord < rowCount; yCord += 1) {	for (var xCord = 0; xCord < colCount; xCord += 1) {	cellKey = xCord + '-' + yCord;	aliveClass = this.state.livingCells[cellKey] ? ' conway--cell_alive' : '';	deadClass = this.state.livingCells[cellKey] === false ? ' conway--cell_dead' : '';	cellProps = {	className: 'conway--cell' + aliveClass + deadClass,	key: cellKey,	onClick: this.handleCellClick.bind(null, cellKey)	};	cells.push(React.createElement("div", cellProps));	}	}	return cells;	},	getWorldProps: function getWorldProps() {	return {	className: 'conway-world',	style: this.getWorldDimensions()	};	},	getWorldDimensions: function getWorldDimensions() {	var controlsheight = 100;	return {	height: window.innerHeight - controlsheight,	width: window.innerWidth || document.body.clientWidth	};	},	getCellCount: function getCellCount(dimensionType) {	return Math.floor(this.state.worldDimensions[dimensionType] / (this.props.cellDimension + this.props.cellMargin));	},	windowResized: function windowResized() {	this.setState({ worldDimensions: this.getWorldDimensions() });	},	progressLife: function progressLife() {	if (this.state.lifeRunning) {	this.life = setTimeout(function () {	var cells = this.state.livingCells;	var cellKeys = Object.keys(cells);	var potentialLife = {};	var extinctLife = [];	var potentialLifeKeys;	for (var index = 0, length = cellKeys.length; index < length; index += 1) {	var currentCell = cellKeys[index];	if (cells[currentCell]) {	var split = currentCell.split('-');	var xParsedCord = parseInt(split[0]);	var yParsedCord = parseInt(split[1]);	var xCords = this.getNeighbors(xParsedCord, 'width');	var yCords = this.getNeighbors(yParsedCord, 'height');	var livingAdjacentCells = 0;	for (var xIndex = 0; xIndex < xCords.length; xIndex += 1) {	for (var yIndex = 0; yIndex < yCords.length; yIndex += 1) {	var cellToCheck = xCords[xIndex] + '-' + yCords[yIndex];	if (cellToCheck !== currentCell) {	if (cells[cellToCheck]) {	livingAdjacentCells += 1;	} else {	potentialLife[cellToCheck] ? potentialLife[cellToCheck] += 1 : potentialLife[cellToCheck] = 1;	}	}	}	}	if (livingAdjacentCells < 2 || livingAdjacentCells > 3) {	extinctLife.push(currentCell);	}	}	}	for (var index = 0, length = extinctLife.length; index < length; index += 1) {	cells[extinctLife[index]] = false;	}	potentialLifeKeys = Object.keys(potentialLife);	for (var index = 0, length = potentialLifeKeys.length; index < length; index += 1) {	var newLifeKey = potentialLifeKeys[index];	if (potentialLife[newLifeKey] === 3) {	cells[newLifeKey] = true;	}	}	this.setState({	livingCells: cells,	lifeGeneration: this.state.lifeGeneration += 1	}, this.progressLife);	}.bind(this), this.state.lifeSpeed);	}	},	getNeighbors: function getNeighbors(originalCord, dimension) {	var maxCount = this.getCellCount(dimension);	var neighbors = [originalCord];	if (originalCord - 1 >= 0) {	neighbors.push(originalCord - 1);	}	if (originalCord + 1 < maxCount) {	neighbors.push(originalCord + 1);	}	return neighbors;	},	randomlyGiveLife: function randomlyGiveLife() {	var colCount = this.getCellCount('width');	var rowCount = this.getCellCount('height');	var cells = {};	for (var yCord = 0; yCord < rowCount; yCord += 1) {	for (var xCord = 0; xCord < colCount; xCord += 1) {	if (Math.floor(Math.random() * 3) === 0) {	cells[xCord + '-' + yCord] = true;	}	}	}	this.setState({	lifeRunning: true,	livingCells: cells	}, this.progressLife);	},	handleBeginClick: function handleBeginClick() {	if (!this.state.lifeRunning) {	this.setState({	drawingMode: false,	lifeRunning: true	}, this.progressLife);	}	},	handleStopClick: function handleStopClick() {	clearTimeout(this.life);	this.setState({	drawingMode: false,	lifeRunning: false	});	},	handleRandomClick: function handleRandomClick() {	this.handleResetClick();	this.randomlyGiveLife();	},	handleDrawClick: function handleDrawClick() {	this.setState({	drawingMode: !this.state.drawingMode,	lifeRunning: false	});	},	handleResetClick: function handleResetClick() {	clearTimeout(this.life);	this.setState({	drawingMode: false,	lifeRunning: false,	livingCells: {},	lifeGeneration: 0	});	},	handleCellClick: function handleCellClick(cellKey, event) {	var updatedLivingCells = this.state.livingCells;	updatedLivingCells[cellKey] = !updatedLivingCells[cellKey];	this.setState({ livingCells: updatedLivingCells });	}
});
ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
Conway's game of life in ReactJS - Script Codes
Conway's game of life in ReactJS - Script Codes
Home Page Home
Developer Brian
Username brian-baum
Uploaded November 22, 2022
Rating 3
Size 6,668 Kb
Views 18,216
Do you need developer help for Conway's game of life in ReactJS?

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!

Brian (brian-baum) Script Codes
Name
ReactJS Accessible Accordion Panel
ReactJS Image Carousel
CSS dropdowns
Smooth Scrolling in ReactJS
JQuery exercise
JQuery hash nav plugin
AngularJS contact list
Responsive demo page
JQuery countdown plugin
Create amazing blog posts 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!