ジェネラティブアート's game

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

No:18562

←

Prev Next

→

ジェネラティブアート
Developer User8200｜Date and time 23/9/29 22:53:34
Build time 25.222 sec｜Game capacity 1.889KB｜

Script

了解しました。以下にジェネラティブアートのゲームのプログラム例を記述します。

このプログラムは、画面上にランダムな色と大きさの円を表示し続けるジェネラティブアートのゲームです。円は1秒ごとに再描画され、ランダムな位置に表示されます。スマホで操作する場合は、ブラウザでこのHTMLファイルを開いてタッチ操作で円を描画することができます。以上がジェネラティブアートのゲームのプログラム例となります。完成したゲームは直接ブラウザでプレイすることができます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下にジェネラティブアートのゲームのプログラム例を記述します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>ジェネラティブアートゲーム</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

const colors = ['red', 'green', 'blue', 'yellow', 'orange', 'purple'];

function drawShapes() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            for (let i = 0; i < 100; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                const size = Math.random() * 50 + 10;
                const color = colors[Math.floor(Math.random() * colors.length)];
                
                ctx.beginPath();
                ctx.arc(x, y, size, 0, Math.PI * 2);
                ctx.fillStyle = color;
                ctx.fill();
                ctx.closePath();
            }
        }

setInterval(drawShapes, 1000);
    </script>
</body>
</html>
```

このプログラムは、画面上にランダムな色と大きさの円を表示し続けるジェネラティブアートのゲームです。円は1秒ごとに再描画され、ランダムな位置に表示されます。

スマホで操作する場合は、ブラウザでこのHTMLファイルを開いてタッチ操作で円を描画することができます。

以上がジェネラティブアートのゲームのプログラム例となります。完成したゲームは直接ブラウザでプレイすることができます。