AI game creator

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

No:6338

1785

←

Prev Next

→

generative art
Developer User3583｜Date and time 23/7/2 3:03:40
Build time 25.84 sec｜Game capacity 2.088KB｜

Script

はい、了解しました。以下にひとつの例として、スマホで遊べる簡単なジェネラティブアートのゲームを実装してみます。

このプログラムは、スマートフォンのブラウザで動作する簡単なジェネラティブアートゲームです。画面をタップすることでランダムな色の円が描かれます。また、画面全体に対応するようにキャンバスのサイズが自動的に調整されます。なお、この例のジェネラティブアートはクリックした位置に円を描くだけの簡単なものですが、応用を加えることでより複雑な形状やアニメーションなどを実現できます。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

はい、了解しました。以下にひとつの例として、スマホで遊べる簡単なジェネラティブアートのゲームを実装してみます。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ジェネラティブアートゲーム</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

const ctx = canvas.getContext('2d');

// クリックした位置に円を描く
        function drawCircle(event) {
            const x = event.clientX;
            const y = event.clientY;
            const color = getRandomColor();

ctx.fillStyle = color;
            ctx.beginPath();
            ctx.arc(x, y, 50, 0, 2 * Math.PI);
            ctx.fill();
        }

// マウスクリックイベントのリスナーを設定
        canvas.addEventListener('click', drawCircle);

// ランダムなカラーコードを生成する関数
        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
    </script>
</body>
</html>
```

このプログラムは、スマートフォンのブラウザで動作する簡単なジェネラティブアートゲームです。画面をタップすることでランダムな色の円が描かれます。また、画面全体に対応するようにキャンバスのサイズが自動的に調整されます。

なお、この例のジェネラティブアートはクリックした位置に円を描くだけの簡単なものですが、応用を加えることでより複雑な形状やアニメーションなどを実現できます。