When you tap, a picture is drawn.'s game

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

No:7708

1839

←

Prev Next

→

When you tap, a picture is drawn.
Developer o2pi4｜Date and time 23/7/9 13:40:48
Build time 6.993 sec｜Game capacity 1.422KB｜

Script

以下は、スマートフォンでタップすると絵が描かれるシンプルなゲームの例です。

このプログラムでは、HTMLファイル内に`canvas`要素を配置し、JavaScriptを使ってタップした位置に円を描いています。`canvas.addEventListener("mousedown", ...)`でタップイベントを検知し、`drawCircle`関数で円を描画しています。タップするたびに円が描かれ、絵が完成していく様子を楽しむことができます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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" width="400" height="400"></canvas>

// タップした位置に円を描く
      canvas.addEventListener("touchstart", function(e) {
        var x = e.touches[0].clientX - canvas.offsetLeft;
        var y = e.touches[0].clientY - canvas.offsetTop;
        drawCircle(ctx, x, y, 20);
      });

// 円を描く関数
      function drawCircle(ctx, x, y, radius) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.fillStyle = "black";
        ctx.fill();
        ctx.closePath();
      }
    }

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

このプログラムでは、HTMLファイル内に`canvas`要素を配置し、JavaScriptを使ってタップした位置に円を描いています。`canvas.addEventListener("touchstart", ...)`でタップイベントを検知し、`drawCircle`関数で円を描画しています。

タップするたびに円が描かれ、絵が完成していく様子を楽しむことができます。