Playground/wasm-game-of-life
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add play/pause button and toggle cell

Browse Source
This commit is contained in:
Fabian Schmidt
2025-02-24 11:12:17 +01:00
parent 7a68255eac
commit f68977a557
3 changed files with 65 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
www/index.html
View File

@@ -22,6 +22,7 @@
<body>
<canvas id="game-of-life-canvas"></canvas>
<button id="play-pause"></button>
<script src="./bootstrap.js"></script>
</body>

50
www/index.js
View File

@@ -16,8 +16,28 @@ const canvas = document.getElementById("game-of-life-canvas");
canvas.height = (CELL_SIZE + 1) * height + 1;
canvas.width = (CELL_SIZE + 1) * width + 1;
canvas.addEventListener("mousedown", event => {
const boundingRect = canvas.getBoundingClientRect();
const scaleX = canvas.width / boundingRect.width;
const scaleY = canvas.height / boundingRect.height;
const canvasLeft = (event.clientX - boundingRect.left) * scaleX;
const canvasTop = (event.clientY - boundingRect.top) * scaleY;
const row = Math.min(Math.floor(canvasTop / (CELL_SIZE + 1)), height - 1);
const col = Math.min(Math.floor(canvasLeft / (CELL_SIZE + 1)), width - 1);
universe.toggle_cell(row, col);
drawGrid();
drawCells();
});
const ctx = canvas.getContext('2d');
const playPauseButton = document.getElementById("play-pause");
const drawGrid = () => {
ctx.beginPath();
ctx.strokeStyle = GRID_COLOR;
@@ -66,16 +86,42 @@ const drawCells = () => {
ctx.stroke();
};
const isPaused = () => {
return animationId === null;
};
const play = () => {
playPauseButton.textContent = "⏸";
renderLoop();
};
const pause = () => {
playPauseButton.textContent = "▶";
cancelAnimationFrame(animationId);
animationId = null;
};
playPauseButton.addEventListener("click", event => {
if (isPaused()) {
play();
} else {
pause();
}
});
let animationId = null;
const renderLoop = () => {
universe.tick();
drawGrid();
drawCells();
requestAnimationFrame(renderLoop);
animationId = requestAnimationFrame(renderLoop);
};
drawGrid();
drawCells();
requestAnimationFrame(renderLoop);
// requestAnimationFrame(renderLoop);
play();