AI game creator

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

No:13161

113

←

Prev Next

→

Creature creator - 3D game pixel art
Developer User5784｜Date and time 23/8/27 6:56:44
Build time 9.726 sec｜Game capacity 2.704KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Creature Creator</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #222;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }

#canvas {
            border: 2px solid #fff;
        }
    </style>
</head>

// Pictograms for different creature body parts
        const headImg = new Image();
        const bodyImg = new Image();
        const legsImg = new Image();
        const tailImg = new Image();

headImg.src = "head.png";
        bodyImg.src = "body.png";
        legsImg.src = "legs.png";
        tailImg.src = "tail.png";

// Initial position for drawing parts on canvas
        let headPos = { x: 150, y: 50 };
        let bodyPos = { x: 150, y: 150 };
        let legsPos = { x: 150, y: 250 };
        let tailPos = { x: 150, y: 320 };

// Event listener for touch events on the canvas
        canvas.addEventListener("touchmove", handleTouchMove, false);

function handleTouchMove(event) {
            // Updating the positions of body parts according to touch position
            headPos.x = event.touches[0].clientX - canvas.offsetLeft;
            headPos.y = event.touches[0].clientY - canvas.offsetTop;

bodyPos.x = event.touches[0].clientX - canvas.offsetLeft;
            bodyPos.y = event.touches[0].clientY - canvas.offsetTop;

legsPos.x = event.touches[0].clientX - canvas.offsetLeft;
            legsPos.y = event.touches[0].clientY - canvas.offsetTop;

tailPos.x = event.touches[0].clientX - canvas.offsetLeft;
            tailPos.y = event.touches[0].clientY - canvas.offsetTop;

// Clearing the canvas to redraw the updated position of body parts
            ctx.clearRect(0, 0, canvas.width, canvas.height);

drawCreature();
        }

function drawCreature() {
            // Drawing the creature with body parts using pictograms
            ctx.drawImage(headImg, headPos.x, headPos.y);
            ctx.drawImage(bodyImg, bodyPos.x, bodyPos.y);
            ctx.drawImage(legsImg, legsPos.x, legsPos.y);
            ctx.drawImage(tailImg, tailPos.x, tailPos.y);
        }

// Starting the game by drawing the initial creature
        drawCreature();

</script>
</body>

</html>