AI game creator

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

No:37992

175

←

Prev Next

→

Merge jewel games
Developer User17050｜Date and time 24/1/22 4:02:30
Build time 20.287 sec｜Game capacity 6.378KB｜

Script

Sure! Here's an example of a game called "Merge Jewel" implemented as a single HTML file using JavaScript. The game is designed for smartphone operation and uses pictograms to represent different jewels.

In this game, you'll see a 4x4 grid of jewel pictograms (diamond, emerald, ruby, sapphire) on your smartphone screen. You can merge two adjacent jewels of the same type by tapping on them. When merging two jewels, the score will increase by one, and the merged jewels will disappear. The objective is to get the highest score possible by strategically merging the jewels on the grid.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Merge Jewel</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f1f1f1;
        }
        
        #game-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
        #score {
            font-size: 24px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <canvas id="game-canvas"></canvas>
    </div>
    
    <script>
        // Initialize game variables
        const canvas = document.getElementById("game-canvas");
        const ctx = canvas.getContext("2d");
        const tileSize = 80;
        const numRows = 4;
        const numCols = 4;
        const jewels = ["diamond", "emerald", "ruby", "sapphire"];
        const jewelImages = {};
        const mergeImages = {};
        let score = 0;
        let grid = [
            [null, null, null, null],
            [null, null, null, null],
            [null, null, null, null],
            [null, null, null, null]
        ];
        
        // Load jewel and merge images
        for (let jewel of jewels) {
            jewelImages[jewel] = new Image();
            jewelImages[jewel].src = `images/${jewel}.png`;
            mergeImages[jewel] = new Image();
            mergeImages[jewel].src = `images/merge_${jewel}.png`;
        }
        
        // Set canvas size based on tile size and number of rows/columns
        canvas.width = tileSize * numCols;
        canvas.height = tileSize * numRows;
        
        // Add event listener for touch start
        canvas.addEventListener("touchstart", handleTouchStart, false);
        
        // Main game loop
        function gameLoop() {
            clearCanvas();
            drawGrid();
            drawScore();
            requestAnimationFrame(gameLoop);
        }
        
        // Clear the canvas
        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
        
        // Draw the grid
        function drawGrid() {
            for (let row = 0; row < numRows; row++) {
                for (let col = 0; col < numCols; col++) {
                    const jewel = grid[row][col];
                    if (jewel) {
                        const x = col * tileSize;
                        const y = row * tileSize;
                        ctx.drawImage(jewelImages[jewel], x, y, tileSize, tileSize);
                    }
                }
            }
        }
        
        // Draw the current score
        function drawScore() {
            ctx.fillStyle = "#000";
            ctx.font = "24px Arial";
            ctx.fillText(`Score: ${score}`, 10, tileSize * numRows + 30);
        }
        
        // Handle touch start event
        function handleTouchStart(event) {
            const touchX = event.touches[0].clientX;
            const touchY = event.touches[0].clientY;
            
            const canvasRect = canvas.getBoundingClientRect();
            const canvasX = touchX - canvasRect.left;
            const canvasY = touchY - canvasRect.top;
            
            const col = Math.floor(canvasX / tileSize);
            const row = Math.floor(canvasY / tileSize);
            
            if (grid[row][col] && canMerge(row, col)) {
                merge(row, col);
            }
        }
        
        // Check if a merge is possible at the specified row and column
        function canMerge(row, col) {
            const jewel = grid[row][col];
            
            if (row > 0 && grid[row - 1][col] === jewel) {
                return true;
            }
            
            if (row < numRows - 1 && grid[row + 1][col] === jewel) {
                return true;
            }
            
            if (col > 0 && grid[row][col - 1] === jewel) {
                return true;
            }
            
            if (col < numCols - 1 && grid[row][col + 1] === jewel) {
                return true;
            }
            
            return false;
        }
        
        // Merge jewels at the specified row and column
        function merge(row, col) {
            const jewel = grid[row][col];
            
            if (row > 0 && grid[row - 1][col] === jewel) {
                grid[row - 1][col] = null;
                score++;
            }
            
            if (row < numRows - 1 && grid[row + 1][col] === jewel) {
                grid[row + 1][col] = null;
                score++;
            }
            
            if (col > 0 && grid[row][col - 1] === jewel) {
                grid[row][col - 1] = null;
                score++;
            }
            
            if (col < numCols - 1 && grid[row][col + 1] === jewel) {
                grid[row][col + 1] = null;
                score++;
            }
            
            grid[row][col] = null;
        }
        
        // Initialize a random grid with jewels
        function initializeGrid() {
            for (let row = 0; row < numRows; row++) {
                for (let col = 0; col < numCols; col++) {
                    const randomJewel = jewels[Math.floor(Math.random() * jewels.length)];
                    grid[row][col] = randomJewel;
                }
            }
        }
        
        // Start the game
        initializeGrid();
        gameLoop();
    </script>
</body>
</html>
```