fix: floor misaligned with container walls causing fall-through

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:
2026-04-12 18:24:19 +07:00
parent 458751c363
commit a57fda7ba4
2 changed files with 3 additions and 3 deletions

View File

@@ -1,7 +1,6 @@
import Matter from 'matter-js';
import { FRUITS } from './fruits.js';
import {
CANVAS_WIDTH,
CONTAINER_WIDTH,
CONTAINER_HEIGHT,
CONTAINER_X,
@@ -23,6 +22,7 @@ export function createWalls() {
const wallHeight = CONTAINER_HEIGHT;
const wallY = CONTAINER_Y + CONTAINER_HEIGHT / 2;
const floorX = CONTAINER_X + CONTAINER_WIDTH / 2;
const floorY = CONTAINER_Y + CONTAINER_HEIGHT + 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 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];
}

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.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(fruit.name.slice(0, 2), x, y);
ctx.fillText(fruit.tier + 1, x, y);
}
function drawFruits(ctx, bodies) {