マージゲーム's game | AI game creator

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

No:24244

94

マージゲーム
Developer User3578｜Date and time 23/11/6 19:41:02
Build time 165.654 sec｜Game capacity 10.137KB｜

了解しました。以下に、HTMLファイルとJavaScriptコードを示します。

このプログラムは、2048というマージゲームを実装しています。プログラムはHTMLファイル内に含まれており、JavaScriptコードは`
`タグで囲まれています。このプログラムを実行すると、Webブラウザ上で遊べる2048のゲームが表示されます。

→ 　

0　

0　

[PR]現在の欲しいゲームランキング

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

(C)2023 HisashiApp

了解しました。以下に、HTMLファイルとJavaScriptコードを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>マージゲーム</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-size: 48px;
            font-family: Arial, sans-serif;
            user-select: none;
        }
        
        #game {
            width: 300px;
            height: 300px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(4, 1fr);
            gap: 10px;
            background-color: #eee;
            padding: 10px;
            border-radius: 10px;
        }

.tile {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ccc;
            border-radius: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="game"></div>

<script>
        const gameContainer = document.getElementById("game");
        const tiles = [];
        const initialNumbers = [2, 2, 4];
      
        // ゲームの初期化
        function initializeGame() {
            while (tiles.length > 0) {
                tiles.pop();
            }
        
            while (gameContainer.firstChild) {
                gameContainer.firstChild.remove();
            }
        
            for (let i = 0; i < 4; i++) {
                for (let j = 0; j < 4; j++) {
                    const tile = createTile();
                    gameContainer.appendChild(tile);
                    tiles.push(tile);
                }
            }
        
            addRandomNumber();
            addRandomNumber();
        }
      
        // タイルを作成する
        function createTile() {
            const tile = document.createElement("div");
            tile.classList.add("tile");
            tile.textContent = "";
            return tile;
        }
      
        // ランダムな位置にランダムな数値のタイルを追加する
        function addRandomNumber() {
            const index = Math.floor(Math.random() * tiles.length);
            const tile = tiles[index];
            const number = initialNumbers[Math.floor(Math.random() * initialNumbers.length)];
            tile.textContent = number;
            tile.style.backgroundColor = getTileBackgroundColor(number);
        }
      
        // タイルの背景色を指定する
        function getTileBackgroundColor(number) {
            switch (number) {
                case 2: return "#eee4da";
                case 4: return "#ede0c8";
                case 8: return "#f2b179";
                case 16: return "#f59563";
                case 32: return "#f67c5f";
                case 64: return "#f65e3b";
                case 128: return "#edcf72";
                case 256: return "#edcc61";
                case 512: return "#edc850";
                case 1024: return "#edc53f";
                case 2048: return "#edc22e";
                default: return "#ccc0b3";
            }
        }
      
        // ゲームの状態を更新する
        function updateGame() {
            tiles.forEach(tile => {
                const number = parseInt(tile.textContent);
                tile.style.backgroundColor = getTileBackgroundColor(number);
            });
        
            if (tiles.some(tile => tile.textContent === "2048")) {
                alert("Congratulations! You won!");
                initializeGame();
            }
        }
      
        // ゲームの初期化
        initializeGame();
      
        // スワイプ操作の検知
        let startX, startY;
        document.addEventListener("touchstart", event => {
            startX = event.touches[0].clientX;
            startY = event.touches[0].clientY;
        });
      
        document.addEventListener("touchend", event => {
            const endX = event.changedTouches[0].clientX;
            const endY = event.changedTouches[0].clientY;
            const diffX = endX - startX;
            const diffY = endY - startY;
      
            if (Math.abs(diffX) > Math.abs(diffY)) {
                if (diffX > 0) {
                    moveRight();
                } else {
                    moveLeft();
                }
            } else {
                if (diffY > 0) {
                    moveDown();
                } else {
                    moveUp();
                }
            }
        
            updateGame();
        });
      
        // タイルを左に移動させる
        function moveLeft() {
            let hasMoved = false;
        
            for (let i = 0; i < 4; i++) {
                const row = [];
        
                for (let j = 0; j < 4; j++) {
                    const index = i * 4 + j;
        
                    if (tiles[index].textContent !== "") {
                        row.push(tiles[index]);
                    }
                }
        
                const mergedRow = mergeTiles(row);
                hasMoved = hasMoved || mergedRow.length !== row.length;
        
                for (let j = 0; j < 4; j++) {
                    const index = i * 4 + j;
                    const tile = mergedRow[j] || null;
                    tiles[index] = tile || createTile();
                    gameContainer.replaceChild(tiles[index], gameContainer.childNodes[index]);
                }
            }
        
            if (hasMoved) {
                addRandomNumber();
            }
        }
      
        // タイルを右に移動させる
        function moveRight() {
            let hasMoved = false;
        
            for (let i = 0; i < 4; i++) {
                const row = [];
        
                for (let j = 3; j >= 0; j--) {
                    const index = i * 4 + j;
        
                    if (tiles[index].textContent !== "") {
                        row.unshift(tiles[index]);
                    }
                }
        
                const mergedRow = mergeTiles(row);
                hasMoved = hasMoved || mergedRow.length !== row.length;
        
                for (let j = 3; j >= 0; j--) {
                    const index = i * 4 + j;
                    const tile = mergedRow[3 - (row.length - 1 - j)] || null;
                    tiles[index] = tile || createTile();
                    gameContainer.replaceChild(tiles[index], gameContainer.childNodes[index]);
                }
            }
        
            if (hasMoved) {
                addRandomNumber();
            }
        }
      
        // タイルを上に移動させる
        function moveUp() {
            let hasMoved = false;
        
            for (let j = 0; j < 4; j++) {
                const column = [];
        
                for (let i = 0; i < 4; i++) {
                    const index = i * 4 + j;
        
                    if (tiles[index].textContent !== "") {
                        column.push(tiles[index]);
                    }
                }
        
                const mergedColumn = mergeTiles(column);
                hasMoved = hasMoved || mergedColumn.length !== column.length;
        
                for (let i = 0; i < 4; i++) {
                    const index = i * 4 + j;
                    const tile = mergedColumn[i] || null;
                    tiles[index] = tile || createTile();
                    gameContainer.replaceChild(tiles[index], gameContainer.childNodes[index]);
                }
            }
        
            if (hasMoved) {
                addRandomNumber();
            }
        }
      
        // タイルを下に移動させる
        function moveDown() {
            let hasMoved = false;
        
            for (let j = 0; j < 4; j++) {
                const column = [];
        
                for (let i = 3; i >= 0; i--) {
                    const index = i * 4 + j;
        
                    if (tiles[index].textContent !== "") {
                        column.unshift(tiles[index]);
                    }
                }
        
                const mergedColumn = mergeTiles(column);
                hasMoved = hasMoved || mergedColumn.length !== column.length;
        
                for (let i = 3; i >= 0; i--) {
                    const index = i * 4 + j;
                    const tile = mergedColumn[3 - (column.length - 1 - i)] || null;
                    tiles[index] = tile || createTile();
                    gameContainer.replaceChild(tiles[index], gameContainer.childNodes[index]);
                }
            }
        
            if (hasMoved) {
                addRandomNumber();
            }
        }
      
        // タイルをマージする
        function mergeTiles(tiles) {
            const mergedTiles = [];
            let i = 0;
        
            while (i < tiles.length) {
                if (i === tiles.length - 1) {
                    mergedTiles.push(tiles[i]);
                    i++;
                } else if (tiles[i].textContent === tiles[i + 1].textContent) {
                    const mergedTile = createTile();
                    const number = parseInt(tiles[i].textContent) * 2;
                    mergedTile.textContent = number;
                    mergedTile.style.backgroundColor = getTileBackgroundColor(number);
                    mergedTiles.push(mergedTile);
                    i += 2;
                } else {
                    mergedTiles.push(tiles[i]);
                    i++;
                }
            }
        
            return mergedTiles;
        }
    </script>
</body>
</html>
```

このプログラムは、2048というマージゲームを実装しています。プログラムはHTMLファイル内に含まれており、JavaScriptコードは`<script>`タグで囲まれています。このプログラムを実行すると、Webブラウザ上で遊べる2048のゲームが表示されます。