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

No:36502

お絵描きゲーム。タップしたところに色を塗れる。消しゴムボタンを押すと描いた絵を消せる
Developer User16795｜Date and time 24/1/17 20:34:04
Build time 10.823 sec｜Game capacity 2.269KB｜

Script

了解しました。以下にお絵描きゲームの実装例を示します。このコードを1枚のhtmlファイルに入れ、ブラウザで実行すると遊ぶことができます。

お絵描きゲーム

このコードを実行すると、スマホでタップしたところに色を塗ることができます。ボタンを選択すると描いた絵を消すこともできます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

了解しました。以下にお絵描きゲームの実装例を示します。このコードを1枚のhtmlファイルに入れ、ブラウザで実行すると遊ぶことができます。

```html
<!DOCTYPE html>
<html>
<head>
    <title>お絵描きゲーム</title>
    <style>
        #canvas {
            touch-action: manipulation;
        }
    </style>
</head>
<body>
    <h1>お絵描きゲーム</h1>
    <canvas id="canvas" width="400" height="400"></canvas>
    <br>
    <button onclick="changeColor('red')">🔴</button>
    <button onclick="changeColor('green')">🟢</button>
    <button onclick="changeColor('blue')">🔵</button>
    <button onclick="erase()">消しゴム</button>
    <script>
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

var isDrawing = false;
        var lastX = 0;
        var lastY = 0;
        var currentColor = "black";

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

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

function draw(e) {
            if (!isDrawing) return;
            var x = e.touches[0].clientX;
            var y = e.touches[0].clientY;
            context.strokeStyle = currentColor;
            context.lineWidth = 10;
            context.lineJoin = "round";
            context.lineCap = "round";
            context.beginPath();
            context.moveTo(lastX, lastY);
            context.lineTo(x, y);
            context.closePath();
            context.stroke();
            [lastX, lastY] = [x, y];
        }

function stopDrawing() {
            isDrawing = false;
        }

function changeColor(color) {
            currentColor = color;
        }

function erase() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }
    </script>
</body>
</html>
```

このコードを実行すると、スマホでタップしたところに色を塗ることができます。ボタンを選択すると描いた絵を消すこともできます。