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

No:31922

←

Prev Next

→

マージゲーム
Developer User15274｜Date and time 23/12/28 22:07:54
Build time 65.366 sec｜Game capacity 8.018KB｜

Script

了解しました。以下に、マージゲームのプログラムを記述します。

Merge Game

このプログラムは、4x4の盤面上で数字を操作して、同じ数字を隣り合わせて合体させるゲームです。スワイプ操作で数字を動かし、合体させていきます。ゲームの初期状態では、ランダムな位置に数字「2」が配置されます。合体させることができない場合やゲームオーバーの場合は、新たに数字が配置されず、ゲームが終了します。なお、スマートフォンでの操作を前提としていますが、PCでも動作します。スワイプ操作をエミュレートするために、マウスのクリックとドラッグで操作することもできます。

←

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Merge Game</title>
</head>
<body>
    <h1>Merge Game</h1>
    <div id="game-container"></div>

// ゲームの初期化
        function initialize() {
            // 盤面のランダムな位置に2を配置する
            const row = Math.floor(Math.random() * 4);
            const col = Math.floor(Math.random() * 4);
            board[row][col] = 2;

// ゲームの状態を画面に表示
            render();
        }

// ゲームの状態を画面に表示
        function render() {
            const container = document.getElementById("game-container");
            container.innerHTML = "";

for (let row = 0; row < 4; row++) {
                for (let col = 0; col < 4; col++) {
                    const cell = document.createElement("div");
                    cell.classList.add("cell");
                    cell.textContent = board[row][col] === 0 ? " " : board[row][col].toString();
                    container.appendChild(cell);
                }
            }
        }

// ゲームの状態を更新
        function update(direction) {
            let moved = false;

if (direction === "up") {
                for (let col = 0; col < 4; col++) {
                    for (let row = 1; row < 4; row++) {
                        if (board[row][col] !== 0) {
                            let i = row;
                            while (i > 0 && board[i - 1][col] === 0) {
                                board[i - 1][col] = board[i][col];
                                board[i][col] = 0;
                                i--;
                                moved = true;
                            }
                            if (i > 0 && board[i - 1][col] === board[i][col]) {
                                board[i - 1][col] *= 2;
                                board[i][col] = 0;
                                moved = true;
                            }
                        }
                    }
                }
            } else if (direction === "down") {
                for (let col = 0; col < 4; col++) {
                    for (let row = 2; row >= 0; row--) {
                        if (board[row][col] !== 0) {
                            let i = row;
                            while (i < 3 && board[i + 1][col] === 0) {
                                board[i + 1][col] = board[i][col];
                                board[i][col] = 0;
                                i++;
                                moved = true;
                            }
                            if (i < 3 && board[i + 1][col] === board[i][col]) {
                                board[i + 1][col] *= 2;
                                board[i][col] = 0;
                                moved = true;
                            }
                        }
                    }
                }
            } else if (direction === "left") {
                for (let row = 0; row < 4; row++) {
                    for (let col = 1; col < 4; col++) {
                        if (board[row][col] !== 0) {
                            let j = col;
                            while (j > 0 && board[row][j-1] === 0) {
                                board[row][j-1] = board[row][j];
                                board[row][j] = 0;
                                j--;
                                moved = true;
                            }
                            if (j > 0 && board[row][j-1] === board[row][j]) {
                                board[row][j-1] *= 2;
                                board[row][j] = 0;
                                moved = true;
                            }
                        }
                    }
                }
            } else if (direction === "right") {
                for (let row = 0; row < 4; row++) {
                    for (let col = 2; col >= 0; col--) {
                        if (board[row][col] !== 0) {
                            let j = col;
                            while (j < 3 && board[row][j+1] === 0) {
                                board[row][j+1] = board[row][j];
                                board[row][j] = 0;
                                j++;
                                moved = true;
                            }
                            if (j < 3 && board[row][j+1] === board[row][j]) {
                                board[row][j+1] *= 2;
                                board[row][j] = 0;
                                moved = true;
                            }
                        }
                    }
                }
            }

if (moved) {
                // 盤面の空いている位置に2をランダムに配置する
                let emptyCells = [];
                for (let row = 0; row < 4; row++) {
                    for (let col = 0; col < 4; col++) {
                        if (board[row][col] === 0) {
                            emptyCells.push({ row, col });
                        }
                    }
                }

if (emptyCells.length > 0) {
                    const idx = Math.floor(Math.random() * emptyCells.length);
                    const { row, col } = emptyCells[idx];
                    board[row][col] = 2;
                }

// ゲームの状態を画面に表示
                render();
            }
        }

// ゲームの初期化とスワイプ操作のイベントリスナーの設定
        document.addEventListener("DOMContentLoaded", function(event) {
            initialize();

let startX, startY;

document.addEventListener("touchstart", function(event) {
                startX = event.touches[0].clientX;
                startY = event.touches[0].clientY;
            });

document.addEventListener("touchend", function(event) {
                const endX = event.changedTouches[0].clientX;
                const endY = event.changedTouches[0].clientY;

const diffX = startX - endX;
                const diffY = startY - endY;

if (Math.abs(diffX) > Math.abs(diffY)) {
                    if (diffX > 0) {
                        update("left");
                    } else {
                        update("right");
                    }
                } else {
                    if (diffY > 0) {
                        update("up");
                    } else {
                        update("down");
                    }
                }
            });
        });
    </script>
    
    <style>
        .cell {
            display: inline-block;
            width: 80px;
            height: 80px;
            border: 1px solid black;
            text-align: center;
            font-size: 24px;
        }
    </style>
</body>
</html>
```

なお、スマートフォンでの操作を前提としていますが、PCでも動作します。スワイプ操作をエミュレートするために、マウスのクリックとドラッグで操作することもできます。