MaciejSamborski
/
webgl_game
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed circle clipping through the walls

This commit is contained in:
Maciej Samborski 2024-12-16 17:38:09 +01:00
parent bae774a0ec
commit 6d5222949c
2 changed files with 33 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
script.js
View File

@ -30,10 +30,22 @@ function draw(gfx, dt, pos, velocity) {
gfx.clear(0, 0, 0, 0);
gfx.ctx.uniform2f(gfx.getUniform("u_resolution"), gfx.ctx.canvas.width, gfx.ctx.canvas.height);
drawing.drawCircle(gfx, pos, 200, [1, 0, 0, 1]);
if (pos.x + 200 >= gfx.ctx.canvas.width || pos.x - 200 <= 0)
if (pos.x + 200 >= gfx.ctx.canvas.width) {
pos.x = gfx.ctx.canvas.width - 200;
velocity.x *= -1;
if (pos.y + 200 >= gfx.ctx.canvas.height || pos.y - 200 <= 0)
}
else if (pos.x - 200 <= 0) {
pos.x = 200;
velocity.x *= -1;
}
if (pos.y + 200 >= gfx.ctx.canvas.height) {
pos.y = gfx.ctx.canvas.height - 200;
velocity.y *= -1;
}
else if (pos.y - 200 <= 0) {
pos.y = 200;
velocity.y *= -1;
}
pos.add(velocity.multNew(dt));
}
(() => {
@ -53,7 +65,6 @@ function draw(gfx, dt, pos, velocity) {
let prevTimestamp = 0;
const frame = (timestamp) => {
const deltaTime = (timestamp - prevTimestamp) / 1000;
const time = timestamp / 1000;
prevTimestamp = timestamp;
fullscreenCanvas(gfx, "game");
draw(gfx, deltaTime, pos, velocity);

22
script.ts
View File

@ -38,8 +38,25 @@ function draw(gfx: Graphics, dt: number, pos: Vec2, velocity: Vec2) {
gfx.ctx.uniform2f(gfx.getUniform("u_resolution"), gfx.ctx.canvas.width, gfx.ctx.canvas.height);
drawing.drawCircle(gfx, pos, 200, [1, 0, 0, 1]);
if (pos.x + 200 >= gfx.ctx.canvas.width || pos.x - 200 <= 0) velocity.x *= -1;
if (pos.y + 200 >= gfx.ctx.canvas.height || pos.y - 200 <= 0) velocity.y *= -1;
if (pos.x + 200 >= gfx.ctx.canvas.width)
{
pos.x = gfx.ctx.canvas.width - 200;
velocity.x *= -1;
} else if (pos.x - 200 <= 0)
{
pos.x = 200;
velocity.x *= -1;
}
if (pos.y + 200 >= gfx.ctx.canvas.height)
{
pos.y = gfx.ctx.canvas.height - 200;
velocity.y *= -1;
} else if (pos.y - 200 <= 0)
{
pos.y = 200;
velocity.y *= -1;
}
pos.add(velocity.multNew(dt));
}
@ -66,7 +83,6 @@ function draw(gfx: Graphics, dt: number, pos: Vec2, velocity: Vec2) {
let prevTimestamp = 0;
const frame = (timestamp: number) => {
const deltaTime = (timestamp - prevTimestamp)/1000;
const time = timestamp/1000;
prevTimestamp = timestamp;
fullscreenCanvas(gfx, "game");