eukara
/
WebSurf
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

test/js/life: Support changing the size of the canvas 

Signed-off-by: Daniel Silverstone <dsilvers@digital-scurf.org>
This commit is contained in:
Daniel Silverstone 2020-05-23 23:44:34 +01:00
parent d157b505e6
commit fe429e8d2d
No known key found for this signature in database
GPG Key ID: C30DF439F2987D74
1 changed files with 40 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
test/js/life.html
View File

@ -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>