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

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

No:24243

←

Prev Next

→

ジェネラティブアート
Developer User11371｜Date and time 23/11/6 19:32:23
Build time 44.202 sec｜Game capacity 1.91KB｜

Script

了解しました。以下にジェネラティブアートのゲームを実装した例を示します。これは1枚のHTMLファイルで、JavaScriptをscriptタグ内に含んでいます。ゲームはスマホ操作に対応しており、絵文字を使用しています。

このプログラムでは、HTMLのcanvas要素を使って円を描画します。円の中心座標は`x`と`y`、半径は`radius`、円を回転させるための角度は`angle`、回転速度は`speed`で管理されます。`update`関数で円の座標や角度を更新し、`requestAnimationFrame`を使ってループ処理が実行されます。円は赤色で描画され、半透明の絵柄となっています。これをスマホで表示すると、円が回転し続ける様子が観察できます。

←

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>
</head>
<body>
  <div id="canvas"></div>

// 初期化
    let x = size / 2;
    let y = size / 2;
    let radius = size / 4;
    let angle = 0;
    let speed = 0.01;

// 更新処理
    function update() {
      ctx.clearRect(0, 0, size, size);
      
      // 円を描画
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
      ctx.fill();

// 角度を更新
      angle += speed;

// x, y座標を更新
      x = size / 2 + Math.cos(angle) * radius;
      y = size / 2 + Math.sin(angle) * radius;

requestAnimationFrame(update);
    }

// ゲーム開始
    update();
  </script>
</body>
</html>
```

これをスマホで表示すると、円が回転し続ける様子が観察できます。