daddy32/Physilinks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make scene scaling responsive

Browse Source
This commit is contained in:
Daddy32
2025-12-13 10:23:08 +01:00
parent 4ae787bb0f
commit dd702e0a2c
2 changed files with 251 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
scenes.js
View File

@@ -21,33 +21,71 @@
maxLengthMultiplier: 3.2,
},
},
createBodies: (w, h) => [
Bodies.rectangle(w / 2, h + 40, w, 80, {
isStatic: true,
restitution: 0.8,
render: { fillStyle: "#0ea5e9", strokeStyle: "#0ea5e9" },
}),
Bodies.rectangle(-40, h / 2, 80, h * 2, {
isStatic: true,
render: { fillStyle: "#f97316", strokeStyle: "#f97316" },
}),
Bodies.rectangle(w + 40, h / 2, 80, h * 2, {
isStatic: true,
render: { fillStyle: "#f97316", strokeStyle: "#f97316" },
}),
Bodies.rectangle(w * 0.25, h * 0.55, 160, 20, {
isStatic: true,
angle: -0.3,
render: { fillStyle: "#22c55e", strokeStyle: "#22c55e" },
plugin: { rotSpeed: 0.1 },
}),
Bodies.rectangle(w * 0.7, h * 0.4, 220, 24, {
isStatic: true,
angle: 0.26,
render: { fillStyle: "#a855f7", strokeStyle: "#a855f7" },
plugin: { rotSpeed: -0.08 },
}),
],
createBodies: (w, h) => {
const floorHeight = Math.max(60, h * 0.12);
const wallThickness = Math.max(32, w * 0.05);
const wallHeight = h * 1.6;
const platformHeight = Math.max(14, h * 0.025);
const smallPlatformWidth = Math.max(140, w * 0.18);
const largePlatformWidth = Math.max(180, w * 0.22);
return [
Bodies.rectangle(
w / 2,
h + floorHeight / 2,
w + wallThickness * 2,
floorHeight,
{
isStatic: true,
restitution: 0.8,
render: { fillStyle: "#0ea5e9", strokeStyle: "#0ea5e9" },
},
),
Bodies.rectangle(
-wallThickness / 2,
h / 2,
wallThickness,
wallHeight,
{
isStatic: true,
render: { fillStyle: "#f97316", strokeStyle: "#f97316" },
},
),
Bodies.rectangle(
w + wallThickness / 2,
h / 2,
wallThickness,
wallHeight,
{
isStatic: true,
render: { fillStyle: "#f97316", strokeStyle: "#f97316" },
},
),
Bodies.rectangle(
w * 0.25,
h * 0.55,
smallPlatformWidth,
platformHeight,
{
isStatic: true,
angle: -0.3,
render: { fillStyle: "#22c55e", strokeStyle: "#22c55e" },
plugin: { rotSpeed: 0.1 },
},
),
Bodies.rectangle(
w * 0.7,
h * 0.4,
largePlatformWidth,
platformHeight * 1.2,
{
isStatic: true,
angle: 0.26,
render: { fillStyle: "#a855f7", strokeStyle: "#a855f7" },
plugin: { rotSpeed: -0.08 },
},
),
];
},
},
{
id: "scene2",
@@ -68,43 +106,70 @@
maxLengthMultiplier: 4.7,
},
},
createBodies: (w, h) => [
Bodies.rectangle(w / 2, h + 50, w, 100, {
isStatic: true,
restitution: 0.9,
render: { fillStyle: "#0ea5e9", strokeStyle: "#0ea5e9" },
}),
Bodies.rectangle(-50, h / 2, 100, h * 2, {
isStatic: true,
render: { fillStyle: "#7c3aed", strokeStyle: "#7c3aed" },
}),
Bodies.rectangle(w + 50, h / 2, 100, h * 2, {
isStatic: true,
render: { fillStyle: "#7c3aed", strokeStyle: "#7c3aed" },
}),
Bodies.rectangle(w * 0.2, h * 0.45, 200, 18, {
isStatic: true,
angle: 0.08,
render: { fillStyle: "#f97316", strokeStyle: "#f97316" },
}),
Bodies.rectangle(w * 0.5, h * 0.6, 260, 18, {
isStatic: true,
angle: -0.04,
render: { fillStyle: "#14b8a6", strokeStyle: "#14b8a6" },
}),
Bodies.rectangle(w * 0.8, h * 0.42, 180, 18, {
isStatic: true,
angle: 0.14,
render: { fillStyle: "#c084fc", strokeStyle: "#c084fc" },
}),
],
createBodies: (w, h) => {
const floorHeight = Math.max(70, h * 0.12);
const wallThickness = Math.max(32, w * 0.05);
const wallHeight = h * 1.8;
const ledgeHeight = Math.max(14, h * 0.022);
const leftWidth = Math.max(160, w * 0.18);
const midWidth = Math.max(190, w * 0.26);
const rightWidth = Math.max(150, w * 0.18);
return [
Bodies.rectangle(
w / 2,
h + floorHeight / 2,
w + wallThickness * 2,
floorHeight,
{
isStatic: true,
restitution: 0.9,
render: { fillStyle: "#0ea5e9", strokeStyle: "#0ea5e9" },
},
),
Bodies.rectangle(
-wallThickness / 2,
h / 2,
wallThickness,
wallHeight,
{
isStatic: true,
render: { fillStyle: "#7c3aed", strokeStyle: "#7c3aed" },
},
),
Bodies.rectangle(
w + wallThickness / 2,
h / 2,
wallThickness,
wallHeight,
{
isStatic: true,
render: { fillStyle: "#7c3aed", strokeStyle: "#7c3aed" },
},
),
Bodies.rectangle(w * 0.2, h * 0.45, leftWidth, ledgeHeight, {
isStatic: true,
angle: 0.08,
render: { fillStyle: "#f97316", strokeStyle: "#f97316" },
}),
Bodies.rectangle(w * 0.5, h * 0.6, midWidth, ledgeHeight, {
isStatic: true,
angle: -0.04,
render: { fillStyle: "#14b8a6", strokeStyle: "#14b8a6" },
}),
Bodies.rectangle(w * 0.8, h * 0.42, rightWidth, ledgeHeight, {
isStatic: true,
angle: 0.14,
render: { fillStyle: "#c084fc", strokeStyle: "#c084fc" },
}),
];
},
},
{
id: "scene3",
name: "Fast drop maze",
config: {
gravity: 1.25,
spawnIntervalMs: 420,
spawnIntervalMs: 220,
minChain: 3,
palette: ["#e879f9", "#38bdf8", "#f97316", "#22c55e"],
ballRadius: 16,
@@ -119,26 +184,51 @@
},
},
createBodies: (w, h) => {
const floorHeight = Math.max(60, h * 0.1);
const wallThickness = Math.max(28, w * 0.045);
const wallHeight = h * 1.5;
const pegRadius = Math.max(10, Math.min(22, Math.min(w, h) * 0.03));
const platformHeight = Math.max(12, h * 0.02);
const leftPlatformWidth = Math.max(120, w * 0.16);
const rightPlatformWidth = Math.max(130, w * 0.18);
const bodies = [
Bodies.rectangle(w / 2, h + 40, w, 80, {
isStatic: true,
restitution: 0.75,
render: { fillStyle: "#14b8a6", strokeStyle: "#14b8a6" },
}),
Bodies.rectangle(-40, h / 2, 80, h * 2, {
isStatic: true,
render: { fillStyle: "#f472b6", strokeStyle: "#f472b6" },
}),
Bodies.rectangle(w + 40, h / 2, 80, h * 2, {
isStatic: true,
render: { fillStyle: "#f472b6", strokeStyle: "#f472b6" },
}),
Bodies.rectangle(
w / 2,
h + floorHeight / 2,
w + wallThickness * 2,
floorHeight,
{
isStatic: true,
restitution: 0.75,
render: { fillStyle: "#14b8a6", strokeStyle: "#14b8a6" },
},
),
Bodies.rectangle(
-wallThickness / 2,
h / 2,
wallThickness,
wallHeight,
{
isStatic: true,
render: { fillStyle: "#f472b6", strokeStyle: "#f472b6" },
},
),
Bodies.rectangle(
w + wallThickness / 2,
h / 2,
wallThickness,
wallHeight,
{
isStatic: true,
render: { fillStyle: "#f472b6", strokeStyle: "#f472b6" },
},
),
];
for (let i = 0; i < 5; i += 1) {
const x = (w * (i + 1)) / 6;
const y = h * 0.35 + (i % 2 === 0 ? 40 : -30);
const y = h * 0.35 + (i % 2 === 0 ? h * 0.06 : -h * 0.05);
bodies.push(
Bodies.circle(x, y, 18, {
Bodies.circle(x, y, pegRadius, {
isStatic: true,
restitution: 0.9,
render: { fillStyle: "#facc15", strokeStyle: "#facc15" },
@@ -146,16 +236,28 @@
);
}
bodies.push(
Bodies.rectangle(w * 0.3, h * 0.55, 140, 16, {
isStatic: true,
angle: -0.3,
render: { fillStyle: "#8b5cf6", strokeStyle: "#8b5cf6" },
}),
Bodies.rectangle(w * 0.7, h * 0.58, 160, 16, {
isStatic: true,
angle: 0.28,
render: { fillStyle: "#10b981", strokeStyle: "#10b981" },
}),
Bodies.rectangle(
w * 0.3,
h * 0.55,
leftPlatformWidth,
platformHeight,
{
isStatic: true,
angle: -0.3,
render: { fillStyle: "#8b5cf6", strokeStyle: "#8b5cf6" },
},
),
Bodies.rectangle(
w * 0.7,
h * 0.58,
rightPlatformWidth,
platformHeight * 1.05,
{
isStatic: true,
angle: 0.28,
render: { fillStyle: "#10b981", strokeStyle: "#10b981" },
},
),
);
return bodies;
},