tiennm99/try-claudekit
1
0
Fork 0
mirror of https://github.com/tiennm99/try-claudekit.git synced 2026-04-17 13:21:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: floor misaligned with container walls causing fall-through

Browse Source 
The floor was centered on CANVAS_WIDTH/2 but the container is no longer
centered in the canvas (NEXT panel on right). This created a 26px gap
at the bottom-left corner. Center floor on CONTAINER_X + CONTAINER_WIDTH/2
to match the walls. Also display fruit tier numbers instead of names.
This commit is contained in:
tiennm99
2026-04-12 18:24:19 +07:00
parent 458751c363
commit a57fda7ba4
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/physics.js
View File

@@ -1,7 +1,6 @@
import Matter from 'matter-js'; import Matter from 'matter-js';
import { FRUITS } from './fruits.js'; import { FRUITS } from './fruits.js';
import { import {
CANVAS_WIDTH,
CONTAINER_WIDTH, CONTAINER_WIDTH,
CONTAINER_HEIGHT, CONTAINER_HEIGHT,
CONTAINER_X, CONTAINER_X,
@@ -23,6 +22,7 @@ export function createWalls() {
const wallHeight = CONTAINER_HEIGHT; const wallHeight = CONTAINER_HEIGHT;
const wallY = CONTAINER_Y + CONTAINER_HEIGHT / 2; const wallY = CONTAINER_Y + CONTAINER_HEIGHT / 2;
const floorX = CONTAINER_X + CONTAINER_WIDTH / 2;
const floorY = CONTAINER_Y + CONTAINER_HEIGHT + WALL_THICKNESS / 2; const floorY = CONTAINER_Y + CONTAINER_HEIGHT + WALL_THICKNESS / 2;
const floorWidth = CONTAINER_WIDTH + WALL_THICKNESS * 2; const floorWidth = CONTAINER_WIDTH + WALL_THICKNESS * 2;
@@ -30,7 +30,7 @@ export function createWalls() {
const leftWall = Bodies.rectangle(leftX, wallY, WALL_THICKNESS, wallHeight, wallOptions); const leftWall = Bodies.rectangle(leftX, wallY, WALL_THICKNESS, wallHeight, wallOptions);
const rightWall = Bodies.rectangle(rightX, wallY, WALL_THICKNESS, wallHeight, wallOptions); const rightWall = Bodies.rectangle(rightX, wallY, WALL_THICKNESS, wallHeight, wallOptions);
const floor = Bodies.rectangle(CANVAS_WIDTH / 2, floorY, floorWidth, WALL_THICKNESS, wallOptions); const floor = Bodies.rectangle(floorX, floorY, floorWidth, WALL_THICKNESS, wallOptions);
return [leftWall, rightWall, floor]; return [leftWall, rightWall, floor];
} }

2
src/renderer.js
View File

@@ -99,7 +99,7 @@ function drawFruitCircle(ctx, fruit, x, y, radius) {
ctx.font = `bold ${Math.max(10, r * 0.6)}px sans-serif`; ctx.font = `bold ${Math.max(10, r * 0.6)}px sans-serif`;
ctx.textAlign = 'center'; ctx.textAlign = 'center';
ctx.textBaseline = 'middle'; ctx.textBaseline = 'middle';
ctx.fillText(fruit.name.slice(0, 2), x, y); ctx.fillText(fruit.tier + 1, x, y);
} }
function drawFruits(ctx, bodies) { function drawFruits(ctx, bodies) {