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

No:22630

←

Prev Next

→

お絵描き
Developer User10436｜Date and time 23/10/23 18:58:33
Build time 33.056 sec｜Game capacity 1.855KB｜

Script

了解しました。以下に、お絵描きゲームの一例を示します。

お絵描きゲーム

上記のHTMLファイルを作成し、Webブラウザで開くと「お絵描きゲーム」が実行されます。スマートフォンで操作することを前提としており、画面をタッチしながらドラッグすると、画面上に線が描画されます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に、お絵描きゲームの一例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>お絵描きゲーム</title>
    <style>
        #canvas {
            border: 1px solid black;
            touch-action: none;
        }
    </style>
</head>
<body>
    <h1>お絵描きゲーム</h1>
    <canvas id="canvas" width="400" height="400"></canvas>

let isDrawing = false;
            let lastX = 0;
            let lastY = 0;

canvas.addEventListener("touchstart", startDrawing);
            canvas.addEventListener("touchmove", draw);
            canvas.addEventListener("touchend", stopDrawing);

function startDrawing(e) {
                isDrawing = true;
                [lastX, lastY] = [e.targetTouches[0].clientX, e.targetTouches[0].clientY];
            }

function draw(e) {
                if (!isDrawing) return;
                const x = e.targetTouches[0].clientX;
                const y = e.targetTouches[0].clientY;

ctx.beginPath();
                ctx.moveTo(lastX, lastY);
                ctx.lineTo(x, y);
                ctx.stroke();

[lastX, lastY] = [x, y];
            }

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