AI game creator

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

No:6817

←

Prev Next

→

generative art
Developer User3929｜Date and time 23/7/3 20:58:38
Build time 30.241 sec｜Game capacity 2.819KB｜

Script

了解しました。以下に、JavaScriptを利用したジェネラティブアートを作成するサンプルコードを記述します。

このコードでは、クリックイベントやウィンドウリサイズイベントを利用して、ジェネラティブアートを描画します。クリックするたびに画面がリセットされ、新たなジェネラティブアートが生成されます。また、ウィンドウのリサイズ時にもジェネラティブアートが再描画されます。ご参考までに、このコードはJavaScriptのcanvas要素を利用していますが、別のジェネラティブアートの描画方法やゲーム化のアイデアも取り入れることが可能です。遊べるジェネラティブアートとしての基本的な機能を備えたサンプルとなります。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

了解しました。以下に、JavaScriptを利用したジェネラティブアートを作成するサンプルコードを記述します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ジェネラティブアート</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }

canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

// キャンバスのサイズをウィンドウに合わせる
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// ランダムな色の生成
        function randomColor() {
            return '#' + Math.floor(Math.random() * 16777215).toString(16);
        }
        
        // 四角形を描画する関数
        function drawRectangle(x, y, size) {
            ctx.fillStyle = randomColor();
            ctx.fillRect(x, y, size, size);
        }

// ジェネラティブアートの描画
        function drawArt() {
            const size = Math.random() * 100 + 50; // 50～150の範囲で四角形のサイズをランダムに設定

for (let i = 0; i < 100; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                drawRectangle(x, y, size);
            }
        }
        
        // ジェネラティブアートの初回描画
        drawArt();

// タッチイベントのハンドリング
        canvas.addEventListener('click', () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawArt();
        });

// ウィンドウリサイズ時の処理
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            drawArt();
        });
    </script>
</body>
</html>
```

このコードでは、クリックイベントやウィンドウリサイズイベントを利用して、ジェネラティブアートを描画します。クリックするたびに画面がリセットされ、新たなジェネラティブアートが生成されます。また、ウィンドウのリサイズ時にもジェネラティブアートが再描画されます。

ご参考までに、このコードはJavaScriptのcanvas要素を利用していますが、別のジェネラティブアートの描画方法やゲーム化のアイデアも取り入れることが可能です。遊べるジェネラティブアートとしての基本的な機能を備えたサンプルとなります。