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

No:6674

220

←

Prev Next

→

Dolls with hair that grows faster and faster.
Developer User3840｜Date and time 23/7/3 3:10:10
Build time 25.129 sec｜Game capacity 2.231KB｜

Script

以下は、髪がどんどん伸びる人形のゲーム化されたプログラムの一例です。

髪がどんどん伸びる人形

このプログラムでは、canvas要素を使用して髪がどんどん伸びる人形のゲームを作成しています。人形の頭部は円で描画され、髪の毛は三角形で描画されます。髪の毛の長さは定期的に伸びていきますが、クリックすることで髪を切ることができます。髪の毛が最大の長さに達すると、クリックすると髪を切り直すことができます。

←

Prev　Next

→ 　

Back　

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

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

以下は、髪がどんどん伸びる人形のゲーム化されたプログラムの一例です。

```html
<!DOCTYPE html>
<html>
<head>
    <title>髪がどんどん伸びる人形</title>
</head>
<body>
    <h1>髪がどんどん伸びる人形</h1>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

var dollHeight = 100;
        var hairLength = 0;
        var maxHairLength = 200;

function drawDoll() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// 人形の頭部
            ctx.beginPath();
            ctx.arc(canvas.width / 2, canvas.height / 2 - dollHeight / 2, dollHeight / 2, 0, Math.PI * 2);
            ctx.fillStyle = "yellow";
            ctx.fill();
            ctx.closePath();
            
            // 髪の毛
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2, canvas.height / 2 - dollHeight / 2 - hairLength);
            ctx.lineTo(canvas.width / 2 - 20, canvas.height / 2 - dollHeight / 2 - 20 - hairLength);
            ctx.lineTo(canvas.width / 2 + 20, canvas.height / 2 - dollHeight / 2 - 20 - hairLength);
            ctx.fillStyle = "brown";
            ctx.fill();
            ctx.closePath();
        }

function updateHairLength() {
            if (hairLength < maxHairLength) {
                hairLength += 5;
            }
        }

setInterval(function() {
            drawDoll();
            updateHairLength();
        }, 1000);

canvas.addEventListener("click", function() {
            if (hairLength === maxHairLength) {
                hairLength = 0;
            }
        });
    </script>
</body>
</html>
```