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

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

No:42481

←

Prev Next

→

ジェネラティブアート
Developer User18888｜Date and time 24/2/11 20:39:30
Build time 8.982 sec｜Game capacity 2.739KB｜

Script

HTMLファイルとJavaScriptコードを使ったジェネラティブアートの例を以下に示します。この例では、ランダムな色と形状の図形が画面上に描かれます。

この例では、HTML ファイル内に `canvas` 要素を作成し、その上で図形を描画しています。図形の色や形状はランダムに生成され、マウスをクリックするたびに新しい図形が追加されます。初めにいくつかの図形を描画する処理も追加されています。このHTMLファイルをブラウザで開くと、ジェネラティブアートとして動作するゲームが表示されます。ユーザーは画面をクリックすることで新しい図形を追加することができます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

HTMLファイルとJavaScriptコードを使ったジェネラティブアートの例を以下に示します。この例では、ランダムな色と形状の図形が画面上に描かれます。

```html
<!DOCTYPE html>
<html>
<head>
    <title>ジェネラティブアートの例</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script>
        // ページが読み込まれた時に実行される処理
        window.addEventListener('DOMContentLoaded', () => {
            // キャンバスの作成
            const canvas = document.createElement('canvas');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            document.body.appendChild(canvas);

// 2D コンテキストの取得
            const ctx = canvas.getContext('2d');

// 図形を描画する関数
            const drawShape = () => {
                // ランダムな色を生成
                const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;

// ランダムな形状を生成
                const shapeType = Math.random() < 0.5 ? 'circle' : 'square';

// ランダムな位置・サイズを生成
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                const size = Math.random() * 100 + 10;

// 図形を描画
                ctx.fillStyle = color;
                if (shapeType === 'circle') {
                    ctx.beginPath();
                    ctx.arc(x, y, size, 0, Math.PI * 2);
                    ctx.fill();
                } else if (shapeType === 'square') {
                    ctx.fillRect(x, y, size, size);
                }
            };

// マウスをクリックした時に図形を描画
            canvas.addEventListener('click', drawShape);

// 初めに図形をいくつか描画
            for (let i = 0; i < 10; i++) {
                drawShape();
            }
        });
    </script>
</body>
</html>
```

この例では、HTML ファイル内に `canvas` 要素を作成し、その上で図形を描画しています。図形の色や形状はランダムに生成され、マウスをクリックするたびに新しい図形が追加されます。初めにいくつかの図形を描画する処理も追加されています。

このHTMLファイルをブラウザで開くと、ジェネラティブアートとして動作するゲームが表示されます。ユーザーは画面をクリックすることで新しい図形を追加することができます。