Add new christmas level

This commit is contained in:
Daddy32
2025-12-29 16:01:30 +01:00
parent 76ffee449d
commit 9243ac2df5
5 changed files with 300 additions and 2 deletions

View File

@@ -110,6 +110,7 @@
<script src="./src/scenes/scene-fastdrop.js"></script>
<script src="./src/scenes/scene-lavalamp.js"></script>
<script src="./src/scenes/scene-relax.js"></script>
<script src="./src/scenes/scene-christmas-calm.js"></script>
<script src="./src/scenes/scene-swirl-arena.js"></script>
<script src="./src/scenes/scene-storm-grid.js"></script>
<script src="./src/scenes/scene-stack-blocks-chaos.js"></script>

View File

@@ -16,8 +16,17 @@
ui,
}) => {
const setHighlight = (body, on) => {
body.render.lineWidth = on ? 4 : 2;
body.render.strokeStyle = on ? "#f8fafc" : "#0b1222";
const lineWidth = on ? 4 : 2;
const strokeStyle = on ? "#f8fafc" : "#0b1222";
const applyHighlight = (target) => {
target.render = target.render || {};
target.render.lineWidth = lineWidth;
target.render.strokeStyle = strokeStyle;
};
applyHighlight(body);
if (Array.isArray(body.parts) && body.parts.length > 1) {
body.parts.forEach((part) => applyHighlight(part));
}
};
const resetChainVisuals = () => {

View File

@@ -8,6 +8,7 @@
"scene-lava",
"swirl-arena",
"relax",
"christmas-calm",
"stack-blocks-chaos",
"low-g-terraces",
"fast-drop-maze",

View File

@@ -0,0 +1,171 @@
(() => {
const { Bodies, Body, Vertices } = Matter;
const scenes = (window.PhysilinksSceneDefs =
window.PhysilinksSceneDefs || []);
scenes.push({
id: "christmas-calm",
name: "Christmas calm",
config: {
gravity: 0.5,
spawnIntervalMs: 720,
spawnBatchMin: 1,
spawnBatchMax: 2,
minChain: 3,
palette: ["#b91c1c", "#15803d", "#f59e0b", "#7dd3fc", "#fda4af"],
ballRadius: 20,
ballShape: "gift",
giftRibbonColor: "#f8fafc",
debugSpawn: true,
initialSpawnCount: 10,
initialSpawnArea: ({ width, height }) => ({
xMin: width * 0.28,
xMax: width * 0.72,
yMin: height * 0.76,
yMax: height * 0.88,
}),
winCondition: {
type: "score",
target: 12000,
onWin: { shoveBalls: true },
},
messages: {
text: "Cozy winter glow",
position: { xPercent: 50, yPercent: 12 },
},
link: {
stiffness: 0.7,
lengthScale: 1.05,
damping: 0.05,
lineWidth: 4,
rope: true,
renderType: "line",
maxLengthMultiplier: 5.4,
},
backdrop: {
colors: ["#0f172a", "#14532d", "#1f2937"],
opacity: 0.35,
blur: 26,
speedSec: 34,
},
},
createBodies: (w, h) => {
const wallThickness = Math.max(32, w * 0.045);
const wallHeight = h * 1.7;
const floorHeight = Math.max(70, h * 0.12);
const treeBaseRadius = Math.min(w, h) * 0.22;
const treeMidRadius = Math.min(w, h) * 0.16;
const treeTopRadius = Math.min(w, h) * 0.11;
const trunkWidth = treeBaseRadius * 0.3;
const trunkHeight = treeBaseRadius * 0.35;
const treeCenterX = w * 0.5;
const treeBaseY = h * 0.62;
const treeMidY = h * 0.52;
const treeTopY = h * 0.43;
const treeColor = "#166534";
const trunkColor = "#7c2d12";
const makeTriangle = (x, y, radius) => {
const points = [
{ x: 0, y: -radius },
{ x: radius, y: radius },
{ x: -radius, y: radius },
];
return Bodies.fromVertices(
x,
y,
[points],
{
isStatic: true,
render: { fillStyle: treeColor, strokeStyle: treeColor },
},
true,
);
};
const makeComet = (x, y, size) => {
const baseStar = Vertices.fromPath(
"50 0 63 38 100 38 69 59 82 100 50 75 18 100 31 59 0 38 37 38",
);
const scale = (size || 50) / 50;
const points = baseStar.map((p) => ({
x: (p.x - 50) * scale,
y: (p.y - 50) * scale,
}));
const star = Bodies.fromVertices(
x,
y,
[points],
{
isStatic: true,
render: { fillStyle: "#facc15", strokeStyle: "#facc15" },
},
true,
);
const tail = Bodies.rectangle(
x + size * 1.1,
y + size * 0.2,
size * 2.1,
size * 0.45,
{
isStatic: true,
angle: 0.35,
render: { fillStyle: "#fde68a", strokeStyle: "#fde68a" },
},
);
const starParts =
Array.isArray(star.parts) && star.parts.length > 1
? star.parts
: [star];
return Body.create({
isStatic: true,
parts: [...starParts, tail],
render: { fillStyle: "#facc15", strokeStyle: "#facc15" },
plugin: { rotSpeed: 0.35 },
});
};
return [
Bodies.rectangle(
w / 2,
h + floorHeight / 2,
w + wallThickness * 2,
floorHeight,
{
isStatic: true,
restitution: 0.7,
render: { fillStyle: "#e2e8f0", strokeStyle: "#e2e8f0" },
},
),
Bodies.rectangle(-wallThickness / 2, h / 2, wallThickness, wallHeight, {
isStatic: true,
render: { fillStyle: "#0f766e", strokeStyle: "#0f766e" },
}),
Bodies.rectangle(
w + wallThickness / 2,
h / 2,
wallThickness,
wallHeight,
{
isStatic: true,
render: { fillStyle: "#0f766e", strokeStyle: "#0f766e" },
},
),
makeTriangle(treeCenterX, treeBaseY, treeBaseRadius),
makeTriangle(treeCenterX, treeMidY, treeMidRadius),
makeTriangle(treeCenterX, treeTopY, treeTopRadius),
Bodies.rectangle(
treeCenterX,
treeBaseY + treeBaseRadius * 0.65,
trunkWidth,
trunkHeight,
{
isStatic: true,
render: { fillStyle: trunkColor, strokeStyle: trunkColor },
},
),
makeComet(w * 0.2, h * 0.25, Math.max(18, w * 0.025)),
];
},
});
})();

View File

@@ -120,6 +120,7 @@
const createBallBodies = (x, y, color) => {
const scene = getCurrentScene();
const ballPhysics = scene?.config?.ballPhysics || {};
const debugSpawn = !!scene?.config?.debugSpawn;
const commonOpts = {
restitution: ballPhysics.restitution ?? 0.72,
friction: ballPhysics.friction ?? 0.01,
@@ -186,6 +187,71 @@
};
return { bodies: [body], constraints: [], blobId: null };
}
if (scene?.config?.ballShape === "gift") {
const size = config.ballRadius * 2;
const ribbonSize = Math.max(4, config.ballRadius * 0.35);
const ribbonColor = scene?.config?.giftRibbonColor || "#f8fafc";
if (debugSpawn) {
console.log("Spawn gift", {
sceneId: scene?.id,
x,
y,
color,
size,
});
}
const base = Bodies.rectangle(x, y, size, size, {
...commonOpts,
chamfer: { radius: Math.max(2, config.ballRadius * 0.18) },
});
const ribbonRender = {
fillStyle: ribbonColor,
strokeStyle: "#0b1222",
lineWidth: 2,
};
const verticalRibbon = Bodies.rectangle(x, y, ribbonSize, size * 1.02, {
render: ribbonRender,
});
const horizontalRibbon = Bodies.rectangle(
x,
y,
size * 1.02,
ribbonSize,
{
render: ribbonRender,
},
);
const bow = Bodies.rectangle(
x,
y - size * 0.34,
ribbonSize * 1.4,
ribbonSize * 0.8,
{
render: ribbonRender,
},
);
const body = Body.create({
parts: [base, verticalRibbon, horizontalRibbon, bow],
});
Body.setPosition(body, { x, y });
body.restitution = commonOpts.restitution;
body.friction = commonOpts.friction;
body.frictionAir = commonOpts.frictionAir;
body.frictionStatic = commonOpts.frictionStatic;
body.density = commonOpts.density;
body.render = {
...body.render,
...commonOpts.render,
visible: true,
};
body.plugin = {
color,
hasEntered: false,
entryCheckId: null,
shape: "gift",
};
return { bodies: [body], constraints: [], blobId: null };
}
if (scene?.config?.ballShape === "rect") {
const side = config.ballRadius * 2;
const body = Bodies.rectangle(x, y, side, side, {
@@ -214,6 +280,12 @@
if (isGameOver()) return;
const scene = getCurrentScene();
const sceneConfig = scene?.config || {};
if (sceneConfig.debugSpawn) {
console.log("Spawn tick", {
sceneId: scene?.id,
ballShape: sceneConfig.ballShape,
});
}
const { width, height } = getDimensions();
const spawnLimit = sceneConfig.spawnLimit;
if (Number.isFinite(spawnLimit) && spawnCount >= spawnLimit) {
@@ -393,6 +465,50 @@
const scene = getCurrentScene();
const initialCount = scene?.config?.initialSpawnCount || 0;
if (!initialCount || initialCount <= 0) return;
if (scene?.config?.debugSpawn) {
console.log("Initial burst", {
sceneId: scene?.id,
initialCount,
});
}
const areaSource = scene?.config?.initialSpawnArea;
let area = null;
if (typeof areaSource === "function") {
try {
area = areaSource({ ...getDimensions(), world });
} catch (err) {
console.error("initialSpawnArea function failed", err);
}
}
if (scene?.config?.debugSpawn) {
console.log("Initial spawn area", {
sceneId: scene?.id,
area,
});
}
if (area && Number.isFinite(area.xMin) && Number.isFinite(area.xMax)) {
const { width, height } = getDimensions();
const pad = config.ballRadius + 4;
const minX = Math.max(pad, Math.min(area.xMin, area.xMax));
const maxX = Math.min(width - pad, Math.max(area.xMin, area.xMax));
const minY = Math.max(pad, Math.min(area.yMin, area.yMax));
const maxY = Math.min(height - pad, Math.max(area.yMin, area.yMax));
if (scene?.config?.debugSpawn) {
console.log("Initial spawn bounds", {
sceneId: scene?.id,
minX,
maxX,
minY,
maxY,
});
}
for (let i = 0; i < initialCount; i += 1) {
const x = minX + Math.random() * Math.max(0, maxX - minX);
const y = minY + Math.random() * Math.max(0, maxY - minY);
spawnAtPosition({ x, y, markEntered: true });
}
return;
}
for (let i = 0; i < initialCount; i += 1) {
spawnBall();
}