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

No:42725

114

←

Prev Next

→

Merge Game
Developer User18878｜Date and time 24/2/12 21:34:45
Build time 14.633 sec｜Game capacity 5.086KB｜

Script

Sure! Here's an example of a simple merge game implemented as a single HTML file, using JavaScript and pictograms for a smartphone operation.

Merge Game

In this game, you can swipe in four directions (up, down, left, and right) by using touch input on your smartphone. The goal is to merge tiles with the same number by swiping them towards each other. The merged tiles will form a new tile with a higher number represented by pictograms.

←

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 merge game implemented as a single HTML file, using JavaScript and pictograms for a smartphone operation.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Merge Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #game-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .tile {
            width: 80px;
            height: 80px;
            margin: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            background-color: #ddd;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>Merge Game</h1>

// Generate initial tiles
        function generateInitialTiles() {
            for (let i = 0; i < 5; i++) {
                const tile = createTile();
                grid.push(tile);
                renderTile(tile);
            }
        }

// Merge tiles with same number
        function mergeTiles() {
            const newGrid = [];
            let i = 0;
            
            while (i < grid.length) {
                if (grid[i] === grid[i+1]) {
                    const newTile = createTile(grid[i] + 1);
                    newGrid.push(newTile);
                    i += 2;
                } else {
                    newGrid.push(grid[i]);
                    i++;
                }
            }
            grid = newGrid;
        }

// Create a new tile
        function createTile(value = 1) {
            return { value };
        }

// Render a tile on the game board
        function renderTile(tile) {
            const gameContainer = document.getElementById('game-container');
            const tileElement = document.createElement('div');
            tileElement.className = 'tile';
            tileElement.innerText = getPictogram(tile.value);
            gameContainer.appendChild(tileElement);
        }

// Clear the game board
        function clearBoard() {
            const gameContainer = document.getElementById('game-container');
            gameContainer.innerHTML = '';
        }

// Get the corresponding pictogram for the tile value
        function getPictogram(value) {
            // You can set your desired pictogram representation here
            switch (value) {
                case 1:
                    return '⭐';
                case 2:
                    return '✨';
                case 3:
                    return '⚡';
                case 4:
                    return '💥';
                case 5:
                    return '🌟';
                case 6:
                    return '✴️';
                case 7:
                    return '🌠';
                default:
                    return '';
            }
        }

// Handle swipe events
        function handleSwipe(direction) {
            clearBoard();
            mergeTiles();
            generateInitialTiles();
        }

// Event listeners for touch events
        window.addEventListener('touchstart', handleTouchStart, false);
        window.addEventListener('touchmove', handleTouchMove, false);

// Variables to track touch start position
        let xDown = null;
        let yDown = null;

// Handle touch start event
        function handleTouchStart(event) {
            xDown = event.touches[0].clientX;
            yDown = event.touches[0].clientY;
        }

// Handle touch move event
        function handleTouchMove(event) {
            if (!xDown || !yDown) {
                return;
            }

const xUp = event.touches[0].clientX;
            const yUp = event.touches[0].clientY;

const xDiff = xDown - xUp;
            const yDiff = yDown - yUp;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
                // Horizontal swipe
                if (xDiff > 0) {
                    handleSwipe('left');
                } else {
                    handleSwipe('right');
                }
            } else {
                // Vertical swipe
                if (yDiff > 0) {
                    handleSwipe('up');
                } else {
                    handleSwipe('down');
                }
            }

xDown = null;
            yDown = null;
        }

// Start the game
        function startGame() {
            generateInitialTiles();
        }

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