お花🌸を咲かせるゲーム！ JavaScriptによって線画された正葉関数を表示しています。正葉曲線は、以下の関数で定義されています。 r=sin(nθ/k) nとkは、1以上の整数です。プレイヤーは、nとkそれぞれに自由な数字を代入することが出来ます。代入した数字によって、正葉曲線が変化します。 nとkに代入する数字は、バーによって直感的に決定(代入)出来るものとします。また、曲線の線の色も選択が可能です。デフォルトの色は赤色です。's game

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

No:5110

4949

←

Prev Next

→

お花🌸を咲かせるゲーム！ JavaScriptによって線画された正葉関数を表示しています。正葉曲線..ALL
Developer anonymous｜Date and time 70/1/1 9:36:17
Build time unknown sec｜Game capacity 2.177KB｜

Script

はじめに、HTMLファイルに以下のコードを記述しましょう。

このコードでは、HTMLのcanvas要素を使って円を描画しています。nとkの入力欄と、色の選択肢も追加しています。nとkの値を変えると、描画される円が変化します。また、色の選択肢で色を変えることもできます。以上がお花を咲かせるゲームの実装になります。スマホで操作可能です。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

はじめに、HTMLファイルに以下のコードを記述しましょう。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        canvas {
            border: 1px solid black;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <input type="range" id="n" min="1" max="10" value="1">
    <input type="range" id="k" min="1" max="10" value="1">
    <select id="color">
        <option value="red">赤色</option>
        <option value="blue">青色</option>
        <option value="green">緑色</option>
    </select>

function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            const n = parseInt(nInput.value);
            const k = parseInt(kInput.value);
            const color = colorSelect.value;
            context.strokeStyle = color;

context.beginPath();
            for (let angle = 0; angle < Math.PI * 2; angle += 0.01) {
                const r = Math.sin(n * angle / k);
                const x = canvas.width / 2 + r * Math.cos(angle) * 100;
                const y = canvas.height / 2 + r * Math.sin(angle) * 100;
                context.lineTo(x, y);
            }
            context.stroke();
        }

nInput.addEventListener("input", draw);
        kInput.addEventListener("input", draw);
        colorSelect.addEventListener("change", draw);

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

このコードでは、HTMLのcanvas要素を使って円を描画しています。nとkの入力欄と、色の選択肢も追加しています。nとkの値を変えると、描画される円が変化します。また、色の選択肢で色を変えることもできます。

以上がお花を咲かせるゲームの実装になります。スマホで操作可能です。