AI game creator

Click here for free DL of the app version that can save data.

No:20621

←

Prev Next

→

Ragdolls sandbox
Developer User9091｜Date and time 23/10/10 8:45:40
Build time 15.244 sec｜Game capacity 4.554KB｜

Script

Sure, here's an example of a simple ragdoll sandbox game implemented as a single HTML file using JavaScript. This game allows you to interact with a ragdoll character using touch controls on a smartphone.

To play the game, save the code above in a file with a .html extension (e.g., ragdoll.html) and open it in a web browser on your smartphone. You'll see a ragdoll character on the screen, and you can control its movement by touching and swiping left or right on the screen. The character will move accordingly, and you can see the updates in real-time.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ragdoll Sandbox</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

#canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

var ctx = canvas.getContext("2d");

// Ragdoll character properties
        var headRadius = 30;
        var bodyHeight = 100;
        var legHeight = 100;
        var armLength = 80;

// Ragdoll character position
        var characterX = canvas.width / 2;
        var characterY = canvas.height - legHeight - bodyHeight - headRadius;

// Touch control properties
        var touching = false;
        var touchX = 0;

// Register touch events
        canvas.addEventListener("touchstart", function(event) {
            event.preventDefault();
            touching = true;
            touchX = event.touches[0].clientX;
        });

canvas.addEventListener("touchend", function(event) {
            event.preventDefault();
            touching = false;
        });

canvas.addEventListener("touchmove", function(event) {
            event.preventDefault();
            touchX = event.touches[0].clientX;
        });

// Function to draw the ragdoll character
        function drawCharacter() {
            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw head
            ctx.beginPath();
            ctx.arc(characterX, characterY, headRadius, 0, Math.PI * 2, false);
            ctx.fillStyle = "yellow";
            ctx.fill();
            ctx.lineWidth = 2;
            ctx.strokeStyle = "black";
            ctx.stroke();
            ctx.closePath();

// Draw body
            ctx.beginPath();
            ctx.moveTo(characterX, characterY + headRadius);
            ctx.lineTo(characterX, characterY + headRadius + bodyHeight);
            ctx.lineWidth = 4;
            ctx.stroke();

// Draw left arm
            ctx.beginPath();
            ctx.moveTo(characterX, characterY + headRadius + bodyHeight);
            ctx.lineTo(characterX - armLength, characterY + headRadius + bodyHeight + armLength);
            ctx.lineWidth = 4;
            ctx.stroke();

// Draw right arm
            ctx.beginPath();
            ctx.moveTo(characterX, characterY + headRadius + bodyHeight);
            ctx.lineTo(characterX + armLength, characterY + headRadius + bodyHeight + armLength);
            ctx.lineWidth = 4;
            ctx.stroke();

// Draw left leg
            ctx.beginPath();
            ctx.moveTo(characterX, characterY + headRadius + bodyHeight);
            ctx.lineTo(characterX - armLength / 2, characterY + headRadius + bodyHeight + legHeight);
            ctx.lineWidth = 4;
            ctx.stroke();

// Draw right leg
            ctx.beginPath();
            ctx.moveTo(characterX, characterY + headRadius + bodyHeight);
            ctx.lineTo(characterX + armLength / 2, characterY + headRadius + bodyHeight + legHeight);
            ctx.lineWidth = 4;
            ctx.stroke();
        }

// Update character position based on touch control
        function updateCharacter() {
            if (touching) {
                var speed = 5;
                if (touchX < canvas.width / 2) {
                    characterX -= speed;
                } else {
                    characterX += speed;
                }
            }
        }

// Function to animate the game
        function animate() {
            drawCharacter();
            updateCharacter();
            requestAnimationFrame(animate);
        }

animate();
    </script>
</body>
</html>
```