Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Conway`s Game Of Life</title>
- </head>
- <body>
- <canvas id="myCanvas" width="600" height="600" style="border: 1px solid #000000;" onclick="changeCell()">
- Your browser does not support the HTML5 canvas tag.
- </canvas>
- <p>
- <input type="button" value="Clear" onclick="init()" />
- <input type="button" id="go" value="Run" onclick="run()" />
- <input type="button" value="Stop" onclick="stop()" />
- <input type="button" value="Step" onclick="play()" />
- </p>
- <script>
- function init() {
- for (var i = 0; i < field.length; i++) {
- for (var j = 0; j < field.length; j++) {
- field[i][j] = 0;
- ctx.fillStyle = '#FFFFFF';
- ctx.strokeStyle = '#000000';
- ctx.strokeRect(cellSize*j, cellSize*i, cellSize, cellSize);
- ctx.fillRect(cellSize*j, cellSize*i, cellSize, cellSize);
- }
- }
- }
- function run() {
- document.getElementById("go").disabled = true;
- timerId = setInterval(play, 400);
- }
- function stop() {
- clearInterval(timerId);
- document.getElementById("go").disabled = false;
- }
- function play() {
- var newField = new Array(fieldSize);
- for (var i = 0; i < fieldSize; i++) {
- newField[i] = new Array(fieldSize);
- }
- for (var i = 0; i < fieldSize; i++) {
- for (var j = 0; j < fieldSize; j++) {
- var count = 0;
- for (var x = -1; x <= 1; x++) {
- for (var y = -1; y <= 1; y++) {
- count += field[(i + x + fieldSize) % fieldSize][(j + y + fieldSize) % fieldSize];
- }
- }
- count -= field[i][j];
- if (count === 3 && field[i][j] === 0) {
- newField[i][j] = 1;
- ctx.fillStyle = '#000000';
- }
- else if ((count === 3 || count === 2) && field[i][j] === 1) {
- newField[i][j] = 1;
- ctx.fillStyle = '#000000';
- }
- else {
- newField[i][j] = 0;
- ctx.fillStyle = '#FFFFFF'
- }
- ctx.strokeStyle = '#000000';
- ctx.strokeRect(cellSize*j, cellSize*i, cellSize, cellSize);
- ctx.fillRect(cellSize*j, cellSize*i, cellSize, cellSize);
- }
- }
- for (var i = 0; i < fieldSize; i++) {
- for (var j = 0; j < fieldSize; j++) {
- field[i][j] = newField[i][j];
- }
- }
- }
- function changeCell() {
- var x = Math.ceil(((event.pageX - 9) / cellSize) - 1);
- var y = Math.ceil(((event.pageY - 9) / cellSize) - 1);
- if (field[y][x] === 1) {
- field[y][x] = 0;
- ctx.fillStyle = '#FFFFFF';
- }
- else {
- field[y][x] = 1;
- ctx.fillStyle = '#000000';
- }
- ctx.strokeStyle = '#000000';
- ctx.strokeRect(cellSize*x, cellSize*y, cellSize, cellSize);
- ctx.fillRect(cellSize*x, cellSize*y, cellSize, cellSize);
- }
- var fieldSize = 60;
- var cellSize = 10;
- var field = new Array(fieldSize);
- var timerId = setInterval(play, 400);
- for (var i = 0; i < field.length; i++) {
- field[i] = [];
- }
- for (var i = 0; i < fieldSize; i++) {
- for (var j = 0; j < fieldSize; j++) {
- field[i][j] = 0;
- }
- }
- var canvas = document.getElementById("myCanvas");
- var ctx = canvas.getContext("2d");
- for (var i = 0; i < fieldSize; i++) {
- for (var j = 0; j < fieldSize; j++) {
- ctx.fillStyle = '#FFFFFF';
- ctx.strokeStyle = '#000000';
- ctx.strokeRect(cellSize*j, cellSize*i, cellSize, cellSize);
- ctx.fillRect(cellSize*j, cellSize*i, cellSize, cellSize);
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement