GIF89a; %PDF-1.5 %���� ºaâÚÎΞ-ÌE1ÍØÄ÷{òò2ÿ ÛÖ^ÔÀá TÎ{¦?§®¥kuµùÕ5sLOšuY
Server IP : 134.29.175.74 / Your IP : 216.73.216.160 Web Server : nginx/1.10.2 System : Windows NT CST-WEBSERVER 10.0 build 19045 (Windows 10) i586 User : Administrator ( 0) PHP Version : 7.1.0 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/nginx/html/Life/ |
Upload File : |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Conway's Game of Life</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1><a href="https://codepen.io/sernadesigns/pen/QKjEbV" title="On codepen">Conway's Game of Life</a></h1> by <a href="http://lea.verou.me/" title="Lea's website">Lea Verou</a> on <a href="https://github.com/mrnz/game-of-life" title="on github">github</a> <table id="grid"></table> <div id="info"> Generation: <span id="generations"></span> Cells alive: <span id="alive"></span> </div> <div class="buttons"> <button id="next" type="button" name="button" class="next"></button> <label id="autoplay-label" for="autoplay" class="css-label"> <input class="css-checkbox" id="autoplay" type="checkbox" name="autoplay" /> Autoplay </label> <label id="speed-label" for="speed"> Speed <input type="range" id="speed" min="100" max="1100" step="100" value="600"> </label> </div> <script type="text/javascript" src="Life.js"></script> </body> </html> <!-- Conway's Game of Life by Lea Verou. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Conway's Game of Life</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Conway's Game of Life</h1> <button class="next">Next</button> <input id="autoplay" type="checkbox"> <label class="button" for="autoplay">Autoplay</label> <table id="grid"></table> <footer></footer> <script type="text/javascript" src="Life.js"></script> </body> </html> CSS * { padding: 0; margin: 0; } body { text-align: center; font-family: sans-serif; } h1 { margin: 0.5em 0 1em; } #grid { margin: 1em auto 0; border-spacing: 0; border-collapse: collapse; } #grid td { border: 1px solid gray; } @keyframes birth { 50% { box-shadow: 0 0 0 99px green inset; } } @-webkit-keyframes birth { 50% { box-shadow: 0 0 0 99px green inset; } } #grid input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 20px; height: 20px; background: white; } #grid input[type="checkbox"]:checked { /* fix firefox checkbox bug */ box-shadow: 0 0 0 99px black inset; -webkit-animation: birth 500ms; } button, .button { padding: .4em .6em; border: 1px solid rgba(0,0,0,.2); border-radius: .3em; box-shadow: 0 1px 0 hsla(0,0%,100%,.7) inset, 0 .15em .1em rgba(0,0,0,.3); background: linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,100%,0)) hsl(80,80%,35%); color: white; text-shadow: 0 -.05em .05em rgba(0,0,0,.3); font: inherit; font-weight: bold; outline: none; } button:enabled:active, .button:active, input[type="checkbox"]:checked + label.button { background-image: none; box-shadow: 0 .1em .2em rgba(0,0,0,.5) inset; } button:disabled { background: hsl(80,20%,40%); cursor: not-allowed; } #autoplay { position: absolute; clip: rect(0,0,0,0); } JS // Very basic jQuery selector function function $(selector, container) { return (container || document).querySelector(selector); } (function() { var _ = self.Life = function(seed) { this.seed = seed; this.height = seed.length; this.width = seed[0].length; this.prevBoard = []; this.board = cloneArray(seed); }; _.prototype = { next: function () { this.prevBoard = cloneArray(this.board); for (var y = 0; y < this.height; y++) { for (var x= 0 ; x < this.width; x++) { var neighbors = this.aliveNeighbors(this.prevBoard, x, y); var alive = !!this.board[y][x]; if (alive) { if (neighbors < 2 || neighbors > 3) { this.board[y][x] = 0; } } else { if (neighbors == 3) { this.board[y][x] = 1; } } } } }, aliveNeighbors: function (array, x, y) { var prevRow = array[y-1] || []; var nextRow = array[y+1] || []; return [ prevRow[x-1], prevRow[x], prevRow[x+1], array[y][x-1], array[y][x+1], nextRow[x-1], nextRow[x], nextRow[x+1] ].reduce(function (prev, cur) { return prev + +!!cur; }, 0); }, toString: function () { return this.board.map(function (row) { return row.join(' '); }).join('\n'); } }; // Helpers // Warning: Only clones to 2D arrays function cloneArray(array) { return array.slice().map(function (row) { return row.slice(); }); } })(); (function() { var _ = self.LifeView = function (table, size) { this.grid = table; this.size = size; this.started = false; this.autoplay = false; this.createGrid(); }; _.prototype = { createGrid: function () { var me = this; var fragment = document.createDocumentFragment(); this.grid.innerHTML = ''; this.checkboxes = []; for (var y = 0; y < this.size; y++) { var row = document.createElement('tr'); this.checkboxes[y] = []; for (var x = 0 ; x < this.size; x++) { var cell = document.createElement('td'); var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; this.checkboxes[y][x] = checkbox; checkbox.coords = [y, x]; cell.appendChild(checkbox); row.appendChild(cell); } fragment.appendChild(row); } this.grid.addEventListener('change', function(evt) { if (evt.target.nodeName.toLowerCase() == 'input') { me.started = false; } }); this.grid.addEventListener('keyup', function(evt) { var checkbox = evt.target; if (evt.target.nodeName.toLowerCase() == 'input') { var coords = checkbox.coords; var y = coords[0]; var x = coords[1]; switch (evt.keyCode) { case 37: // left if (x > 0) { me.checkboxes[y][x-1].focus(); } break; case 38: // up if (y > 0) { me.checkboxes[y-1][x].focus(); } break; case 39: // right if (x < me.size - 1) { me.checkboxes[y][x+1].focus(); } break; case 40: // down if (y < me.size - 1) { me.checkboxes[y+1][x].focus(); } break; } } }); this.grid.appendChild(fragment); }, get boardArray() { return this.checkboxes.map(function (row) { return row.map(function (checkbox) { return +checkbox.checked; }); }); }, play: function () { this.game = new Life(this.boardArray); this.started = true; }, next: function () { var me = this; if (!this.started || this.game) { this.play(); } this.game.next(); var board = this.game.board; for (var y = 0; y < this.size; y++) { for (var x = 0; x < this.size; x++) { this.checkboxes[y][x].checked = !!board[y][x]; } } if (this.autoplay) { this.timer = setTimeout(function () { me.next(); }, 1000); } } }; })(); var lifeView = new LifeView(document.getElementById('grid'), 12); (function() { var buttons = { next: $('button.next') }; buttons.next.addEventListener('click', function(event) { lifeView.next(); }); $('#autoplay').addEventListener('change', function() { buttons.next.disabled = this.checked; lifeView.autoplay = this.checked; if (this.checked) { lifeView.autoplay = this.checked; lifeView.next(); } else { clearInterval(lifeView.timer); } }); })(); -->