Gitweb links:
...log
http://git.netsurf-browser.org/netsurf.git/shortlog/af158650d82360a6c9d6d7f120372240e2c31a88
...commit
http://git.netsurf-browser.org/netsurf.git/commit/af158650d82360a6c9d6d7f120372240e2c31a88
...tree
http://git.netsurf-browser.org/netsurf.git/tree/af158650d82360a6c9d6d7f120372240e2c31a88
The branch, master has been updated
via af158650d82360a6c9d6d7f120372240e2c31a88 (commit)
from 4534002d5c9e327c67bf6499c77b555f9c6a682d (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
- Log -----------------------------------------------------------------
commitdiff
http://git.netsurf-browser.org/netsurf.git/commit/?id=af158650d82360a6c9d6d7f120372240e2c31a88
commit af158650d82360a6c9d6d7f120372240e2c31a88
Author: Daniel Silverstone <[email protected]>
Commit: Daniel Silverstone <[email protected]>
test/js: Game of Life
Signed-off-by: Daniel Silverstone <[email protected]>
diff --git a/test/js/index.html b/test/js/index.html
index f922872..0329467 100644
--- a/test/js/index.html
+++ b/test/js/index.html
@@ -105,6 +105,7 @@
<li><a href="wikipedia-lcm.html">Example from wikipedia</a></li>
<li><a href="verify-instanceofness.html">Check instanceof behaviour</a></li>
<li><a href="mandelbrot.html">Canvas/ImageData Mandelbrot ploter</a></li>
+<li><a href="life.html">Game of Life</a></li>
</ul>
</body>
diff --git a/test/js/life.html b/test/js/life.html
new file mode 100644
index 0000000..d0841c0
--- /dev/null
+++ b/test/js/life.html
@@ -0,0 +1,122 @@
+<html>
+ <head>
+ <meta charset="UTF-8" />
+ <title>Conway's Game of Life</title>
+ <style>
+ canvas#surface {
+ width: 50vmin;
+ height: 50vmin;
+ border: 2px solid black;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Conway's Game of Life</h1>
+ <div><input id="running" type="checkbox" /> Run</div>
+ <div>
+ <canvas id="surface" width="50" height="50">
+ Sorry, you can't play Game of Life if JavaScript is turned off
+ </canvas>
+ </div>
+ <div>
+ <button id="random">Randomise</button>
+ </div>
+ </body>
+ <script>
+ (function () {
+ const running = document.getElementById("running");
+ const surface = document.getElementById("surface");
+ const context = surface.getContext("2d");
+ const width = surface.width;
+ const height = surface.height;
+ var frame = context.createImageData(width, height);
+ var drawto = context.createImageData(width, height);
+ function getOffset(x, y) {
+ if (x < 0) {
+ x = width + x;
+ }
+ if (y < 0) {
+ y = height + y;
+ }
+ if (x >= width) {
+ x = x - width;
+ }
+ if (y >= height) {
+ y = y - height;
+ }
+ return (y * width + x) * 4;
+ }
+ function getCell(x, y) {
+ const offset = getOffset(x, y);
+ return frame.data[offset + 3] != 0;
+ }
+ function setCell(x, y) {
+ const offset = getOffset(x, y);
+ drawto.data[offset + 3] = 255;
+ }
+ function clearCell(x, y) {
+ const offset = getOffset(x, y);
+ drawto.data[offset + 3] = 0;
+ }
+ function countNeighbours(x, y) {
+ return (
+ getCell(x - 1, y - 1) +
+ getCell(x, y - 1) +
+ getCell(x + 1, y - 1) +
+ getCell(x - 1, y) +
+ getCell(x + 1, y) +
+ getCell(x - 1, y + 1) +
+ getCell(x, y + 1) +
+ getCell(x + 1, y + 1)
+ );
+ }
+ function flip() {
+ var temp = frame;
+ context.putImageData(drawto, 0, 0);
+ frame = drawto;
+ drawto = temp;
+ }
+ /* Game of life is run on a timer */
+ setInterval(function () {
+ if (!running.checked) {
+ return;
+ }
+ console.log("Frame");
+ /* To do a frame of GoL we compute by consuming frame and writing to
drawto */
+ for (var y = 0; y < height; y++) {
+ for (var x = 0; x < width; x++) {
+ const neighbours = countNeighbours(x, y);
+ if (getCell(x, y)) {
+ if (neighbours == 2 || neighbours == 3) {
+ setCell(x, y); // live, 2/3 neigh => stay alive
+ } else {
+ clearCell(x, y); // live, <2/>3 neigh => dies
+ }
+ } else {
+ if (neighbours == 3) {
+ setCell(x, y); // dead, 3 neigh => born
+ } else {
+ clearCell(x, y); // dead, !3 neigh => stay dead
+ }
+ }
+ }
+ }
+ flip();
+ }, 100);
+ document.getElementById("random").addEventListener("click", function () {
+ var ofs = 3;
+ for (var y = 0; y < height; y++) {
+ for (var x = 0; x < width; x++) {
+ if (Math.random() < 0.5) {
+ drawto.data[ofs] = 0;
+ } else {
+ drawto.data[ofs] = 255;
+ }
+ ofs += 4;
+ }
+ }
+ flip();
+ });
+ })();
+ </script>
+</html>
-----------------------------------------------------------------------
Summary of changes:
test/js/index.html | 1 +
test/js/life.html | 122 ++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 123 insertions(+)
create mode 100644 test/js/life.html
diff --git a/test/js/index.html b/test/js/index.html
index f922872..0329467 100644
--- a/test/js/index.html
+++ b/test/js/index.html
@@ -105,6 +105,7 @@
<li><a href="wikipedia-lcm.html">Example from wikipedia</a></li>
<li><a href="verify-instanceofness.html">Check instanceof behaviour</a></li>
<li><a href="mandelbrot.html">Canvas/ImageData Mandelbrot ploter</a></li>
+<li><a href="life.html">Game of Life</a></li>
</ul>
</body>
diff --git a/test/js/life.html b/test/js/life.html
new file mode 100644
index 0000000..d0841c0
--- /dev/null
+++ b/test/js/life.html
@@ -0,0 +1,122 @@
+<html>
+ <head>
+ <meta charset="UTF-8" />
+ <title>Conway's Game of Life</title>
+ <style>
+ canvas#surface {
+ width: 50vmin;
+ height: 50vmin;
+ border: 2px solid black;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Conway's Game of Life</h1>
+ <div><input id="running" type="checkbox" /> Run</div>
+ <div>
+ <canvas id="surface" width="50" height="50">
+ Sorry, you can't play Game of Life if JavaScript is turned off
+ </canvas>
+ </div>
+ <div>
+ <button id="random">Randomise</button>
+ </div>
+ </body>
+ <script>
+ (function () {
+ const running = document.getElementById("running");
+ const surface = document.getElementById("surface");
+ const context = surface.getContext("2d");
+ const width = surface.width;
+ const height = surface.height;
+ var frame = context.createImageData(width, height);
+ var drawto = context.createImageData(width, height);
+ function getOffset(x, y) {
+ if (x < 0) {
+ x = width + x;
+ }
+ if (y < 0) {
+ y = height + y;
+ }
+ if (x >= width) {
+ x = x - width;
+ }
+ if (y >= height) {
+ y = y - height;
+ }
+ return (y * width + x) * 4;
+ }
+ function getCell(x, y) {
+ const offset = getOffset(x, y);
+ return frame.data[offset + 3] != 0;
+ }
+ function setCell(x, y) {
+ const offset = getOffset(x, y);
+ drawto.data[offset + 3] = 255;
+ }
+ function clearCell(x, y) {
+ const offset = getOffset(x, y);
+ drawto.data[offset + 3] = 0;
+ }
+ function countNeighbours(x, y) {
+ return (
+ getCell(x - 1, y - 1) +
+ getCell(x, y - 1) +
+ getCell(x + 1, y - 1) +
+ getCell(x - 1, y) +
+ getCell(x + 1, y) +
+ getCell(x - 1, y + 1) +
+ getCell(x, y + 1) +
+ getCell(x + 1, y + 1)
+ );
+ }
+ function flip() {
+ var temp = frame;
+ context.putImageData(drawto, 0, 0);
+ frame = drawto;
+ drawto = temp;
+ }
+ /* Game of life is run on a timer */
+ setInterval(function () {
+ if (!running.checked) {
+ return;
+ }
+ console.log("Frame");
+ /* To do a frame of GoL we compute by consuming frame and writing to
drawto */
+ for (var y = 0; y < height; y++) {
+ for (var x = 0; x < width; x++) {
+ const neighbours = countNeighbours(x, y);
+ if (getCell(x, y)) {
+ if (neighbours == 2 || neighbours == 3) {
+ setCell(x, y); // live, 2/3 neigh => stay alive
+ } else {
+ clearCell(x, y); // live, <2/>3 neigh => dies
+ }
+ } else {
+ if (neighbours == 3) {
+ setCell(x, y); // dead, 3 neigh => born
+ } else {
+ clearCell(x, y); // dead, !3 neigh => stay dead
+ }
+ }
+ }
+ }
+ flip();
+ }, 100);
+ document.getElementById("random").addEventListener("click", function () {
+ var ofs = 3;
+ for (var y = 0; y < height; y++) {
+ for (var x = 0; x < width; x++) {
+ if (Math.random() < 0.5) {
+ drawto.data[ofs] = 0;
+ } else {
+ drawto.data[ofs] = 255;
+ }
+ ofs += 4;
+ }
+ }
+ flip();
+ });
+ })();
+ </script>
+</html>
--
NetSurf Browser
_______________________________________________
netsurf-commits mailing list -- [email protected]
To unsubscribe send an email to [email protected]
