A game that draws pictures on its own!'s game

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

No:7994

7153

←

Prev Next

→

A game that draws pictures on its own!
Developer もちきなこ｜Date and time 23/7/11 18:40:33
Build time 16.807 sec｜Game capacity 2.265KB｜

Script

了解しました！以下に勝手に絵を描いてくれるゲームの実装例を示します。

このプログラムは、指定したキャンバス上にマウスの移動に応じてランダムな色の円を描くゲームです。ブラウザで実行すると、マウスを動かすことで自動で絵が描かれます。絵の色は事前に設定された色のリストからランダムに選ばれます。なお、このプログラムでは制約の一つであるスマホ操作には対応しておらず、PCでの操作を想定しています。スマホでの操作に対応させる場合は、`mousemove` イベントに加えて、`mousemove` イベントも取得する必要があります。ご参考までにお使いください！

←

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 {
      width: 400px;
      height: 400px;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>

// マウス座標の初期化
      let mouseX = 0;
      let mouseY = 0;

// マウス座標の更新
      canvas.addEventListener("mousemove", function(e) {
        const rect = e.target.getBoundingClientRect();
        mouseX = e.clientX - rect.left;
        mouseY = e.clientY - rect.top;
      });

// 絵を描く処理
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // 色の選択
        const color = colors[Math.floor(Math.random() * colors.length)];
        
        // 円を描く
        ctx.beginPath();
        ctx.arc(mouseX, mouseY, 10, 0, Math.PI * 2, false);
        ctx.fillStyle = color;
        ctx.fill();
        
        // 次のフレームで再描画
        requestAnimationFrame(draw);
      }
      
      // 絵を描く処理を開始
      draw();
    };
  </script>
</body>
</html>
```

このプログラムは、指定したキャンバス上にマウスの移動に応じてランダムな色の円を描くゲームです。ブラウザで実行すると、マウスを動かすことで自動で絵が描かれます。絵の色は事前に設定された色のリストからランダムに選ばれます。

なお、このプログラムでは制約の一つであるスマホ操作には対応しておらず、PCでの操作を想定しています。スマホでの操作に対応させる場合は、`mousemove` イベントに加えて、`touchmove` イベントも取得する必要があります。

ご参考までにお使いください！