histausse/wasm-game-of-life-www
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

use canvas instead of txt

Browse source
This commit is contained in:
histausse 2021-05-11 21:43:24 +02:00
parent bef70f4482
commit e36fb20761
Signed by: histausse
GPG key ID: 67486F107F62E9E9
2 changed files with 68 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -18,7 +18,7 @@
</style>
</head>
<body>
<pre id="game-of-life-canvas"></pre>
<canvas id="game-of-life-canvas"></canvas>
<script src="./bootstrap.js"></script>
</body>
</html>

70
index.js
View file

@ -1,12 +1,76 @@
import { Universe } from "wasm-game-of-life";
import { Universe, Cell } from "wasm-game-of-life";
// Import wasm memory
import { memory } from "wasm-game-of-life/wasm_game_of_life_bg";
const CELL_SIZE = 5;
const GRID_COLOR = "#CCCCCC";
const DEAD_COLOR = "#FFFFFF";
const ALIVE_COLOR = "#000000";
const pre = document.getElementById("game-of-life-canvas");
const universe = Universe.new();
const width = universe.width();
const height = universe.height();
const canvas = document.getElementById("game-of-life-canvas");
canvas.height = (CELL_SIZE + 1) * height + 1;
canvas.width = (CELL_SIZE + 1) * width + 1;
const ctx = canvas.getContext('2d');
const renderLoop = () => {
pre.textContent = universe.render();
drawGrid();
drawCells();
universe.tick();
requestAnimationFrame(renderLoop);
};
const drawGrid = () => {
ctx.beginPath();
ctx.strokeStyle = GRID_COLOR;
for (let i = 0; i <= width; i++) {
ctx.moveTo(i * (CELL_SIZE + 1) + 1, 0);
ctx.lineTo(i * (CELL_SIZE + 1) + 1, (CELL_SIZE + 1) * height + 1);
}
for (let j = 0; j <= height; j++) {
ctx.moveTo(0, j * (CELL_SIZE + 1) + 1);
ctx.lineTo((CELL_SIZE + 1) * width + 1, j * (CELL_SIZE + 1) + 1);
}
ctx.stroke();
}
const getIndex = (row, column) => {
return row * width + column;
}
const drawCells = () => {
const cellsPtr = universe.cells();
const cells = new Uint8Array(memory.buffer, cellsPtr, width * height);
ctx.beginPath();
for (let row = 0; row < height; row++) {
for (let col = 0; col < width; col++) {
const i = getIndex(row, col);
ctx.fillStyle = cells[i] === Cell.Dead
? DEAD_COLOR
: ALIVE_COLOR;
ctx.fillRect(
col * (CELL_SIZE + 1) + 1,
row * (CELL_SIZE + 1) + 1,
CELL_SIZE,
CELL_SIZE
);
}
}
ctx.stroke();
}
requestAnimationFrame(renderLoop);