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

move: add style

Browse Source
This commit is contained in:
thib8956
2026-08-19 11:44:57 +02:00
parent eeb4466c37
commit a40f10ab22
2 changed files with 55 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
move.html
+40 -4
View File
@@ -3,13 +3,49 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello typescript</title> <title>Movement demo</title>
<style> <style>
canvas { display: block; width: 100vw; height: 100vh; } body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#status-line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 20px;
margin-left: 1rem;
color: #ffffff;
}
.canvas-wrapper {
width: 90vw;
height: 90vh;
border-radius: 16px;
background-color: #1e293b;
}
#canvas {
display: block;
width: 100%;
height: 100%;
}
</style> </style>
</head> </head>
<body style="margin: 0; padding: 0; overflow: hidden; background-color: #000000"> <body>
<canvas id="canvas" tabindex="0"></canvas> <div id="status-line"></div>
<div class="canvas-wrapper">
<canvas id="canvas" tabindex="0"></canvas>
</div>
<script type="module" src="./move.js"></script> <script type="module" src="./move.js"></script>
</body> </body>
</html> </html>
move.ts
+15 -6
View File
@@ -2,6 +2,8 @@ import Vec2d from "./vec.js";
import { drawCircle, resizeCanvas } from "./common.js"; import { drawCircle, resizeCanvas } from "./common.js";
const SEGMENT_SPACING = 100; const SEGMENT_SPACING = 100;
const CIRCLE_RADIUS = 20;
const CIRCLE_COLOR = 0xff00ff;
function initTrail(pos: Vec2d, len: number) { function initTrail(pos: Vec2d, len: number) {
return Array.from({ length: len }, (_, i) => pos.add(new Vec2d(-1, 0).scale(i * SEGMENT_SPACING))); return Array.from({ length: len }, (_, i) => pos.add(new Vec2d(-1, 0).scale(i * SEGMENT_SPACING)));
@@ -30,7 +32,7 @@ function update(ctx: CanvasRenderingContext2D, timestamp: number) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
for (const pos of trail) { for (const pos of trail) {
drawCircle(ctx, pos, 20, 0xFF00FF); drawCircle(ctx, pos, CIRCLE_RADIUS, CIRCLE_COLOR);
} }
window.requestAnimationFrame(t => update(ctx, t)); window.requestAnimationFrame(t => update(ctx, t));
@@ -55,10 +57,10 @@ 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(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 - CIRCLE_RADIUS) { velocity.x *= -1; newPos.x = ctx.canvas.width - CIRCLE_RADIUS; }
if (newPos.y > ctx.canvas.height - 100) { velocity.y *= -1; newPos.y = ctx.canvas.height - 100; } if (newPos.y > ctx.canvas.height - CIRCLE_RADIUS) { velocity.y *= -1; newPos.y = ctx.canvas.height - CIRCLE_RADIUS; }
if (newPos.x < 100) { velocity.x *= -1; newPos.x = 100; } if (newPos.x < CIRCLE_RADIUS) { velocity.x *= -1; newPos.x = CIRCLE_RADIUS; }
if (newPos.y < 100) { velocity.y *= -1; newPos.y = 100; } if (newPos.y < CIRCLE_RADIUS) { velocity.y *= -1; newPos.y = CIRCLE_RADIUS; }
trail[0] = newPos; trail[0] = newPos;
updateTrail(); updateTrail();
} }
@@ -93,6 +95,7 @@ function init() {
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 = ctx.canvas.clientWidth;
ctx.canvas.height = ctx.canvas.clientHeight; ctx.canvas.height = ctx.canvas.clientHeight;
setStatusLine(`mode: ${mode}`);
canvas.onmousemove = (evt) => { canvas.onmousemove = (evt) => {
const {clientX, clientY} = evt; const {clientX, clientY} = evt;
@@ -107,7 +110,7 @@ function init() {
if (mode === "bounce") mode = "follow"; if (mode === "bounce") mode = "follow";
else if (mode === "follow") mode = "circle"; else if (mode === "follow") mode = "circle";
else if (mode === "circle") mode = "bounce"; else if (mode === "circle") mode = "bounce";
console.log(mode); setStatusLine(`mode: ${mode}`);
} }
window.addEventListener('resize', () => resizeCanvas(ctx)); window.addEventListener('resize', () => resizeCanvas(ctx));
@@ -115,4 +118,10 @@ function init() {
window.requestAnimationFrame(t => update(ctx, t)); window.requestAnimationFrame(t => update(ctx, t));
} }
function setStatusLine(text: string) {
const statusLine = document.getElementById("status-line");
if (!statusLine) throw new Error("unable to get status line");
statusLine.innerText = text;
}
init(); init();