AI game creator

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

No:42615

←

Prev Next

→

お絵描き
Developer User10436｜Date and time 24/2/12 9:26:15
Build time 5.935 sec｜Game capacity 1.778KB｜

Script

はご要望の通り、JavaScriptを使用したお絵描きゲームのプログラムを以下に示します。

このプログラムは、スマートフォンで使用することを想定しています。タッチイベントを利用して、キャンバス上でスワイプすると線が描けるお絵描きゲームになります。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

はご要望の通り、JavaScriptを使用したお絵描きゲームのプログラムを以下に示します。

```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="500" height="500"></canvas>
    <script>
      window.addEventListener("DOMContentLoaded", () => {
        // キャンバス要素の取得
        const canvas = document.getElementById("canvas");
        const context = canvas.getContext("2d");
        
        // タッチ座標の初期化
        let touchX = 0;
        let touchY = 0;
        
        // イベントリスナーの設定
        canvas.addEventListener("touchstart", (event) => {
          touchX = event.touches[0].clientX - canvas.getBoundingClientRect().left;
          touchY = event.touches[0].clientY - canvas.getBoundingClientRect().top;
          event.preventDefault();
        });
        
        canvas.addEventListener("touchmove", (event) => {
          const x = event.touches[0].clientX - canvas.getBoundingClientRect().left;
          const y = event.touches[0].clientY - canvas.getBoundingClientRect().top;
          
          context.beginPath();
          context.moveTo(touchX, touchY);
          context.lineTo(x, y);
          context.stroke();
          
          touchX = x;
          touchY = y;
        });
      });
    </script>
  </body>
</html>
```