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

No:34529

←

Prev Next

→

マージゲーム
Developer 豆腐｜Date and time 24/1/11 2:44:06
Build time 29.286 sec｜Game capacity 7.469KB｜

Script

了解です。以下に、マージゲームの実装例を示します。

Merge Game

この実装例は、マージゲームがスマホで遊べるように、指定された要件に従ってHTMLとJavaScriptを含む1枚のHTMLファイルとして実装されています。スタイルはCSSで定義し、セルのマージや移動は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>Merge Game</title>
    <style>
        body {
            background-color: #efefef;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        .container {
            max-width: 400px;
            margin: 0 auto;
        }
        
        .board {
            border: 2px solid #000;
            border-radius: 5px;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #fff;
            display: flex;
            flex-wrap: wrap;
        }
        
        .cell {
            width: calc(25% - 10px);
            height: 60px;
            margin: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            background-color: #ccc;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Merge Game</h1>
        <div class="board">
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
        </div>
        <button id="mergeButton">Merge</button>
    </div>
    
    <script>
        // マージゲームのロジックを実装
        function mergeGame() {
            const board = document.querySelector('.board');
            const cells = document.querySelectorAll('.cell');
            const mergeButton = document.getElementById('mergeButton');
            let numbers = [2, 4];
            
            // ランダムな位置に2または4を追加
            function addNumber() {
                const emptyCells = Array.from(cells).filter(cell => !cell.textContent);
                if (emptyCells.length === 0) {
                    alert('Game over!');
                    return;
                }
                const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
                randomCell.textContent = numbers[Math.floor(Math.random() * numbers.length)];
            }
            
            // 初期状態のセルを作成
            function createCells() {
                for (let i = 0; i < cells.length; i++) {
                    cells[i].textContent = '';
                }
                addNumber();
            }
            
            // セルの値をマージ
            function mergeCells() {
                for (let i = 0; i < cells.length - 1; i++) {
                    const currentCell = cells[i];
                    const nextCell = cells[i + 1];
                    
                    if (currentCell.textContent === nextCell.textContent && currentCell.textContent !== '') {
                        const newValue = currentCell.textContent * 2;
                        currentCell.textContent = newValue;
                        nextCell.textContent = '';
                    }
                }
            }
            
            // キーボード操作の処理
            function handleKeyPress(event) {
                if (event.key === 'ArrowLeft') {
                    moveLeft();
                    mergeCells();
                    moveLeft();
                } else if (event.key === 'ArrowRight') {
                    moveRight();
                    mergeCells();
                    moveRight();
                } else if (event.key === 'ArrowUp') {
                    moveUp();
                    mergeCells();
                    moveUp();
                } else if (event.key === 'ArrowDown') {
                    moveDown();
                    mergeCells();
                    moveDown();
                }
                addNumber();
            }
            
            // セルを左に移動
            function moveLeft() {
                for (let i = 0; i < cells.length - 1; i++) {
                    const currentCell = cells[i];
                    const nextCell = cells[i + 1];
                    
                    if (currentCell.textContent === '') {
                        currentCell.textContent = nextCell.textContent;
                        nextCell.textContent = '';
                    }
                }
            }
            
            // セルを右に移動
            function moveRight() {
                for (let i = cells.length - 1; i >= 1; i--) {
                    const currentCell = cells[i];
                    const previousCell = cells[i - 1];
                    
                    if (currentCell.textContent === '') {
                        currentCell.textContent = previousCell.textContent;
                        previousCell.textContent = '';
                    }
                }
            }
            
            // セルを上に移動
            function moveUp() {
                for (let i = 0; i <= 3; i++) {
                    const currentCell = cells[i];
                    const belowCell = cells[i + 4];
                    
                    if (currentCell.textContent === '') {
                        currentCell.textContent = belowCell.textContent;
                        belowCell.textContent = '';
                    }
                }
            }
            
            // セルを下に移動
            function moveDown() {
                for (let i = 3; i >= 0; i--) {
                    const currentCell = cells[i];
                    const aboveCell = cells[i - 4];
                    
                    if (currentCell.textContent === '') {
                        currentCell.textContent = aboveCell.textContent;
                        aboveCell.textContent = '';
                    }
                }
            }
            
            // ゲームを開始
            function startGame() {
                createCells();
                document.addEventListener('keydown', handleKeyPress);
            }
            
            // Mergeボタンがクリックされた時の処理
            mergeButton.addEventListener('click', function() {
                mergeCells();
                addNumber();
            });
            
            // ゲームを開始
            startGame();
        }
        
        // ページ読み込み後にゲームを開始する
        window.addEventListener('load', mergeGame);
    </script>
</body>
</html>
```

この実装例をブラウザで開くと、マージゲームを遊ぶことができます。