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

No:33919

←

Prev Next

→

Merge Game
Developer User15951｜Date and time 24/1/7 3:12:55
Build time 61.576 sec｜Game capacity 7.399KB｜

Script

Sure, here's an example of a simple game called "Merge Game" implemented in a single HTML file using JavaScript, enclosed in script tags:

Merge Game

This game is a simplified version of the popular "2048" game. The objective is to merge adjacent tiles with the same value by using the arrow keys to move the tiles. The game ends when no more moves can be made. You can copy and save the above code into a file with an HTML extension (e.g., "merge_game.html"), then open it in a web browser (preferably on a smartphone) to play the game. The game board will be displayed, and you can start merging tiles by using the arrow keys.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure, here's an example of a simple game called "Merge Game" implemented in a single HTML file using JavaScript, enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Merge Game</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        h1 {
            color: #333;
        }
        #game-container {
            margin-top: 20px;
        }
        .tile {
            display: inline-block;
            width: 80px;
            height: 80px;
            background-color: #ccc;
            margin: 5px;
            line-height: 80px;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
        }
        .game-over {
            margin-top: 20px;
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>Merge Game</h1>
    <div id="game-container"></div>
    <script>
        // Game variables
        var tiles = [];
        var gameOver = false;

// Function to initialize the game
        function init() {
            // Create initial tiles
            createTile();
            createTile();

// Render the game board
            render();
        }

// Function to create a new tile
        function createTile() {
            var tileValue = Math.random() < 0.8 ? 2 : 4;
            var emptyTiles = tiles.filter(function(tile) {
                return tile.value === 0;
            });
            var randomIdx = Math.floor(Math.random() * emptyTiles.length);
            emptyTiles[randomIdx].value = tileValue;
        }

// Function to check if game is over
        function checkGameOver() {
            if (tiles.some(function(tile) { return tile.value === 0; })) {
                return false;
            }
            for (var i = 0; i < tiles.length; i++) {
                if ((i % 4 !== 3 && tiles[i].value === tiles[i+1].value) ||
                    (i < 12 && tiles[i].value === tiles[i+4].value)) {
                    return false;
                }
            }
            return true;
        }

// Function to render the game board
        function render() {
            var gameContainer = document.getElementById("game-container");
            gameContainer.innerHTML = "";

for (var i = 0; i < tiles.length; i++) {
                var tile = tiles[i];
                var tileElement = document.createElement("div");
                tileElement.className = "tile";
                tileElement.style.backgroundColor = getTileColor(tile.value);
                tileElement.textContent = tile.value !== 0 ? tile.value : "";
                gameContainer.appendChild(tileElement);
            }

// Display game over message if game is over
            if (gameOver) {
                var gameOverElement = document.createElement("div");
                gameOverElement.className = "game-over";
                gameOverElement.textContent = "Game Over!";
                gameContainer.appendChild(gameOverElement);
            }
        }

// Function to handle key events
        function handleKey(event) {
            if (gameOver) return;

var key = event.key;
            var moved = false;

switch(key) {
                case "ArrowUp":
                    moved = moveUp();
                    break;
                case "ArrowDown":
                    moved = moveDown();
                    break;
                case "ArrowLeft":
                    moved = moveLeft();
                    break;
                case "ArrowRight":
                    moved = moveRight();
                    break;
            }

if (moved) {
                createTile();
                render();

if (checkGameOver()) {
                    gameOver = true;
                    render();
                }
            }
        }

// Function to move tiles to the left
        function moveLeft() {
            var moved = false;

for (var i = 0; i < tiles.length; i++) {
                for (var j = i + 1; j < tiles.length; j++) {
                    if (tiles[j].value === 0) continue;
                    if (tiles[i].value === 0) {
                        tiles[i].value = tiles[j].value;
                        tiles[j].value = 0;
                        moved = true;
                    } else if (tiles[i].value === tiles[j].value) {
                        tiles[i].value *= 2;
                        tiles[j].value = 0;
                        moved = true;
                    }
                    break;
                }
            }

return moved;
        }

// Function to move tiles to the right
        function moveRight() {
            tiles.reverse(); // Reverse the array and apply moveLeft
            var moved = moveLeft();
            tiles.reverse(); // Reverse the array back

return moved;
        }

// Function to move tiles upwards
        function moveUp() {
            transposeTiles();
            var moved = moveLeft();
            transposeTiles();

return moved;
        }

// Function to move tiles downwards
        function moveDown() {
            transposeTiles();
            var moved = moveRight();
            transposeTiles();

return moved;
        }

// Function to transpose the tiles array
        function transposeTiles() {
            var transposedTiles = [];
            for (var i = 0; i < 4; i++) {
                for (var j = 0; j < 4; j++) {
                    transposedTiles.push(tiles[j * 4 + i]);
                }
            }
            tiles = transposedTiles;
        }

// Function to get tile background color based on its value
        function getTileColor(value) {
            switch(value) {
                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";
            }
        }

// Add key event listener
        document.addEventListener("keydown", handleKey);

// Initialize the game
        init();
    </script>
</body>
</html>
```

You can copy and save the above code into a file with an HTML extension (e.g., "merge_game.html"), then open it in a web browser (preferably on a smartphone) to play the game. The game board will be displayed, and you can start merging tiles by using the arrow keys.