thib8956/js-canvas-playground
1
0
Fork 0
Code Issues Pull Requests Activity

move: fix canvas size and bad dt unit

Browse Source
This commit is contained in:
thib8956
2026-08-05 20:05:01 +02:00
parent 2fc219d7b1
commit 8032bdd31a
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
move.ts
+3 -3
View File
@@ -48,7 +48,7 @@ function updateFollow(ctx: CanvasRenderingContext2D, dt: number) {
function updateBounce(ctx: CanvasRenderingContext2D, dt: number) { function updateBounce(ctx: CanvasRenderingContext2D, dt: number) {
// update head pos // update head pos
// P_t+1 = P_t + V * t // P_t+1 = P_t + V * t
const newPos = trail[0].add(velocity.scale(0.001*dt)); const newPos = trail[0].add(velocity.scale(dt));
if (newPos.x > ctx.canvas.width - 100) { velocity.x *= -1; newPos.x = ctx.canvas.width - 100; } if (newPos.x > ctx.canvas.width - 100) { velocity.x *= -1; newPos.x = ctx.canvas.width - 100; }
if (newPos.y > ctx.canvas.height - 100) { velocity.y *= -1; newPos.y = ctx.canvas.height - 100; } if (newPos.y > ctx.canvas.height - 100) { velocity.y *= -1; newPos.y = ctx.canvas.height - 100; }
if (newPos.x < 100) { velocity.x *= -1; newPos.x = 100; } if (newPos.x < 100) { velocity.x *= -1; newPos.x = 100; }
@@ -82,8 +82,8 @@ function init() {
if (!canvas) throw new Error("unable to get canvas HTML element"); if (!canvas) throw new Error("unable to get canvas HTML element");
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D | null; const ctx = canvas.getContext("2d") as CanvasRenderingContext2D | null;
if (!ctx) throw new Error("unable to get canvas 2D context"); if (!ctx) throw new Error("unable to get canvas 2D context");
ctx.canvas.width = ctx.canvas.clientWidth; ctx.canvas.width = window.innerWidth
ctx.canvas.height = ctx.canvas.clientHeight; ctx.canvas.height = window.innerHeight
canvas.onmousemove = (evt) => { canvas.onmousemove = (evt) => {
const {clientX, clientY} = evt; const {clientX, clientY} = evt;
snake.html
+1 -1
View File
@@ -9,7 +9,7 @@
<body> <body>
<div id="status-line"></div> <div id="status-line"></div>
<div class="canvas-wrapper"> <div class="canvas-wrapper">
<canvas id="game-canvas"></canvas> <canvas id="game-canvas" tabindex="0"></canvas>
</div> </div>
<script type="module" src="snake.js"></script> <script type="module" src="snake.js"></script>
</body> </body>