The Game of Life, also known simply as Life, is a cellular automaton devised by the British mathematician John Horton Conway in 1970. The "game" is a zero-player game, meaning that its evolution is determined by its initial state, requiring no further input. One interacts with the Game of Life by creating an initial configuration and observing how it evolves or, for advanced players, by creating patterns with particular properties. ...Read more in Wikipedia
Check out the demo HERE
Insert the dependencies in the html
- jQuery, Bootstrap, Font Awesome
<head>
...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.1.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script>
...
</head>Including this Game of Life widget is extremely simple.
Include the gameoflife.js in the head of your html document
<head>
...
<script src="https://cdn.rawgit.com/jungkumseok/gameoflife/master/gameoflife/src/conwaygameoflife.js"></script>
</head>You can load the Game of Life using any of the following methods:
In your html, use the tag
<body>
<game-of-life></game-of-life>
</body>On your div element, use the css class 'game-of-life'
<body>
<div class='game-of-life'></div>
</body>In your Javascript, use the jQuery method $(element).GameOfLife()
<body>
<div id='my_container'></div>
<script>
$('#my_container').GameOfLife();
</script>
</body>In your Javascript, use the bindGameOfLife() method
<body>
<div id='my_container'></div>
<script>
var container = document.getElementById('my_container');
bindGameOfLife(container);
</script>
</body>Enjoy :)
- Build Dynamic Preset Loader (data storage needed - possibly firebase)
- Build Dynamic "Component" Loader (data storage needed - possibly firebase)
- Modify 'zoom' behavior so that it does not clear the cells
- Add drag & select behavior for the cells