タブレットの画面を塗りつぶすゲーム's game

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

No:40706

←

Prev Next

→

タブレットの画面を塗りつぶすゲーム
Developer User18220｜Date and time 24/2/3 23:35:15
Build time 9.519 sec｜Game capacity 2.184KB｜

Script

以下は、タブレットの画面を塗りつぶすゲームの実装例です。プログラムは1枚のHTMLファイルに記述し、JavaScriptを含んでいます。JavaScriptの処理は実行開始されており、スマホ操作に対応しています。

上記のプログラムは、指でキャンバスをタッチすると、タッチした位置から指を動かすと同時に線が引かれていきます。これにより、タブレットの画面を自由に塗りつぶすことができるゲームとなっています。

←

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>
        body {
            margin: 0;
            padding: 0;
        }

#canvas {
            width: 100vw;
            height: 100vh;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

// キャンバスの取得
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

// キャンバスのサイズ設定
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// タッチイベントのリスナーを追加
        canvas.addEventListener('touchstart', startPaint);
        canvas.addEventListener('touchmove', paint);

function startPaint(e) {
            e.preventDefault();

// タッチされた座標を取得
            const x = e.touches[0].clientX;
            const y = e.touches[0].clientY;

// タッチした座標を塗りつぶし処理の開始座標として保存
            ctx.beginPath();
            ctx.moveTo(x, y);
        }

function paint(e) {
            e.preventDefault();

// タッチされた座標を取得
            const x = e.touches[0].clientX;
            const y = e.touches[0].clientY;

// 現在の座標を結ぶ線を描画
            ctx.lineTo(x, y);
            ctx.stroke();
        }
    </script>
</body>
</html>
```