AI game creator

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

No:16267

138

←

Prev Next

→

おえかき
Developer おまめちゃん｜Date and time 23/9/16 21:26:45
Build time 21.88 sec｜Game capacity 2.001KB｜

Script

了解しました。以下に、スマートフォンで遊べるシンプルなお絵かきゲームのHTMLファイルを実装します。

このHTMLファイルをブラウザで開くと、スマートフォンの画面がキャンバスとなり、自由にお絵かきができるようになります。指で画面をなぞることで線を描くことができます。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解しました。以下に、スマートフォンで遊べるシンプルなお絵かきゲームのHTMLファイルを実装します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>おえかきゲーム</title>
    <style>
        * {
            box-sizing: border-box;
        }

body {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            background-color: #f9f9f9;
        }

#canvas {
            width: 100vw;
            height: 100vh;
            touch-action: none;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

// 線の設定
        ctx.strokeStyle = "black";
        ctx.lineWidth = 5;
        ctx.lineCap = "round";

// タッチイベントの処理
        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;

function draw(e) {
            if (!isDrawing) return;
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(e.touches[0].clientX, e.touches[0].clientY);
            ctx.stroke();
            [lastX, lastY] = [e.touches[0].clientX, e.touches[0].clientY];
        }

canvas.addEventListener("touchstart", (e) => {
            isDrawing = true;
            [lastX, lastY] = [e.touches[0].clientX, e.touches[0].clientY];
        });

canvas.addEventListener("touchmove", draw);
        canvas.addEventListener("touchend", () => isDrawing = false);
    </script>
</body>
</html>
```