Origami Paper Crane Folding's game

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

No:9767

195

←

Prev Next

→

Origami Paper Crane Folding
Developer User3788｜Date and time 23/7/27 13:26:42
Build time 12.954 sec｜Game capacity 1.643KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        font-size: 14px;
        background-color: #f9f9f9;
    }
    #container {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #canvas {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        background-color: #fff;
    }
    .emoji {
        font-size: 100px;
        cursor: pointer;
    }
</style>
</head>
<body>
<div id="container">
    <div id="canvas"></div>
</div>

const drawCrane = () => {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.moveTo(150, 150);
        ctx.lineTo(150, 75);
        ctx.lineTo(75, 0);
        ctx.lineTo(0, 75);
        ctx.lineTo(150, 225);
        ctx.lineTo(300, 75);
        ctx.lineTo(225, 0);
        ctx.lineTo(150, 75);
        ctx.closePath();
        ctx.fillStyle = "green";
        ctx.fill();
    };

drawCrane();

const handleClick = () => {
        const container = document.getElementById("container");
        const canvas = document.getElementById("canvas");
        canvas.innerHTML = "";

const successMessage = document.createElement("h2");
        successMessage.innerText = "折り鶴が完成しました！🎉";
        successMessage.style.textAlign = "center";
        container.appendChild(successMessage);
    };

canvas.addEventListener("click", handleClick);
</script>
</body>
</html>