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

No:22206

←

Prev Next

→

スライドパズル16
Developer バファリンヌ｜Date and time 23/10/21 15:26:43
Build time 84.468 sec｜Game capacity 4.386KB｜

Script

以下に、要件に沿ったスライドパズル16のゲームを実装したHTMLファイルの例を示します。

スライドパズル16

このゲームは、16枚のピースが配置された4x4のボードを操作して、ピースをスライドさせて元の数字の順番に並べるゲームです。各ピースをクリックすることで、そのピースが空きマスに移動します。ピースが正しい順番に並ぶとゲームクリアとなります。ボードはHTMLのdiv要素で作成され、クリックイベントにJavaScriptの関数がバインドされています。JavaScriptの関数でボードの状態を管理し、ゲームの状態を更新しています。また、HTMLのstyle要素を使用して、各ピースの位置や見た目を制御しています。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

以下に、要件に沿ったスライドパズル16のゲームを実装したHTMLファイルの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>スライドパズル16</title>
    <style>
        .tile {
            width: 80px;
            height: 80px;
            background-color: #eee;
            border: 1px solid #aaa;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 36px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>スライドパズル16</h1>
    <div id="board"></div>
    <script>
        // ゲームボードのサイズ
        const BOARD_SIZE = 4;

// ゲームボードの初期状態
        let board = [];

// 空きのマス目の座標
        let emptyCell = { x: BOARD_SIZE - 1, y: BOARD_SIZE - 1 };

// ゲームがクリアされたかどうかのフラグ
        let isClear = false;

// ゲームボードの初期化
        function initializeBoard() {
            // 数字を1から16までの順番で埋める
            for (let i = 0; i < BOARD_SIZE; i++) {
                board[i] = [];
                for (let j = 0; j < BOARD_SIZE; j++) {
                    board[i][j] = i * BOARD_SIZE + j + 1;
                }
            }
            
            // 最後のマス目を空きマスにする
            board[BOARD_SIZE - 1][BOARD_SIZE - 1] = null;
        }

// ゲームボードの表示
        function renderBoard() {
            const boardElement = document.getElementById('board');
            boardElement.innerHTML = '';

for (let i = 0; i < BOARD_SIZE; i++) {
                for (let j = 0; j < BOARD_SIZE; j++) {
                    const tile = document.createElement('div');
                    tile.className = 'tile';
                    tile.textContent = board[i][j] || '';
                    tile.style.top = i * 80 + 'px';
                    tile.style.left = j * 80 + 'px';

if (board[i][j] === null) {
                        tile.style.backgroundColor = '#aaa';
                    } else if (isClear) {
                        tile.style.backgroundColor = 'lightgreen';
                    }

tile.onclick = function () {
                        moveTile(i, j);
                    };

boardElement.appendChild(tile);
                }
            }
        }

// マス目の移動
        function moveTile(row, col) {
            if (isClear) return;

if (Math.abs(row - emptyCell.x) + Math.abs(col - emptyCell.y) === 1) {
                [board[row][col], board[emptyCell.x][emptyCell.y]] = [board[emptyCell.x][emptyCell.y], board[row][col]];
                [emptyCell.x, emptyCell.y] = [row, col];
            }

checkClear();
            renderBoard();
        }

// ゲームのクリア判定
        function checkClear() {
            let number = 0;
            for (let i = 0; i < BOARD_SIZE; i++) {
                for (let j = 0; j < BOARD_SIZE; j++) {
                    number++;
                    if (number === BOARD_SIZE**2) {
                        number = null;
                    }

if (board[i][j] !== number) {
                        return;
                    }
                }
            }

isClear = true;
        }

// ゲームの初期化と表示
        function startGame() {
            initializeBoard();
            renderBoard();
        }

// ゲームの開始
        startGame();
    </script>
</body>
</html>
```

このゲームは、16枚のピースが配置された4x4のボードを操作して、ピースをスライドさせて元の数字の順番に並べるゲームです。各ピースをクリックすることで、そのピースが空きマスに移動します。ピースが正しい順番に並ぶとゲームクリアとなります。

ボードはHTMLのdiv要素で作成され、クリックイベントにJavaScriptの関数がバインドされています。JavaScriptの関数でボードの状態を管理し、ゲームの状態を更新しています。また、HTMLのstyle要素を使用して、各ピースの位置や見た目を制御しています。