When you press the button, draw a picture.'s game

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

No:7707

1075

←

Prev Next

→

When you press the button, draw a picture.
Developer o2pi4｜Date and time 23/7/9 13:39:38
Build time 5.552 sec｜Game capacity 1.324KB｜

Script

ゲームを開始するようなプログラムを作ってみましょう。以下はサンプルのプログラムです。

このプログラムでは、画面上のcanvas要素にタッチ操作で絵を描くことができます。タッチした位置に円が描かれます。元の位置から指を動かすことで連続して円を描くことができます。

←

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 {
      border: 1px solid black;
      touch-action: none; /*スマホでのスクロールを無効にする*/
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    let isDrawing = false;

canvas.addEventListener('pointerdown', startDrawing);
    canvas.addEventListener('pointermove', draw);
    canvas.addEventListener('pointerup', stopDrawing);

function startDrawing(e) {
      isDrawing = true;
      draw(e);
    }

function draw(e) {
      if (!isDrawing) return;
      ctx.beginPath();
      ctx.arc(e.clientX, e.clientY, 10, 0, Math.PI * 2);
      ctx.fill();
    }

function stopDrawing() {
      isDrawing = false;
    }
  </script>
</body>
</html>
```