AI game creator

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

No:24959

←

Prev Next

→

Ragdoll playgrounds
Developer User12032｜Date and time 23/11/15 4:40:01
Build time 90.146 sec｜Game capacity 4.3KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Ragdoll Playgrounds Game</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

body {
            font-family: Arial, sans-serif;
            background-color: #f1f1f1;
            overflow: hidden;
        }

canvas {
            display: block;
            margin: 20px auto;
            border: 1px solid #999;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Setting up the game canvas
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const canvasWidth = canvas.width = window.innerWidth;
        const canvasHeight = canvas.height = window.innerHeight;

// Constants for the ragdoll character
        const characterWidth = 100;
        const characterHeight = 200;
        const characterColor = '#ff0000';

// Ragdoll character object
        const character = {
            x: canvasWidth / 2,
            y: canvasHeight - characterHeight,
            rotation: 0,
            isJumping: false,
            velocityY: 0,
            gravity: 0.3,
            jumpStrength: -10,
            bodyParts: [
                { name: 'head', width: 50, height: 50, offsetX: 0, offsetY: -140 },
                { name: 'body', width: 50, height: 100, offsetX: 0, offsetY: -90 },
                { name: 'leftArm', width: 25, height: 100, offsetX: 40, offsetY: -90 },
                { name: 'rightArm', width: 25, height: 100, offsetX: -65, offsetY: -90 },
                { name: 'leftLeg', width: 25, height: 125, offsetX: 10, offsetY: -10 },
                { name: 'rightLeg', width: 25, height: 125, offsetX: -35, offsetY: -10 }
            ],
        };

// Function to draw the ragdoll character on the canvas
        function drawCharacter() {
            ctx.fillStyle = characterColor;
            ctx.save();

ctx.translate(character.x, character.y);
            ctx.rotate(character.rotation);

for (let i = 0; i < character.bodyParts.length; i++) {
                ctx.fillRect(
                    character.bodyParts[i].offsetX - characterWidth / 2,
                    character.bodyParts[i].offsetY,
                    character.bodyParts[i].width,
                    character.bodyParts[i].height
                );
            }

ctx.restore();
        }

// Function to update the ragdoll character's position and rotation
        function updateCharacter() {
            character.velocityY += character.gravity;
            character.y += character.velocityY;

if (character.y > canvasHeight - characterHeight) {
                character.y = canvasHeight - characterHeight;
                character.velocityY = 0;
                character.isJumping = false;
            }

if (character.isJumping) {
                character.rotation += 0.1;
            } else {
                character.rotation = 0;
            }
        }

// Function to handle jumping action
        function jump() {
            if (!character.isJumping) {
                character.velocityY = character.jumpStrength;
                character.isJumping = true;
            }
        }

// Function to handle touch events on smartphones
        function handleTouch(event) {
            jump();
        }

// Function to handle key events for desktop
        function handleKeyDown(event) {
            if (event.code === 'Space') {
                jump();
            }
        }

// Event listeners for touch and key events
        canvas.addEventListener('touchstart', handleTouch);
        document.addEventListener('keydown', handleKeyDown);

// Function to clear the canvas
        function clearCanvas() {
            ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        }

// Main game loop
        function gameLoop() {
            clearCanvas();
            updateCharacter();
            drawCharacter();
            requestAnimationFrame(gameLoop);
        }

// Start the game loop
        gameLoop();
    </script>
</body>
</html>