Game of Life

Developer
Zac Clemans
Size
4,856 Kb
Views
8,096
  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 implemented using React and SCSS for freeCodeCamp. Uses the simple neighbor counting algorithm from the Graphics Programming Black Book by Michael Abrash.. What is a game of life? How do you make a game of life? This script and codes were developed by Zac Clemans on 14 January 2023, Saturday.

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> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app-container"></div> <script src='https://fb.me/react-0.14.7.js'></script>
<script src='https://fb.me/react-dom-0.14.7.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Game of Life - Script Codes CSS Codes

#app-container { margin: 50px auto; width: 660px;
}
#app-container h1 { color: #4c4c4c;
}
#app-container td { width: 10px; height: 10px; border: 1px solid #4c4c4c;
}
#app-container td.status-0 { background: #1a1c1d;
}
#app-container td.status-1 { background: red;
}
#app-container button { width: 100px; height: 30px; margin-top: 1px; margin-right: 1px; border: none; background: #4c4c4c; color: white; font-size: 18px; font-weight: bold;
}
#app-container #genCounter { display: inline-block; float: right; margin-top: 1px; padding-left: 5px; padding-right: 5px; height: 30px; background: #4c4c4c; color: white; font-size: 18px; font-weight: bold; line-height: 30px;
}

Game of Life - Script Codes JS Codes

"use strict";
var Cell = React.createClass({ displayName: "Cell", handleClick: function handleClick() { this.props.returnLocation(this.props.row, this.props.column); }, render: function render() { return React.createElement("td", { className: "status-" + this.props.status, onClick: this.handleClick }); }
});
var CellGrid = React.createClass({ displayName: "CellGrid", handleClick: function handleClick(row, column) { this.props.onCellClick(row, column); }, render: function render() { var gridNodes = this.props.grid.map(function (row, rowIndex) { var cellNodes = row.map(function (cell, cellIndex) { return React.createElement(Cell, { status: cell, row: rowIndex, column: cellIndex, returnLocation: this.handleClick }); }.bind(this)); return React.createElement( "tr", null, cellNodes ); }.bind(this)); return React.createElement( "table", null, React.createElement( "tbody", null, gridNodes ) ); }
});
var PauseLifeButton = React.createClass({ displayName: "PauseLifeButton", render: function render() { return React.createElement( "button", { onClick: this.props.onUse }, "Pause" ); }
});
var ResumeLifeButton = React.createClass({ displayName: "ResumeLifeButton", render: function render() { return React.createElement( "button", { onClick: this.props.onUse }, "Start" ); }
});
var ClearGridButton = React.createClass({ displayName: "ClearGridButton", render: function render() { return React.createElement( "button", { onClick: this.props.onUse }, "Clear" ); }
});
var LifeApp = React.createClass({ displayName: "LifeApp", getInitialState: function getInitialState() { var grid = []; var lifeChance = 0.45; for (var i = 0; i < this.props.initialSize; i++) { var row = []; for (var j = 0; j < this.props.initialSize; j++) { if (Math.random() < lifeChance) { row.push(1); } else { row.push(0); } } grid.push(row); } return { grid: grid, genCounter: 0 }; }, componentDidMount: function componentDidMount() { runLife = setInterval(this.lifeLoop, 300); }, lifeLoop: function lifeLoop() { var newGrid = []; for (var i = 0; i < this.props.initialSize; i++) { var newRow = []; for (var j = 0; j < this.props.initialSize; j++) { var neighborCount = this.getCellState(i - 1, j - 1) + this.getCellState(i - 1, j) + this.getCellState(i - 1, j + 1) + this.getCellState(i, j - 1) + this.getCellState(i, j + 1) + this.getCellState(i + 1, j - 1) + this.getCellState(i + 1, j) + this.getCellState(i + 1, j + 1); if (this.state.grid[i][j] == 1) { if (neighborCount == 2 || neighborCount == 3) { newRow.push(1); } else { newRow.push(0); } } else { if (neighborCount == 3) { newRow.push(1); } else { newRow.push(0); } } } newGrid.push(newRow); } this.setState({ grid: newGrid, genCounter: this.state.genCounter + 1 }); }, stopLifeLoop: function stopLifeLoop() { clearInterval(runLife); runLife = false; }, resumeLifeLoop: function resumeLifeLoop() { if (!runLife) { runLife = setInterval(this.lifeLoop, 100); } }, clearGrid: function clearGrid() { this.stopLifeLoop(); var clearedGrid = []; for (var i = 0; i < this.props.initialSize; i++) { var clearedRow = []; for (var j = 0; j < this.props.initialSize; j++) { clearedRow.push(0); } clearedGrid.push(clearedRow); } this.setState({ grid: clearedGrid, genCounter: 0 }); }, getCellState: function getCellState(x, y) { if (x < 0 || x >= this.props.initialSize || y < 0 || y >= this.props.initialSize) { return 0; } else { return this.state.grid[x][y]; } }, handleCellClick: function handleCellClick(row, column) { var newGrid = this.state.grid; newGrid[row][column] = newGrid[row][column] == 1 ? 0 : 1; this.setState({ grid: newGrid }); }, render: function render() { return React.createElement( "div", null, React.createElement( "h1", null, "Conway's Game of Life" ), React.createElement(CellGrid, { grid: this.state.grid, onCellClick: this.handleCellClick }), React.createElement(PauseLifeButton, { onUse: this.stopLifeLoop }), React.createElement(ResumeLifeButton, { onUse: this.resumeLifeLoop }), React.createElement(ClearGridButton, { onUse: this.clearGrid }), React.createElement( "div", { id: "genCounter" }, "Generation: ", this.state.genCounter ) ); }
});
var runLife = false;
ReactDOM.render(React.createElement(LifeApp, { initialSize: 40 }), document.getElementById("app-container"));
$("#stop").click(function () { clearInterval(runLife);
});
Game of Life - Script Codes
Game of Life - Script Codes
Home Page Home
Developer Zac Clemans
Username thalpha
Uploaded January 14, 2023
Rating 3
Size 4,856 Kb
Views 8,096
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!

Zac Clemans (thalpha) Script Codes
Name
Twitch Streamer Status
Camper News
D3 Map Project
Local Weather App
Recipe Box Redux Refactor
Wikipedia Viewer
FCC Camper Leaderboard Redux Refactor
OOLO Calculator - Vanilla JS
D3 Bar Graph Project
Pomodoro Timer
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!