AI game creator

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

No:1678

272

←

Prev Next

→

fire punch
Developer sayaensm｜Date and time 23/6/18 21:38:31
Build time 5.609 sec｜Game capacity 0.377KB｜

Script

The AI could not be gamified with this prompt. Please try again with different prompts. .
Displays games created by AI in the past at random.

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

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

←

Prev　Next

→ 　

Back　

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

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

<p style='font-size:14px;background-color:#FF0'>The AI could not be gamified with this prompt. Please try again with different prompts. . <br>Displays games created by AI in the past at random.</p>はじめに、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の値を変えると、描画される円が変化します。また、色の選択肢で色を変えることもできます。

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