Game of Life

Developer
Codoer
Size
7,462 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?

What is a game of life? How do you make a game of life? This script and codes were developed by Codoer on 07 December 2022, Wednesday.

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 prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='app'></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.1.0/redux-thunk.js'></script> <script src="js/index.js"></script>
</body>
</html>

Game of Life - Script Codes CSS Codes

body { text-align: center; background-color: #7e3878;
}
tr:first-child td { border-top: 1px solid black;
}
#app { margin-right: auto; margin-left: auto;
}
.maintitle { text-align: center; margin-top: 35px; margin-bottom: 25px; font-size: 50px; color: white;
}
.but { text-align: center; margin-bottom: 25px;
}
button { margin-left: 10px;
}
.Generation { margin-bottom: 0; text-align: center; background-color: #333; padding-left: 40px; padding-right: 40px; padding-top: 10px; display: inline-block; color: white; font-size: 25px; width: 260px; text-align: left;
}
table { background-color: #222; border: 10px solid #333; border-spacing: 1px; margin-right: auto; margin-left: auto;
}
td { width: 1em; height: 1em; border-collapse: collapse; border-right: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black;
}
.live { background-color: #ddd;
}
.new { background-color: #00a300;
}
.killed { background-color: #A20025;
}

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; }
/*
Any live cell with fewer than two live neighbours dies, as if caused by underpopulation.
Any live cell with two or three live neighbours lives on to the next generation.
Any live cell with more than three live neighbours dies, as if by overpopulation.
Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.
*/
var arr = [], x = [];
var setInter;
var row = 25;
var column = 40;
var gen = 0;
var idName;
var addArr = [];
var set1 = function set1() { //pause game; gen = 0; clearInterval(setInter); setInter = false;
};
var boardArr = function boardArr(row, column, initial) { var random = arguments.length <= 3 || arguments[3] === undefined ? false : arguments[3]; arr = JSON.parse(JSON.stringify([])); for (var i = 0; i < row; i++) { arr[i] = []; for (var j = 0; j < column; j++) { if (!random) { arr[i][j] = [initial, random]; } else { arr[i][j] = [Math.round(Math.random()), random]; } } } x = JSON.parse(JSON.stringify(arr)); return arr;
};
boardArr(row, column, 3, true);
var change = function change() { //core function apply 4 game rules; arr.forEach(function (row, i) { row.forEach(function (col, j) { var lastRow = arr.length - 1, lastCol = arr[0].length - 1, prevRow = i - 1 < 0 ? lastRow : i - 1, prevCol = j - 1 < 0 ? lastCol : j - 1, nextRow = i + 1 > lastRow ? 0 : i + 1, nextCol = j + 1 > lastCol ? 0 : j + 1, sum = arr[prevRow][prevCol][0] + arr[prevRow][j][0] + arr[prevRow][nextCol][0] + arr[i][prevCol][0] + arr[i][nextCol][0] + arr[nextRow][prevCol][0] + arr[nextRow][j][0] + arr[nextRow][nextCol][0]; if (col[0] === 0) { if (sum === 3) { x[i][j][0] = 1;x[i][j][1] = 'new'; } else { x[i][j][0] = 0;x[i][j][1] = 'zero'; }; } else if (col[0] === 1) { if (sum < 2) { x[i][j][0] = 0;x[i][j][1] = 'killed'; } else if (sum > 3) { x[i][j][0] = 0;x[i][j][1] = 'killed'; } else if (sum === 3 || sum === 2) { x[i][j][0] = 1;x[i][j][1] = 'live'; } } }); }); if (arr.toString() !== x.toString()) { gen++; } //compare 2 arrays, when they are same, generation counting stops; arr = $.extend(true, [], x); //arr=JSON.parse(JSON.stringify(x)); return arr;
};
var change1 = function change1() { return { type: 'CHANGE' };
};
var clear1 = function clear1() { return { type: 'CLEAR' };
};
var add1 = function add1() { return { type: 'ADD' };
};
var random1 = function random1() { return { type: 'RANDOM' };
};
var big1 = function big1() { return { type: 'BIG' };
};
var back1 = function back1() { return { type: 'BACK' };
};
var boardReducer = function boardReducer() { var _console; var state = arguments.length <= 0 || arguments[0] === undefined ? arr : arguments[0]; var action = arguments[1]; switch (action.type) { case 'CHANGE': return change(); case 'CLEAR': arr = JSON.parse(JSON.stringify(boardArr(row, column, 0, false))); return arr; case 'RANDOM': arr = JSON.parse(JSON.stringify(boardArr(row, column, 0, true))); return arr; case 'BIG': row = 40;column = 60; arr = JSON.parse(JSON.stringify(boardArr(row, column, 0, true))); return arr; case 'BACK': row = 25;column = 40; arr = JSON.parse(JSON.stringify(boardArr(row, column, 0, true))); return arr; case 'ADD': addArr = JSON.parse(JSON.stringify(state)); //addArr=[...state.map(s => [...s])]; (_console = console).log.apply(_console, state); if (addArr[idName[0]][idName[1]][0] === 0) { addArr[idName[0]][idName[1]][0] = 1;addArr[idName[0]][idName[1]][1] = 'new'; } else if (addArr[idName[0]][idName[1]][0] === 1) { addArr[idName[0]][idName[1]][0] = 0;addArr[idName[0]][idName[1]][1] = 'killed'; } //addArr[idName[0]][idName[1]]=1; arr = $.extend(true, [], addArr); return arr; default: return state; }
};
var store = Redux.createStore(boardReducer);
var Provider = ReactRedux.Provider;
var connect = ReactRedux.connect;
var Td = function Td(props) { var td1 = props.data.map(function (v, j) { var cName = v[1]; return React.createElement('td', { id: props.ind + '-' + j, className: cName, onClick: props.add }); }); return React.createElement( 'div', null, td1 );
};
var Game = function (_React$Component) { _inherits(Game, _React$Component); function Game(props) { _classCallCheck(this, Game); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.tableMaker = function () { return _this.props.data.map(function (val, i) { return React.createElement( 'tr', { id: 'i-' + i }, React.createElement(Td, { state: _this.props.data, data: val, ind: i, add: _this.handleAdd }) ); }); }; _this.handleStop = function () { clearInterval(setInter); setInter = false; }; _this.handleResume = function () { if (!setInter) { setInter = setInterval(_this.props.makeNewBoard, 100); } }; _this.handleClear = function () { set1(); _this.props.makeClearBoard(); }; _this.handleRandom = function () { set1(); _this.props.makeRandomBoard(); if (!setInter) { setInter = setInterval(_this.props.makeNewBoard, 100); } }; _this.handleBig = function () { set1(); _this.props.makeBigBoard(); if (!setInter) { setInter = setInterval(_this.props.makeNewBoard, 100); } }; _this.handleBack = function () { set1(); _this.props.makeBackBoard(); if (!setInter) { setInter = setInterval(_this.props.makeNewBoard, 100); } }; _this.handleNext = function () { clearInterval(setInter); setInter = false; _this.props.makeNewBoard(); }; _this.handleAdd = function (e) { idName = e.target.id.split('-'); //return current clicking tag id name's array, idName[0]=row, idName[1]=column; console.log(idName); //$(e.target).attr('class', 'live'); _this.props.makeAddBoard(); }; return _this; } Game.prototype.componentDidMount = function componentDidMount() { if (!setInter) { setInter = setInterval(this.props.makeNewBoard, 100); } }; Game.prototype.render = function render() { return React.createElement( 'div', null, React.createElement( 'div', { className: 'maintitle' }, 'Game of Life' ), React.createElement( 'div', { className: 'but' }, React.createElement( 'button', { className: 'btn btn-success', onClick: this.handleResume }, 'Run' ), React.createElement( 'button', { className: 'btn btn-warning', onClick: this.handleStop }, 'Pause' ), React.createElement( 'button', { className: 'btn btn-info', onClick: this.handleNext }, 'Next' ), React.createElement( 'button', { className: 'btn btn-danger', onClick: this.handleClear }, 'Clear' ), React.createElement( 'button', { className: 'btn btn-primary', onClick: this.handleRandom }, 'Random' ), React.createElement( 'button', { className: 'btn btn-secondary', onClick: this.handleBack }, 'Size: 25X40' ), React.createElement( 'button', { className: 'btn btn-secondary', onClick: this.handleBig }, 'Size: 40X60' ) ), React.createElement( 'h3', { className: 'Generation' }, 'Generation: ', gen ), React.createElement( 'table', null, React.createElement( 'tbody', null, this.tableMaker() ) ) ); }; return Game;
}(React.Component);
var mapStateToProps = function mapStateToProps(state) { return { data: state };
};
var mapDispatchToProps = function mapDispatchToProps(dispatch) { return { makeNewBoard: function makeNewBoard() { dispatch(change1()); }, makeClearBoard: function makeClearBoard() { dispatch(clear1()); }, makeRandomBoard: function makeRandomBoard() { dispatch(random1()); }, makeBigBoard: function makeBigBoard() { dispatch(big1()); }, makeBackBoard: function makeBackBoard() { dispatch(back1()); }, makeAddBoard: function makeAddBoard() { dispatch(add1()); } };
};
var Container = connect(mapStateToProps, mapDispatchToProps)(Game);
var AppWrapper = function (_React$Component2) { _inherits(AppWrapper, _React$Component2); function AppWrapper() { _classCallCheck(this, AppWrapper); return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments)); } AppWrapper.prototype.render = function render() { return React.createElement( Provider, { store: store }, React.createElement(Container, null) ); }; return AppWrapper;
}(React.Component);
ReactDOM.render(React.createElement(AppWrapper, null), document.getElementById('app'));
Game of Life - Script Codes
Game of Life - Script Codes
Home Page Home
Developer Codoer
Username c0d0er
Uploaded December 07, 2022
Rating 3
Size 7,462 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!

Codoer (c0d0er) Script Codes
Name
Twitch TV App
React Camper Leaderboard
React Recipe Box
Visualize Data with a Heat Map
Visualize US GDP Data with a Bar Chart
Wikipedia Viewer
Random Quote Machine
Pomodoro Clock
Game of Life React
React Roguelike Dungeon Crawler Game
Create amazing video scripts 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!