diff options
| author | Daniel Silverstone <dsilvers@digital-scurf.org> | 2020-05-23 23:44:34 +0100 |
|---|---|---|
| committer | Daniel Silverstone <dsilvers@digital-scurf.org> | 2020-05-23 23:44:40 +0100 |
| commit | fe429e8d2d76c34b0432acb1f579d62ecfe374de (patch) | |
| tree | 4053ce628f3f07b7e98921d097d0c6c38d3aa035 | |
| parent | d157b505e68da9a3b50a0c10b7e4f3d5a1e48592 (diff) | |
| download | netsurf-fe429e8d2d76c34b0432acb1f579d62ecfe374de.tar.gz netsurf-fe429e8d2d76c34b0432acb1f579d62ecfe374de.tar.bz2 | |
test/js/life: Support changing the size of the canvas
Signed-off-by: Daniel Silverstone <dsilvers@digital-scurf.org>
| -rw-r--r-- | test/js/life.html | 46 |
1 files changed, 40 insertions, 6 deletions
diff --git a/test/js/life.html b/test/js/life.html index caa6a1faa..bb3151b7b 100644 --- a/test/js/life.html +++ b/test/js/life.html @@ -2,7 +2,7 @@ <head> <meta charset="UTF-8" /> <title>Conway's Game of Life</title> - <link rel="stylesheet" type="text/css" href="resource:internal.css"> + <link rel="stylesheet" type="text/css" href="resource:internal.css" /> <style> canvas#surface { width: 50vmin; @@ -14,7 +14,12 @@ <body class="ns-even-bg ns-even-fg ns-border"> <h1 class="ns-border">Conway's Game of Life</h1> <div style="margin: 1em;"> - <div><input id="running" type="checkbox" /> Run</div> + <div> + Run: <input id="running" type="checkbox" /><br /> + Set Size: <input id="width" type="text" size="4" value="50" /> x + <input id="height" type="text" size="4" value="50" /> + <button id="commitsize">Commit</button><br /> + </div> <div> <canvas id="surface" width="50" height="50"> Sorry, you can't play Game of Life if JavaScript is turned off @@ -28,10 +33,12 @@ <script> (function () { const running = document.getElementById("running"); + const iwidth = document.getElementById("width"); + const iheight = document.getElementById("height"); const surface = document.getElementById("surface"); const context = surface.getContext("2d"); - const width = surface.width; - const height = surface.height; + var width = surface.width; + var height = surface.height; var frame = context.createImageData(width, height); var drawto = context.createImageData(width, height); function getOffset(x, y) { @@ -106,7 +113,7 @@ } flip(); }, 100); - document.getElementById("random").addEventListener("click", function () { + const randomise = function () { var ofs = 3; for (var y = 0; y < height; y++) { for (var x = 0; x < width; x++) { @@ -119,7 +126,34 @@ } } flip(); - }); + }; + document.getElementById("random").addEventListener("click", randomise); + document + .getElementById("commitsize") + .addEventListener("click", function () { + const iwval = parseInt(iwidth.value, 10); + const ihval = parseInt(iheight.value, 10); + console.log(width, height, "->", iwval, ihval); + if ( + (iwval != width || ihval != height) && + iwval >= 10 && + iwval <= 200 && + ihval >= 10 && + ihval <= 200 + ) { + console.log("yes"); + surface.height = ihval; + context.height = ihval; + height = ihval; + surface.width = iwval; + context.width = iwval; + width = iwval; + frame = context.createImageData(width, height); + drawto = context.createImageData(width, height); + randomise(); + } + }); + randomise(); })(); </script> </html> |