AI game creator

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

No:31563

←

Prev Next

→

Merge Game
Developer User15177｜Date and time 23/12/27 13:54:40
Build time 44.902 sec｜Game capacity 7.776KB｜

Script

I'm sorry, but as an AI text-based model, I'm unable to directly provide you with a single HTML file. However, I can help you with an example of how you can create a simple merge game using JavaScript within an HTML file. Below is an example implementation which you can save as an HTML file and run in your browser:

Merge Game

Instructions: Swipe the blocks to merge them!

This is a simple implementation of a merge game where you swipe the blocks to merge them. You can use the arrow keys on your keyboard to swipe the blocks in the respective directions. The goal is to merge blocks with the same number until you reach 2048 (or any other goal you want). If there are no more moves possible, the game ends and your score is displayed. Please note that this is a basic implementation and can be further enhanced or customized as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }

#game-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 20px;
        }

.block {
            width: 100px;
            height: 100px;
            border: 2px solid gray;
            margin: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
        }
    </style>
</head>
<body>
    <h2>Merge Game</h2>
    <p>Instructions: Swipe the blocks to merge them!</p>
    <div id="game-container"></div>

// Game State
        let grid = [];
        let score = 0;

// Initialize the game grid
        function initGrid() {
            for (let i = 0; i < GRID_SIZE; i++) {
                grid[i] = [];
                for (let j = 0; j < GRID_SIZE; j++) {
                    grid[i][j] = 0;
                }
            }
        }

// Add a new block (2 or 4) to a random position on the grid
        function addNewBlock() {
            const emptyCells = [];
            for (let i = 0; i < GRID_SIZE; i++) {
                for (let j = 0; j < GRID_SIZE; j++) {
                    if (grid[i][j] === 0) {
                        emptyCells.push({ x: i, y: j });
                    }
                }
            }

if (emptyCells.length > 0) {
                const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
                const newValue = Math.random() < 0.9 ? 2 : 4;
                grid[randomCell.x][randomCell.y] = newValue;
            }
        }

// Render the game grid on the UI
        function renderGrid() {
            const gameContainer = document.getElementById('game-container');
            gameContainer.innerHTML = '';

for (let i = 0; i < GRID_SIZE; i++) {
                for (let j = 0; j < GRID_SIZE; j++) {
                    const block = document.createElement('div');
                    block.classList.add('block');

if (grid[i][j] === 0) {
                        block.textContent = '';
                        block.style.backgroundColor = '#CDC1B4';
                    } else {
                        block.textContent = grid[i][j];
                        block.style.backgroundColor = '#EDE3DB';
                    }

gameContainer.appendChild(block);
                }
            }
        }

// Handle keydown events
        function handleKeyPress(event) {
            const keyPressed = event.key;
            
            if (keyPressed === 'ArrowUp' || keyPressed === 'ArrowDown' || keyPressed === 'ArrowLeft' || keyPressed === 'ArrowRight') {
                event.preventDefault();
                moveBlocks(keyPressed);
                renderGrid();
                checkGameStatus();
            }
        }

// Move the blocks based on the key pressed
        function moveBlocks(direction) {
            const isHorizontal = direction === 'ArrowLeft' || direction === 'ArrowRight';
            const increment = direction === 'ArrowDown' || direction === 'ArrowRight' ? 1 : -1;
            const limit = direction === 'ArrowDown' || direction === 'ArrowRight' ? GRID_SIZE - 1 : 0;

for (let i = 0; i < GRID_SIZE; i++) {
                const rowColumn = isHorizontal ? grid[i] : grid.map((row) => row[i]);
                const filteredRowColumn = rowColumn.filter((value) => value !== 0);

if (filteredRowColumn.length > 0) {
                    let mergedRowColumn = [];

if (increment === 1) {
                        for (let j = filteredRowColumn.length - 1; j >= 0; j--) {
                            if (filteredRowColumn[j] === filteredRowColumn[j - 1]) {
                                const mergedValue = filteredRowColumn[j] * 2;
                                mergedRowColumn.unshift(mergedValue);
                                score += mergedValue;
                                j--;
                            } else {
                                mergedRowColumn.unshift(filteredRowColumn[j]);
                            }
                        }
                    } else {
                        for (let j = 0; j < filteredRowColumn.length; j++) {
                            if (filteredRowColumn[j] === filteredRowColumn[j + 1]) {
                                const mergedValue = filteredRowColumn[j] * 2;
                                mergedRowColumn.push(mergedValue);
                                score += mergedValue;
                                j++;
                            } else {
                                mergedRowColumn.push(filteredRowColumn[j]);
                            }
                        }
                    }

mergedRowColumn = isHorizontal ? [...mergedRowColumn, ...Array(GRID_SIZE - mergedRowColumn.length).fill(0)] :
                        [...Array(GRID_SIZE - mergedRowColumn.length).fill(0), ...mergedRowColumn];
                    if (isHorizontal) {
                        grid[i] = mergedRowColumn;
                    } else {
                        grid = grid.map((row, index) => row.map((_, columnIndex) => mergedRowColumn[columnIndex]).reverse());
                    }
                }
            }

addNewBlock();
        }

// Check for game over condition
        function checkGameStatus() {
            const flatGrid = grid.flat();
            if (!flatGrid.includes(0) && !checkAdjacentValues()) {
                alert("Game Over! Your Score: " + score);
                resetGame();
            }
        }

// Check if there are adjacent values that can be merged
        function checkAdjacentValues() {
            for (let i = 0; i < GRID_SIZE; i++) {
                for (let j = 0; j < GRID_SIZE; j++) {
                    if (i < GRID_SIZE - 1 && grid[i][j] === grid[i + 1][j]) {
                        return true;
                    }
                    if (j < GRID_SIZE - 1 && grid[i][j] === grid[i][j + 1]) {
                        return true;
                    }
                }
            }
            return false;
        }

// Reset the game state
        function resetGame() {
            initGrid();
            score = 0;
            addNewBlock();
            addNewBlock();
            renderGrid();
        }

// Initialize the game
        function startGame() {
            document.addEventListener('keydown', handleKeyPress);
            resetGame();
        }

// Start the game when the page finishes loading
        window.onload = startGame;
    </script>
</body>
</html>
```

Please note that this is a basic implementation and can be further enhanced or customized as per your requirements.