回転タイルパズル

ソース
プログラム

<!DOCTYPE html><!-- 画面HTML --- (※1) -->
<html><head><meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回転タイルパズル - 画像版</title>
</head><body style="text-align: center; margin:0; padding:0;">
    <h1 id="title">回転タイルパズル - 画像版</h1>
    <canvas id="gameCanvas" width="370" height="370"></canvas>
</body>
<script>
// 定数の定義 --- (※2)
const RANDOM_COUNT = 4; // シャッフル回数
const GRID_SIZE = 3; // グリッドのサイズ（3x3）
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const TILE_SIZE = canvas.width / GRID_SIZE;
const dragInfo = {xy: [0, 0], f: false, tile: [0, 0]};
// タイルを初期化 --- (※3)
const tiles = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
// 行全体をスライド（循環シフト） --- (※4a)
function shiftRow(row, toRight = true) {
    if (row < 0 || row >= GRID_SIZE) return;
    const r = tiles[row];
    if (toRight) { r.unshift(r.pop()); } else { r.push(r.shift()); }
}
// 列全体をスライド（循環シフト）--- (※4b)
function shiftColumn(col, toDown = true) {
    if (col < 0 || col >= GRID_SIZE) return;
    const c = tiles.map(row => row[col]);
    if (toDown) { c.unshift(c.pop()); } else { c.push(c.shift()); }
    for (let y = 0; y < GRID_SIZE; y++) { tiles[y][col] = c[y]; }
}
// スワイプ検出してタイルの移動処理 --- (※5)
function handleSwipe(cx, cy) {
    const p = [cx - dragInfo.xy[0], cy - dragInfo.xy[1]];
    const distance = Math.sqrt(p[0] * p[0] + p[1] * p[1]);
    if (distance > 40) {
        if (Math.abs(p[0]) > Math.abs(p[1])) {
            shiftRow(dragInfo.tile[1], p[0] > 0);
        } else {
            shiftColumn(dragInfo.tile[0], p[1] > 0);
        }
        dragInfo.f = false;
        draw();
    }
}
// タイルをシャッフルする - ランダムに行または列をシフト --- (※6)
function shuffleTiles() {
    for (let i = 0; i < RANDOM_COUNT; i++) {
        const idx = Math.floor(Math.random() * GRID_SIZE);
        const dir = (Math.random() > 0.5);
        if (Math.random() > 0.5) { shiftRow(idx, dir) } else { shiftColumn(idx, dir) }
    }
}
// --- 差し替え : ここから ---
// 画像の読み込み
const img = new Image();
img.src = 'https://n3s.nadesi.com/image.php?t=ebd700b2c3f1e30f&f=594.png';
img.onload = () => { img.ok = true; };
// ゲーム画面の描画 --- (※7)
function draw() {
    if (!img.ok) {
        setTimeout(draw, 100);
        return; // 画像が読み込まれていない場合は遅延させて描画
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // タイルを一つずつ描画
    for (let y = 0; y < GRID_SIZE; y++) {
        for (let x = 0; x < GRID_SIZE; x++) {
            const no = tiles[y][x] - 1; // タイル番号（0～8）
            const ix = (no % GRID_SIZE);
            const iy = Math.floor(no / GRID_SIZE);
            const imgW = img.width / GRID_SIZE;
            const imgH = img.height / GRID_SIZE;
            ctx.drawImage(
                img,
                ix * imgW, iy * imgH, imgW, imgH,
                x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE
            );
        }
    }
}
// --- 差し替え : ここまで ---

// マウスのイベントを設定
canvas.addEventListener('mousedown', (e) => { // マウスボタンを押した時 --- (※8)
    dragInfo.f = true;
    dragInfo.xy = [e.clientX, e.clientY]; // 押した位置を保存
    // マウス座標からタイル位置を取得
    const r = canvas.getBoundingClientRect();
    dragInfo.tile = [ // タイルの位置を保存
        Math.floor((e.clientX - r.left) / TILE_SIZE),
        Math.floor((e.clientY - r.top) / TILE_SIZE)
    ];
});

const CLEAR_MESSAGE = '完成⭐最初にクリアした人にケーキがあるよ🍰';
canvas.addEventListener('mousemove', (e) => { // カーソルを移動したとき --- (※9)
    if (dragInfo.f) {
        handleSwipe(e.clientX, e.clientY);
        const isClear = tiles.flat().every((v, i) => v === i + 1); // クリア判定
        if (isClear) {
            document.getElementById('title').innerText = CLEAR_MESSAGE;
        }
    }
});

canvas.addEventListener('mouseup', () => {dragInfo.f = false;});

// スマートフォンのタッチイベントの設定
canvas.addEventListener('touchstart', (e) => {
    e.preventDefault();
    const touch = e.touches[0];
    dragInfo.f = true;
    dragInfo.xy = [touch.clientX, touch.clientY]; // 押した位置を保存
    // マウス座標からタイル位置を取得
    const r = canvas.getBoundingClientRect();
    dragInfo.tile = [ // タイルの位置を保存
        Math.floor((touch.clientX - r.left) / TILE_SIZE),
        Math.floor((touch.clientY - r.top) / TILE_SIZE)
    ];
});
canvas.addEventListener('touchmove', (e) => {
    e.preventDefault();
    if (dragInfo.f) {
        const touch = e.touches[0];
        handleSwipe(touch.clientX, touch.clientY);
        const isClear = tiles.flat().every((v, i) => v === i + 1); // クリア判定
        if (isClear) {
            document.getElementById('title').innerText = CLEAR_MESSAGE;
        }
    }
});
canvas.addEventListener('touchend', (e) => {
    e.preventDefault();
    dragInfo.f = false;
});

// 初回の処理 --- (※10)
shuffleTiles();
draw();
</script>
</html>
作品について
作品情報

作品を編集
クジラ飛行机作
ライセンス: 自分用（貯蔵庫のみ/転載不可/ハブ保存なし）
形式: html
タグ: -
利用バージョン: 3.7.11
アクセス数(累計): 101
アクセス数(今月): 29
更新日時: 2025/12/24 20:23 編集: 2026/07/15 00:59
作品公開情報
交流
回転タイルパズル - 画像版

プログラム

作品情報

コメント
