Roblox-Style Ragdoll (WebSim)

RAGDOLL ENGINE

\n \n

WASD to orbit camera • Scroll to zoom • Click to smack ragdoll

\n \n \n\n\nstyle.css\ncss\nhtml, body {\n margin: 0;\n padding: 0;\n overflow: hidden;\n background: #111;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n}\n\n#game {\n position: fixed;\n inset: 0;\n display: block;\n background: linear-gradient(#87ceeb 40%, #6aa84f 40%);\n}\n\n#ui {\n position: fixed;\n top: 10px;\n left: 10px;\n color: white;\n z-index: 10;\n user-select: none;\n}\n\n#logo {\n font-weight: 900;\n font-size: 20px;\n padding: 6px 10px;\n background: #ff0000;\n border-radius: 4px;\n box-shadow: 0 0 10px rgba(0,0,0,0.6);\n margin-bottom: 8px;\n}\n\n#resetBtn {\n padding: 6px 12px;\n border-radius: 4px;\n border: none;\n background: #00a2ff;\n color: white;\n font-weight: 700;\n cursor: pointer;\n box-shadow: 0 0 8px rgba(0,0,0,0.5);\n margin-bottom: 6px;\n}\n\n#resetBtn:hover {\n background: #0086d1;\n}\n\n#hint {\n font-size: 12px;\n opacity: 0.85;\n margin-top: 4px;\n}\nmain.js\njs\nconst { Engine, Render, Runner, World, Bodies, Body, Constraint, Events, Mouse, MouseConstraint } = Matter;\n\nconst canvas = document.getElementById(\"game\");\nconst engine = Engine.create();\nconst world = engine.world;\n\nlet render = Render.create({\n canvas,\n engine,\n options: {\n width: window.innerWidth,\n height: window.innerHeight,\n wireframes: false,\n background: \"transparent\",\n pixelRatio: window.devicePixelRatio || 1\n }\n});\n\nRender.run(render);\nconst runner = Runner.create();\nRunner.run(runner, engine);\n\nfunction resize() {\n render.canvas.width = window.innerWidth;\n render.canvas.height = window.innerHeight;\n render.options.width = window.innerWidth;\n render.options.height = window.innerHeight;\n}\nwindow.addEventListener(\"resize\", resize);\n\n// Ground + simple Roblox-ish map\nconst ground = Bodies.rectangle(0, 400, 2000, 40, {\n isStatic: true,\n render: { fillStyle: \"#3d7a2b\" }\n});\nconst platform = Bodies.rectangle(200, 250, 200, 20, {\n isStatic: true,\n render: { fillStyle: \"#c3c3c3\" }\n});\nconst ramp = Bodies.rectangle(-200, 300, 250, 20, {\n isStatic: true,\n angle: -0.3,\n render: { fillStyle: \"#c3c3c3\" }\n});\nWorld.add(world, [ground, platform, ramp]);\n\nlet ragdollParts = [];\nlet ragdollConstraints = [];\n\nfunction createRagdoll(x, y) {\n // Roblox-style blocky avatar\n const head = Bodies.rectangle(x, y - 80, 30, 30, {\n density: 0.001,\n render: { fillStyle: \"#ffe1c4\" }\n });\n const torso = Bodies.rectangle(x, y - 40, 40, 60, {\n density: 0.002,\n render: { fillStyle: \"#00a2ff\" }\n });\n const leftArm = Bodies.rectangle(x - 35, y - 40, 15, 50, {\n density: 0.001,\n render: { fillStyle: \"#ffe1c4\" }\n });\n const rightArm = Bodies.rectangle(x + 35, y - 40, 15, 50, {\n density: 0.001,\n render: { fillStyle: \"#ffe1c4\" }\n });\n const leftLeg = Bodies.rectangle(x - 12, y + 10, 18, 55, {\n density: 0.002,\n render: { fillStyle: \"#1b1b1b\" }\n });\n const rightLeg = Bodies.rectangle(x + 12, y + 10, 18, 55, {\n density: 0.002,\n render: { fillStyle: \"#1b1b1b\" }\n });\n\n const neck = Constraint.create({\n bodyA: head,\n pointA: { x: 0, y: 15 },\n bodyB: torso,\n pointB: { x: 0, y: -30 },\n stiffness: 0.6,\n render: { visible: false }\n });\n\n const leftShoulder = Constraint.create({\n bodyA: leftArm,\n pointA: { x: 0, y: -25 },\n bodyB: torso,\n pointB: { x: -20, y: -25 },\n stiffness: 0.6,\n render: { visible: false }\n });\n\n const rightShoulder = Constraint.create({\n bodyA: rightArm,\n pointA: { x: 0, y: -25 },\n bodyB: torso,\n pointB: { x: 20, y: -25 },\n stiffness: 0.6,\n render: { visible: false }\n });\n\n const leftHip = Constraint.create({\n bodyA: leftLeg,\n pointA: { x: 0, y: -27 },\n bodyB: torso,\n pointB: { x: -10, y: 30 },\n stiffness: 0.7,\n render: { visible: false }\n });\n\n const rightHip = Constraint.create({\n bodyA: rightLeg,\n pointA: { x: 0, y: -27 },\n bodyB: torso,\n pointB: { x: 10, y: 30 },\n stiffness: 0.7,\n render: { visible: false }\n });\n\n const parts = [head, torso, leftArm, rightArm, leftLeg, rightLeg];\n const constraints = [neck, leftShoulder, rightShoulder, leftHip, rightHip];\n\n World.add(world, [...parts, ...constraints]);\n\n ragdollParts = parts;\n ragdollConstraints = constraints;\n}\n\ncreateRagdoll(0, 100);\n\n// Mouse interaction (grab/drag)\nconst mouse = Mouse.create(render.canvas);\nconst mouseConstraint = MouseConstraint.create(engine, {\n mouse,\n constraint: {\n stiffness: 0.2,\n render: { visible: false }\n }\n});\nWorld.add(world, mouseConstraint);\nrender.mouse = mouse;\n\n// Screen shake + hit impulse\nfunction screenShake(intensity = 5, duration = 120) {\n let frame = 0;\n const baseBounds = { ...render.bounds };\n\n (function shake() {\n if (frame > duration) {\n render.bounds.min.x = baseBounds.min.x;\n render.bounds.max.x = baseBounds.max.x;\n render.bounds.min.y = baseBounds.min.y;\n render.bounds.max.y = baseBounds.max.y;\n return;\n }\n const dx = (Math.random() - 0.5) * intensity;\n const dy = (Math.random() - 0.5) * intensity;\n\n render.bounds.min.x = baseBounds.min.x + dx;\n render.bounds.max.x = baseBounds.max.x + dx;\n render.bounds.min.y = baseBounds.min.y + dy;\n render.bounds.max.y = baseBounds.max.y + dy;\n\n frame++;\n requestAnimationFrame(shake);\n })();\n}\n\n// Click to smack ragdoll\ncanvas.addEventListener(\"mousedown\", (e) => {\n const rect = canvas.getBoundingClientRect();\n const mx = e.clientX - rect.left - rect.width / 2;\n const my = e.clientY - rect.top - rect.height / 2;\n\n ragdollParts.forEach(part => {\n const dx = part.position.x - mx;\n const dy = part.position.y - my;\n const dist = Math.hypot(dx, dy);\n if (dist < 80) {\n const force = { x: dx * -0.02, y: dy * -0.02 };\n Body.applyForce(part, part.position, force);\n screenShake(8, 180);\n }\n });\n});\n\n// Simple “camera” orbit feel (just panning bounds)\nlet camX = 0;\nlet camY = 0;\nlet zoom = 1;\n\nfunction updateCamera() {\n const w = window.innerWidth;\n const h = window.innerHeight;\n const halfW = (w / zoom) / 2;\n const halfH = (h / zoom) / 2;\n\n render.bounds.min.x = camX - halfW;\n render.bounds.max.x = camX + halfW;\n render.bounds.min.y = camY - halfH;\n render.bounds.max.y = camY + halfH;\n}\n\nwindow.addEventListener(\"wheel\", (e) => {\n zoom *= e.deltaY > 0 ? 1.1 : 0.9;\n zoom = Math.max(0.4, Math.min(2.5, zoom));\n updateCamera();\n});\n\nwindow.addEventListener(\"keydown\", (e) => {\n const step = 20 / zoom;\n if (e.key === \"w\") camY -= step;\n if (e.key === \"s\") camY += step;\n if (e.key === \"a\") camX -= step;\n if (e.key === \"d\") camX += step;\n updateCamera();\n});\n\nupdateCamera();\n\n// Reset button\ndocument.getElementById(\"resetBtn\").addEventListener(\"click\", () => {\n World.remove(world, [...ragdollParts, ...ragdollConstraints]);\n ragdollParts = [];\n ragdollConstraints = [];\n createRagdoll(0, 100);\n});\nIf you paste those three into your WebSim project, you’ll have:\n\nA Roblox‑looking block avatar\n\nRagdoll physics with constraints\n\nClick‑to‑smack with screen shake\n\nSimple Roblox‑style UI and colors\n\nCamera orbit + zoom feel\n\nIf you want next: we can add Roblox-style spawn pads, lava bricks, or GUI health bar on top of this.\n\nno the ai makes it\nSee my thinking\nGot you—so you don’t want to hand‑build the ragdoll game, you want the project itself to feel like an AI that builds it for you, Roblox‑style, inside WebSim.\n\nSo we’ll do this:\n\nYou paste one time a WebSim project.\n\nInside it, there’s a fake “AI builder” UI:\n\nText box: “What should I build?”\n\nButton: “Generate”\n\nThe “AI” then spawns a Roblox‑style ragdoll + map variant based on a few simple keywords (lava, stairs, tower, etc.).\n\nIt feels like the AI is making the game for you, but it’s all driven by our JS logic.\n\nBelow is a minimal but complete version.\n\nindex.html\nhtml\n\n\n\n \n Roblox Ragdoll AI Builder\n \n\n\n

\n\n

ROBLOX RAGDOLL AI BUILDER

\n \n \n

Waiting for your idea…

\n\n \n \n\n\nstyle.css\ncss\nhtml, body {\n margin: 0;\n padding: 0;\n overflow: hidden;\n background: #111;\n font-family: system-ui, \"Segoe UI\", sans-serif;\n}\n\n#game {\n position: fixed;\n inset: 0;\n display: block;\n background: linear-gradient(#87ceeb 40%, #6aa84f 40%);\n}\n\n#panel {\n position: fixed;\n right: 10px;\n top: 10px;\n width: 260px;\n background: rgba(0,0,0,0.75);\n color: #fff;\n padding: 10px;\n border-radius: 6px;\n box-shadow: 0 0 12px rgba(0,0,0,0.7);\n z-index: 10;\n}\n\n#title {\n font-weight: 900;\n font-size: 14px;\n margin-bottom: 6px;\n color: #ff0000;\n}\n\n#prompt {\n width: 100%;\n height: 80px;\n resize: none;\n border-radius: 4px;\n border: none;\n padding: 6px;\n font-size: 12px;\n box-sizing: border-box;\n}\n\n#buildBtn {\n margin-top: 6px;\n width: 100%;\n padding: 6px;\n border-radius: 4px;\n border: none;\n background: #00a2ff;\n color: white;\n font-weight: 700;\n cursor: pointer;\n}\n\n#buildBtn:hover {\n background: #0086d1;\n}\n\n#status {\n margin-top: 6px;\n font-size: 11px;\n opacity: 0.85;\n}\nmain.js\njs\nconst {\n Engine, Render, Runner, World, Bodies, Body, Constraint,\n Mouse, MouseConstraint\n} = Matter;\n\nconst canvas = document.getElementById(\"game\");\nconst engine = Engine.create();\nconst world = engine.world;\n\nconst render = Render.create({\n canvas,\n engine,\n options: {\n width: window.innerWidth,\n height: window.innerHeight,\n wireframes: false,\n background: \"transparent\",\n pixelRatio: window.devicePixelRatio || 1\n }\n});\n\nRender.run(render);\nconst runner = Runner.create();\nRunner.run(runner, engine);\n\nfunction resize() {\n render.canvas.width = window.innerWidth;\n render.canvas.height = window.innerHeight;\n render.options.width = window.innerWidth;\n render.options.height = window.innerHeight;\n}\nwindow.addEventListener(\"resize\", resize);\n\nlet levelBodies = [];\nlet ragdollParts = [];\nlet ragdollConstraints = [];\n\nfunction clearLevel() {\n World.remove(world, levelBodies);\n World.remove(world, ragdollParts);\n World.remove(world, ragdollConstraints);\n levelBodies = [];\n ragdollParts = [];\n ragdollConstraints = [];\n}\n\nfunction addBody(b) {\n World.add(world, b);\n levelBodies.push(b);\n}\n\nfunction createBase() {\n const ground = Bodies.rectangle(0, 400, 2200, 40, {\n isStatic: true,\n render: { fillStyle: \"#3d7a2b\" }\n });\n addBody(ground);\n}\n\nfunction createRagdoll(x, y) {\n const head = Bodies.rectangle(x, y - 80, 30, 30, {\n density: 0.001,\n render: { fillStyle: \"#ffe1c4\" }\n });\n const torso = Bodies.rectangle(x, y - 40, 40, 60, {\n density: 0.002,\n render: { fillStyle: \"#00a2ff\" }\n });\n const leftArm = Bodies.rectangle(x - 35, y - 40, 15, 50, {\n density: 0.001,\n render: { fillStyle: \"#ffe1c4\" }\n });\n const rightArm = Bodies.rectangle(x + 35, y - 40, 15, 50, {\n density: 0.001,\n render: { fillStyle: \"#ffe1c4\" }\n });\n const leftLeg = Bodies.rectangle(x - 12, y + 10, 18, 55, {\n density: 0.002,\n render: { fillStyle: \"#1b1b1b\" }\n });\n const rightLeg = Bodies.rectangle(x + 12, y + 10, 18, 55, {\n density: 0.002,\n render: { fillStyle: \"#1b1b1b\" }\n });\n\n const neck = Constraint.create({\n bodyA: head, pointA: { x: 0, y: 15 },\n bodyB: torso, pointB: { x: 0, y: -30 },\n stiffness: 0.6,\n render: { visible: false }\n });\n const leftShoulder = Constraint.create({\n bodyA: leftArm, pointA: { x: 0, y: -25 },\n bodyB: torso, pointB: { x: -20, y: -25 },\n stiffness: 0.6,\n render: { visible: false }\n });\n const rightShoulder = Constraint.create({\n bodyA: rightArm, pointA: { x: 0, y: -25 },\n bodyB: torso, pointB: { x: 20, y: -25 },\n stiffness: 0.6,\n render: { visible: false }\n });\n const leftHip = Constraint.create({\n bodyA: leftLeg, pointA: { x: 0, y: -27 },\n bodyB: torso, pointB: { x: -10, y: 30 },\n stiffness: 0.7,\n render: { visible: false }\n });\n const rightHip = Constraint.create({\n bodyA: rightLeg, pointA: { x: 0, y: -27 },\n bodyB: torso, pointB: { x: 10, y: 30 },\n stiffness: 0.7,\n render: { visible: false }\n });\n\n const parts = [head, torso, leftArm, rightArm, leftLeg, rightLeg];\n const cons = [neck, leftShoulder, rightShoulder, leftHip, rightHip];\n\n World.add(world, [...parts, ...cons]);\n ragdollParts = parts;\n ragdollConstraints = cons;\n}\n\nfunction buildFromPrompt(text) {\n clearLevel();\n createBase();\n\n const lower = text.toLowerCase();\n\n // Basic “AI rules”\n if (lower.includes(\"tower\")) {\n for (let i = 0; i < 6; i++) {\n const block = Bodies.rectangle(0, 360 - i * 40, 120, 30, {\n isStatic: true,\n render: { fillStyle: \"#c3c3c3\" }\n });\n addBody(block);\n }\n }\n\n if (lower.includes(\"stairs\")) {\n for (let i = 0; i < 8; i++) {\n const step = Bodies.rectangle(-250 + i * 40, 360 - i * 20, 40, 10, {\n isStatic: true,\n render: { fillStyle: \"#d9d9d9\" }\n });\n addBody(step);\n }\n }\n\n if (lower.includes(\"ramp\")) {\n const ramp = Bodies.rectangle(200, 320, 260, 20, {\n isStatic: true,\n angle: -0.4,\n render: { fillStyle: \"#bbbbbb\" }\n });\n addBody(ramp);\n }\n\n if (lower.includes(\"lava\")) {\n const lava = Bodies.rectangle(0, 430, 600, 40, {\n isStatic: true,\n render: { fillStyle: \"#ff5500\" }\n });\n addBody(lava);\n }\n\n if (lower.includes(\"blocks\") || lower.includes(\"obby\")) {\n for (let i = 0; i < 5; i++) {\n const p = Bodies.rectangle(-200 + i * 100, 320 - (i % 2) * 40, 60, 20, {\n isStatic: true,\n render: { fillStyle: \"#00a2ff\" }\n });\n addBody(p);\n }\n }\n\n // Default if nothing matched\n if (levelBodies.length <= 1) {\n const platform = Bodies.rectangle(0, 300, 200, 20, {\n isStatic: true,\n render: { fillStyle: \"#c3c3c3\" }\n });\n addBody(platform);\n }\n\n createRagdoll(0, 100);\n}\n\n// Mouse grab\nconst mouse = Mouse.create(render.canvas);\nconst mouseConstraint = MouseConstraint.create(engine, {\n mouse,\n constraint: {\n stiffness: 0.2,\n render: { visible: false }\n }\n});\nWorld.add(world, mouseConstraint);\nrender.mouse = mouse;\n\n// Camera\nlet camX = 0;\nlet camY = 0;\nlet zoom = 1;\n\nfunction updateCamera() {\n const w = window.innerWidth;\n const h = window.innerHeight;\n const halfW = (w / zoom) / 2;\n const halfH = (h / zoom) / 2;\n\n render.bounds.min.x = camX - halfW;\n render.bounds.max.x = camX + halfW;\n render.bounds.min.y = camY - halfH;\n render.bounds.max.y = camY + halfH;\n}\n\nwindow.addEventListener(\"wheel\", (e) => {\n zoom *= e.deltaY > 0 ? 1.1 : 0.9;\n zoom = Math.max(0.4, Math.min(2.5, zoom));\n updateCamera();\n});\n\nwindow.addEventListener(\"keydown\", (e) => {\n const step = 20 / zoom;\n if (e.key === \"w\") camY -= step;\n if (e.key === \"s\") camY += step;\n if (e.key === \"a\") camX -= step;\n if (e.key === \"d\") camX += step;\n updateCamera();\n});\n\nupdateCamera();\n\n// “AI builder” wiring\nconst promptEl = document.getElementById(\"prompt\");\nconst buildBtn = document.getElementById(\"buildBtn\");\nconst statusEl = document.getElementById(\"status\");\n\nbuildBtn.addEventListener(\"click\", () => {\n const text = promptEl.value.trim();\n if (!text) {\n statusEl.textContent = \"Type something like: make a tower with lava and stairs.\";\n return;\n }\n statusEl.textContent = \"AI is generating your Roblox ragdoll level…\";\n setTimeout(() => {\n buildFromPrompt(text);\n statusEl.textContent = \"Done! Click and drag the ragdoll. Change the prompt to rebuild.\";\n }, 400);\n});\n\n// initial\nbuildFromPrompt(\"simple platform with a ragdoll\");\nstatusEl.textContent = \"Type a prompt and press Generate.\";\nNow your WebSim project acts like an AI Roblox ragdoll level generator:\n\nYou type:\n\n“make a tall tower with lava and stairs”\n\n“obby with blocks and a ramp”\n\nClick Generate\n\nThe “AI” rebuilds the map + ragdoll automatically.\n\nIf you want, next step we can add multiple ragdolls, “chaos mode”, or a preset buttons bar like “Tower / Lava / Obby / Random”.","url","link_url","/p/7xy_n6q7_kcuxeqkksc7","versioned_link_url","/p/7xy_n6q7_kcuxeqkksc7/1","yapping","index.html\n```index.html\n```\n\nstyle.css\n```style.css\n```\n\nmain.js\n```main.js\n```","page_description","cursor","eyJpZCI6Ijd4eV9uNnE3X2tjdXhlcWtrc2M3In0","token","included",[],"about",{"_182":-5},"parent","routes/browser/layout","actionData","errors"]