mirror of
https://github.com/tiennm99/try-claudekit.git
synced 2026-04-17 15:21:21 +00:00
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:
@@ -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];
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user