github/wasm-pong
1
0
Fork 0
mirror of https://github.com/thilo-behnke/wasm-pong.git synced 2026-02-14 14:39:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix canvas rendering orientation for y axis

Browse Source
This commit is contained in:
Thilo Behnke
2022-05-02 13:45:34 +02:00
parent 8aa3a496d6
commit 388af15ef9
2 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pong/src/game_field.rs
View File

@@ -135,11 +135,11 @@ impl Field {
let input = input_opt.unwrap();
match input.input {
InputType::UP => {
let updated_vel_y = (obj_mut.vel().y - 1.).max(-5.);
let updated_vel_y = (obj_mut.vel().y + 1.).min(5.);
obj_mut.vel_mut().y = updated_vel_y;
}
InputType::DOWN => {
let updated_vel_y = (obj_mut.vel().y + 1.).min(5.);
let updated_vel_y = (obj_mut.vel().y - 1.).max(-5.);
obj_mut.vel_mut().y = updated_vel_y;
}
};

20
www/index.js
View File

@@ -76,25 +76,29 @@ const drawObjects = () => {
ctx.beginPath();
ctx.strokeStyle = GRID_COLOR;
const obj_y = height - obj.y;
const orientation_y = obj.orientation_y * -1;
const vel_y = obj.vel_y * -1;
// rect
if (obj.shape_param_2) {
ctx.moveTo(obj.x, obj.y)
ctx.arc(obj.x, obj.y, 10, 0, 2 * Math.PI);
ctx.rect(obj.x - obj.shape_param_1 / 2, obj.y - obj.shape_param_2 / 2, obj.shape_param_1, obj.shape_param_2);
ctx.moveTo(obj.x, obj_y)
ctx.arc(obj.x, obj_y, 10, 0, 2 * Math.PI);
ctx.rect(obj.x - obj.shape_param_1 / 2, obj_y - obj.shape_param_2 / 2, obj.shape_param_1, obj.shape_param_2);
}
// circle
else {
ctx.moveTo(obj.x, obj.y);
ctx.arc(obj.x, obj.y, obj.shape_param_1, 0, 2 * Math.PI);
ctx.moveTo(obj.x, obj_y);
ctx.arc(obj.x, obj_y, obj.shape_param_1, 0, 2 * Math.PI);
}
ctx.stroke();
if (debug) {
// velocity
drawLine(ctx, obj.x, obj.y, obj.x + obj.vel_x * 20, obj.y + obj.vel_y * 20, 'red')
drawLine(ctx, obj.x, obj_y, obj.x + obj.vel_x * 20, obj_y + vel_y * 20, 'red')
// orientation
drawLine(ctx, obj.x, obj.y, obj.x + obj.orientation_x * 20, obj.y + obj.orientation_y * 20, 'blue')
ctx.fillText(`[x: ${obj.x}, y: ${obj.y}]`, obj.x + 10, obj.y)
drawLine(ctx, obj.x, obj_y, obj.x + obj.orientation_x * 20, obj_y + orientation_y * 20, 'blue')
ctx.fillText(`[x: ${obj.x}, y: ${obj_y}]`, obj.x + 10, obj_y)
}
})
}