Game of Life

Developer
Ujjwal Sharma
Size
5,003 Kb
Views
22,264
  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 Ujjwal Sharma on 31 October 2022, Monday.

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="css/style.css">
</head>
<body> <h1>Conway's Game of Life</h1>
<h3>by Ujjwal Sharma</h3>
<div id="mount"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.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/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Game of Life - Script Codes CSS Codes

td.true { background-color: blue;
}
td { width: 8px; height: 8px; border: 1px solid white; padding: 0px;
}
table { margin: auto; border-spacing: 0px; cell-spacing: 0px;
}
h1 { text-align: center;
}
h3 { text-align: right;
}
.buttons button { color: dodgerblue; font-size: 1.6em; width: 200px;
}
.buttons { width: 600px; margin: 20px auto;
}
table { border: 1px solid blue;
}
td:hover { border: 1px solid blue;
}
h2 { text-align: center;
}
.dimension-control { width: 250px; margin: 10px auto;
}
.dimension-control * { width: 50px; padding: 0px;
}

Game of Life - Script Codes JS Codes

'use strict';
var interval;
var running = false;
var dimensionReducer = function dimensionReducer() { var state = arguments.length <= 0 || arguments[0] === undefined ? 20 : arguments[0]; var action = arguments[1]; switch (action.type) { case 'INCREMENT': return state + action.count; case 'DECREMENT': return state - action.count; default: return state; }
};
var dStore = Redux.createStore(dimensionReducer);
var generationReducer = function generationReducer() { var state = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; var action = arguments[1]; switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; }
};
var gStore = Redux.createStore(generationReducer);
var getEmptyGrid = function getEmptyGrid(n) { var grid = []; for (var i = 0; i < n; i++) { var row = []; for (var j = 0; j < n; j++) { row.push({ x: i, y: j, value: false }); } grid.push(row); } return grid;
};
var getRandomGrid = function getRandomGrid(n) { var grid = []; for (var i = 0; i < n; i++) { var row = []; for (var j = 0; j < n; j++) { row.push({ x: i, y: j, value: Math.random() < 0.5 ? true : false }); } grid.push(row); } return grid;
};
var switchCell = function switchCell(state, x, y) { var newState = state; newState[x][y].value = !newState[x][y].value; return newState;
};
var getNeighbors = function getNeighbors(state, x, y, n) { var neighbors = 0; if (x > 0) { if (state[x - 1][y].value) { neighbors++; } if (y > 0 && state[x - 1][y - 1].value) { neighbors++; } if (y < n - 1 && state[x - 1][y + 1].value) { neighbors++; } } if (x < n - 1) { if (state[x + 1][y].value) { neighbors++; } if (y > 0 && state[x + 1][y - 1].value) { neighbors++; } if (y < n - 1 && state[x + 1][y + 1].value) { neighbors++; } } if (y > 0 && state[x][y - 1].value) { neighbors++; } if (y < n - 1 && state[x][y + 1].value) { neighbors++; } return neighbors;
};
var computeGrid = function computeGrid(state, n) { var newState = JSON.parse(JSON.stringify(state)); for (var i = 0; i < n; i++) { for (var j = 0; j < n; j++) { var neighbors = getNeighbors(state, i, j, n); if (state[i][j].value && (neighbors < 2 || neighbors > 3)) { newState[i][j].value = false; } if (!state[i][j].value && neighbors == 3) { newState[i][j].value = true; } } } return newState;
};
var gridReducer = function gridReducer() { var state = arguments.length <= 0 || arguments[0] === undefined ? getRandomGrid(dStore.getState()) : arguments[0]; var action = arguments[1]; switch (action.type) { case 'CLEAR': return getEmptyGrid(dStore.getState()); case 'RANDOMIZE': return getRandomGrid(dStore.getState()); case 'COMPUTE': return computeGrid(state, dStore.getState()); case 'SWITCH': return switchCell(state, action.x, action.y); default: return state; }
};
var store = Redux.createStore(gridReducer);
var GridComponent = function GridComponent(_ref) { var grid = _ref.grid; return React.createElement( 'div', null, React.createElement( 'div', { className: 'buttons' }, React.createElement( 'button', { onClick: function onClick() { store.dispatch({ type: 'CLEAR' }); } }, 'Clear' ), React.createElement( 'button', { onClick: function onClick() { store.dispatch({ type: 'RANDOMIZE' }); } }, 'Randomize' ), React.createElement( 'button', { onClick: function onClick() { store.dispatch({ type: 'COMPUTE' }); } }, 'Compute' ) ), React.createElement( 'table', null, grid.map(function (row) { return React.createElement( 'tr', null, row.map(function (data) { return React.createElement('td', { className: data.value, onClick: function onClick() { store.dispatch({ type: 'SWITCH', x: data.x, y: data.y }); } }); }) ); }) ) );
};
var DimensionComponent = function DimensionComponent(_ref2) { var dimension = _ref2.dimension; return React.createElement( 'div', { className: 'dimension-control' }, React.createElement( 'button', { onClick: function onClick() { dStore.dispatch({ type: 'DECREMENT', count: 10 }); store.dispatch({ type: 'RANDOMIZE' }); } }, '- 10' ), React.createElement( 'button', { onClick: function onClick() { dStore.dispatch({ type: 'DECREMENT', count: 1 }); store.dispatch({ type: 'RANDOMIZE' }); } }, '- 1' ), React.createElement( 'strong', null, dimension ), React.createElement( 'button', { onClick: function onClick() { dStore.dispatch({ type: 'INCREMENT', count: 1 }); store.dispatch({ type: 'RANDOMIZE' }); } }, '+ 1' ), React.createElement( 'button', { onClick: function onClick() { dStore.dispatch({ type: 'INCREMENT', count: 10 }); store.dispatch({ type: 'RANDOMIZE' }); } }, '+ 10' ) );
};
var GenerationComponent = function GenerationComponent(_ref3) { var generation = _ref3.generation; return React.createElement( 'div', null, React.createElement( 'h2', null, 'Generation: ', generation ), React.createElement( 'div', { className: 'buttons' }, React.createElement( 'button', { onClick: function onClick() { interval = setInterval(function () { gStore.dispatch({ type: 'INCREMENT' }); store.dispatch({ type: 'COMPUTE' }); }, 1000); running = true; } }, 'Start' ), React.createElement( 'button', { onClick: function onClick() { clearInterval(interval); } }, 'Stop' ), React.createElement( 'button', null, 'Reset' ) ) );
};
var RootComponent = function RootComponent(_ref4) { var grid = _ref4.grid; var dimension = _ref4.dimension; var generation = _ref4.generation; return React.createElement( 'div', null, React.createElement(GenerationComponent, { generation: generation }), React.createElement(GridComponent, { grid: grid }), React.createElement(DimensionComponent, { dimension: dimension }) );
};
var render = function render() { ReactDOM.render(React.createElement(RootComponent, { grid: store.getState(), dimension: dStore.getState(), generation: gStore.getState() }), document.getElementById('mount'));
};
store.subscribe(render);
dStore.subscribe(render);
render();
Game of Life - Script Codes
Game of Life - Script Codes
Home Page Home
Developer Ujjwal Sharma
Username ryzokuken
Uploaded October 31, 2022
Rating 3
Size 5,003 Kb
Views 22,264
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!

Ujjwal Sharma (ryzokuken) Script Codes
Name
Twitch.tv API
A Pen by Ujjwal Sharma
Portfolio-material
Hermes - v2
Handbook
Camper News
D3 Heatmap
Weather App
Tic Tac Toe
Quote Generator
Create amazing captions 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!