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

No:16070

←

Prev Next

→

Merge Game
Developer User7113｜Date and time 23/9/15 22:16:31
Build time 53.962 sec｜Game capacity 7.117KB｜

Script

Merge Game - الدمج

المجموع: 0

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Merge Game</title>
    <style>
        body {
            background-color: lightblue;
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        #score {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        
        #game-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .tile {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            margin: 5px;
            font-size: 32px;
            font-weight: bold;
            background-color: lightgray;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        
        #game-over {
            font-size: 32px;
            font-weight: bold;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <h1>Merge Game - الدمج</h1>
    <div id="score">المجموع: 0</div>
    <div id="game-container"></div>
    <div id="game-over"></div>

var gameContainer = document.getElementById("game-container");
        var scoreElement = document.getElementById("score");
        var gameOverElement = document.getElementById("game-over");

var score = 0;
        var gameOver = false;

// Creating initial game tiles
        var tiles = [];
        for (var i = 0; i < 16; i++) {
            var tile = createNewTile();
            tiles.push(tile);
            gameContainer.appendChild(tile);
        }

// Handle swipe gestures on smartphone
        var initialX;
        var initialY;

document.addEventListener("touchstart", function(event) {
            initialX = event.touches[0].clientX;
            initialY = event.touches[0].clientY;
        });

document.addEventListener("touchmove", function(event) {
            event.preventDefault();
        });

document.addEventListener("touchend", function(event) {
            var finalX = event.changedTouches[0].clientX;
            var finalY = event.changedTouches[0].clientY;

var deltaX = finalX - initialX;
            var deltaY = finalY - initialY;

if (Math.abs(deltaX) > Math.abs(deltaY)) {
                // Horizontal swipe
                if (deltaX > 0) {
                    moveTiles("right");
                } else {
                    moveTiles("left");
                }
            } else {
                // Vertical swipe
                if (deltaY > 0) {
                    moveTiles("down");
                } else {
                    moveTiles("up");
                }
            }
        });

// Function to create a new tile
        function createNewTile() {
            var tile = document.createElement("div");
            tile.className = "tile";
            tile.innerText = pictograms[Math.floor(Math.random() * pictograms.length)];
            return tile;
        }

// Function to merge tiles with the same pictogram
        function mergeTiles(tile1, tile2) {
            var pictogram1 = tile1.innerText;
            var pictogram2 = tile2.innerText;

if (pictogram1 === pictogram2) {
                var mergedPictogram = pictogram1 + pictogram2;
                tile1.innerText = mergedPictogram;
                tile2.innerText = "";

score += 2 * mergedPictogram.length;
                scoreElement.innerText = "المجموع: " + score;

if (score === 2048) {
                    gameOver = true;
                    gameOverElement.innerText = "تهانينا! لقد فزت باللعبة.";
                }
            }
        }

// Function to move tiles based on swipe direction
        function moveTiles(direction) {
            if (gameOver) return;

var tileMoved = false;

for (var i = 0; i < tiles.length; i++) {
                var tile = tiles[i];

if (tile.innerText === "") continue;

var currentPosition = i;
                var nextPosition = -1;

while (nextPosition === -1) {
                    switch (direction) {
                        case "up":
                            if (currentPosition >= 4) {
                                nextPosition = currentPosition - 4;
                            } else {
                                nextPosition = -1;
                            }
                            break;
                        case "down":
                            if (currentPosition < 12) {
                                nextPosition = currentPosition + 4;
                            } else {
                                nextPosition = -1;
                            }
                            break;
                        case "left":
                            if (currentPosition % 4 !== 0) {
                                nextPosition = currentPosition - 1;
                            } else {
                                nextPosition = -1;
                            }
                            break;
                        case "right":
                            if (currentPosition % 4 !== 3) {
                                nextPosition = currentPosition + 1;
                            } else {
                                nextPosition = -1;
                            }
                            break;
                        default:
                            break;
                    }

if (nextPosition !== -1) {
                        var nextTile = tiles[nextPosition];

if (nextTile.innerText === "") {
                            nextTile.innerText = tile.innerText;
                            tile.innerText = "";
                            tileMoved = true;
                        } else {
                            mergeTiles(tile, nextTile);
                            nextPosition = -1;
                            tileMoved = true;
                        }
                    }
                }
            }

if (tileMoved) {
                var emptyTiles = tiles.filter(function(tile) {
                    return tile.innerText === "";
                });

if (emptyTiles.length > 0) {
                    var randomEmptyTile = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];
                    randomEmptyTile.innerText = pictograms[Math.floor(Math.random() * pictograms.length)];
                } else {
                    gameOver = true;
                    gameOverElement.innerText = "لقد خسرت! جرب مرة أخرى.";
                }
            }
        }
    </script>
</body>

</html>