React Game of Life

Developer
Adam
Size
7,264 Kb
Views
14,168
  1. React Game of Life Previews
  2. React Game of Life HTML Codes
  3. React Game of Life CSS Codes
  4. React Game of Life JS Codes

How do I make an react game of life?

Project Game of Life made for free code camp data visualisation course using React. What is a react game of life? How do you make a react game of life? This script and codes were developed by Adam on 28 November 2022, Monday.

React Game of Life Previews
IQ Test

React Game of Life - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Game of Life</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 class="app"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

React Game of Life - Script Codes CSS Codes

body { color: #0eedde; background: #111; text-align: center; font-family: 'Verdana', sans-serif;
}
.game { margin: 2em auto 1em;
}
.true { background: #0eedde;
}
.false { background: #333;
}
.mainCell { float: left;
}
.button-container { margin: 0.5em auto;
}
button { padding: 0.1em; margin: 0.3em; background: #0eedde; color: #222; font-size: 1.5em; font-weight: 700; font-family: inherit; border: 0.1em solid #fff; border-radius: 0.3em; cursor: pointer;
}

React Game of Life - Script Codes JS Codes

'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/*======================================= React Game of Life
=======================================*/
/* Made for fcc data visualisation course. Based on Conway's Game of Life. Click on the board to add new cells. Responsive. Not tested yet on mobile
*/
//Component to render each row with cells
var Row = function (_React$Component) { _inherits(Row, _React$Component); function Row(props) { _classCallCheck(this, Row); return _possibleConstructorReturn(this, _React$Component.call(this, props)); } Row.prototype.render = function render() { var width = this.props.cellSize; var height = this.props.cellSize; var style = { width: width, height: height }; var containerStyle = { height: this.props.cellSize }; var cells = this.props.cells; var cellElements = []; for (var i = 0; i < cells.length - 1; i++) { cellElements.push(React.createElement('div', { className: 'cell mainCell ' + cells[i].alive, id: 'cell ' + i + ' ' + this.props.rowNumber, style: style })); } cellElements.push(React.createElement('div', { className: 'endCell ' + cells[i].alive, id: 'cell ' + i + ' ' + this.props.rowNumber, style: style })); return React.createElement( 'div', { style: containerStyle }, cellElements ); }; return Row;
}(React.Component);
;
//component to produce amount of rows
var Game = function (_React$Component2) { _inherits(Game, _React$Component2); function Game(props) { _classCallCheck(this, Game); return _possibleConstructorReturn(this, _React$Component2.call(this, props)); } Game.prototype.render = function render() { var gameState = this.props.gameState; var rows = []; for (var i = 0; i < gameState.length; i++) { rows.push(React.createElement(Row, { cells: gameState[i], rowNumber: i, cellSize: this.props.cellSize })); } var style = { width: this.props.width }; return React.createElement( 'div', { className: 'game', style: style }, rows ); }; return Game;
}(React.Component);
;
//Button component creation/handler
var Button = function (_React$Component3) { _inherits(Button, _React$Component3); function Button(props) { _classCallCheck(this, Button); return _possibleConstructorReturn(this, _React$Component3.call(this, props)); } Button.prototype.componentDidMount = function componentDidMount() { document.getElementById(this.props.id).addEventListener('click', this.props.callback); }; Button.prototype.render = function render() { return React.createElement( 'button', { id: this.props.id }, this.props.text ); }; return Button;
}(React.Component);
;
//Main component
var App = function (_React$Component4) { _inherits(App, _React$Component4); function App(props) { _classCallCheck(this, App); var _this4 = _possibleConstructorReturn(this, _React$Component4.call(this, props)); _this4.state = { aliveStart: 0.3, gameState: _this4.randomGame(0.3), generation: 0, interval: undefined }; _this4.step = _this4.step.bind(_this4); _this4.buttonHandler = _this4.buttonHandler.bind(_this4); return _this4; } //Add clickable function to game board and start game automatically App.prototype.componentDidMount = function componentDidMount() { var _this5 = this; var cells = Array.from(document.getElementsByClassName('cell')); cells.forEach(function (cell) { cell.addEventListener('click', _this5.onCellClick); }); this.buttonHandler({ target: { id: "start" } }); }; //produce a random game start App.prototype.randomGame = function randomGame(start) { var game = []; var row = undefined; for (var i = 0; i < this.props.height; i++) { row = new Array(this.props.width); for (var j = 0; j < this.props.width; j++) { row[j] = { alive: Math.random() < start ? true : false }; } game.push(row); } return game; }; //handle next sequence of game App.prototype.step = function step(e) { var game = this.state.gameState; var height = game.length; var width = game[0].length; var neighbours = []; var neighboursAlive = 0; var nextGame = []; for (var i = 0; i < height; i++) { var row = []; for (var j = 0; j < width; j++) { neighbours = findNeighbours(width, height, { x: j, y: i }); neighboursAlive = aliveAmount(neighbours, game); row.push({ alive: checkDOA(game[i][j].alive, neighboursAlive) }); } nextGame.push(row); } this.setState({ gameState: nextGame, generation: this.state.generation + 1 }); }; //handle button options App.prototype.buttonHandler = function buttonHandler(e) { var button = e.target.id; if (button === 'start') { if (this.state.interval === undefined) { if (checkGameOver(this.state.gameState)) { this.setState({ aliveStart: 0.3, gameState: this.randomGame(0.3), generation: 0, interval: undefined }); } this.setState({ interval: window.setInterval(this.step, this.props.delay) }); } } if (button === 'clear') { var prevAliveStart = this.state.aliveStart; this.setState({ gameState: this.randomGame(0), generation: 0, aliveStart: 0 }); window.clearInterval(this.state.interval); this.setState({ interval: undefined, aliveStart: prevAliveStart }); } if (button === 'pause') { window.clearInterval(this.state.interval); this.setState({ interval: undefined }); } if (button === 'step') { if (this.state.interval === undefined) { this.step(); } } }; //handle new cell creation on board click App.prototype.onCellClick = function onCellClick(e) { var pos = findTargetPosition(e.target.id); var cell = this.state.gameState[pos.y][pos.x]; cell.alive = cell.alive ? false : true; this.setState({ gameState: this.state.gameState }); }; App.prototype.render = function render() { return React.createElement( 'div', null, React.createElement(Game, { gameState: this.state.gameState, cellSize: this.props.cellSize, width: this.props.width * this.props.cellSize }), React.createElement( 'h2', { id: 'generation' }, 'Generation: ', this.state.generation ), React.createElement( 'div', { className: 'button-container' }, React.createElement(Button, { id: 'start', callback: this.buttonHandler, text: 'Start' }), React.createElement(Button, { id: 'pause', callback: this.buttonHandler, text: 'Pause' }), React.createElement(Button, { id: 'step', callback: this.buttonHandler, text: 'Step' }), React.createElement(Button, { id: 'clear', callback: this.buttonHandler, text: 'Clear' }) ) ); }; return App;
}(React.Component);
;
//Find position of clicked cell
function findTargetPosition(id) { var pos = id.match(/[0-9]+/g); if (pos.length === 2) { return { x: parseInt(pos[1]), y: parseInt(pos[0]) }; }
}
//Check if any cells are alive
function checkGameOver(game) { for (var i = 0; i < game.length; i++) { for (var j = 0; j < game[i].length; j++) { if (game[i][j].alive) { return false; } } } return true;
}
//find any neigbours in 8 directions
function findNeighbours(width, height, pos) { var x = pos.x; var y = pos.y; var xPlus = pos.x + 1 === width ? 0 : pos.x + 1; var xMinus = pos.x - 1 < 0 ? width - 1 : pos.x - 1; var yPlus = pos.y + 1 === height ? 0 : pos.y + 1; var yMinus = pos.y - 1 < 0 ? height - 1 : pos.y - 1; return [{ x: xPlus, y: yPlus }, { x: xPlus, y: y }, { x: xPlus, y: yMinus }, { x: x, y: yPlus }, { x: x, y: yMinus }, { x: xMinus, y: yPlus }, { x: xMinus, y: y }, { x: xMinus, y: yMinus }];
}
//count how many neighbours alive
function aliveAmount(cells, game) { var count = 0; var currentCell = {}; cells.forEach(function (cell) { currentCell = game[cell.y][cell.x]; count += currentCell.alive ? 1 : 0; }); return count;
}
//check if neighbour is alive
function checkDOA(cell, nAlive) { if (nAlive === 3 || nAlive === 2 && cell) { return true; } return false;
}
//Render
ReactDOM.render(React.createElement(App, { width: Math.floor(window.innerWidth / 8), height: Math.floor(window.innerHeight / 8), cellSize: 5, delay: 150
}), document.querySelector('.app'));
React Game of Life - Script Codes
React Game of Life - Script Codes
Home Page Home
Developer Adam
Username rzencoder
Uploaded November 28, 2022
Rating 3
Size 7,264 Kb
Views 14,168
Do you need developer help for React 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!

Adam (rzencoder) Script Codes
Name
Wikipedia Viewer
Playable Piano Keyboard with Demos
React Leaderboard
HTML Canvas Paint App
Heat Map Data Visualisation D3
The Crystal Maze
Map Data Across the Globe
Scrolling Effects Practice
React Betting App
Scatterplot Graph D3
Create amazing web content 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!