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

No:38220

Two same triangles, one jumps to the other, and ma..ALL
Developer User17283｜Date and time 24/1/23 14:02:31
Build time 9.968 sec｜Game capacity 3KB｜

Script

Sure! Here's a simple game implemented in a single HTML file using JavaScript. The aim of the game is to match two identical triangles perfectly by moving one onto the other. It is optimized for smartphone operation and uses pictograms.

Triangle Matching Game

To play the game, save the code above into a `.html` file, and you can open it in a web browser to start the game. The game consists of two triangles represented by images. By tapping/clicking on the second triangle, it will animate and move horizontally to match the position of the first triangle. If the match is perfect, the second triangle will turn green, otherwise it will turn red.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Triangle Matching Game</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            text-align: center; 
            margin-top: 100px; 
            background-color: #f8f8f8; 
        }
        #game-container { 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 200px; 
            width: 200px; 
            margin: 0 auto; 
            background-color: #fff; 
            border: 2px solid #ccc; 
        }
        img { 
            width: 80px; 
            height: 80px; 
            cursor: pointer; 
        }
    </style>
</head>
<body>
    <h1>Triangle Matching Game</h1>
    <div id="game-container">
        <img src="triangle.png" id="triangle1">
        <img src="triangle.png" id="triangle2">
    </div>
    
    <script>
        // Click event listener for triangles
        document.getElementById('triangle2').addEventListener('click', moveTriangle);
        
        // Function to move the triangle
        function moveTriangle() {
            var triangle1 = document.getElementById('triangle1');
            var triangle2 = document.getElementById('triangle2');
            
            // Calculate the position of the second triangle relative to the game container
            var rect = document.getElementById('game-container').getBoundingClientRect();
            var containerLeft = rect.left;
            
            // Animate the movement of the second triangle to match the position of the first triangle
            triangle2.style.transition = 'all 0.5s';
            triangle2.style.transform = 'translateX(' + (triangle1.offsetLeft - containerLeft) + 'px)';
            
            // Check if both triangles are perfectly matched
            if (triangle2.offsetLeft === triangle1.offsetLeft) {
                triangle2.style.background = 'green';
                triangle2.style.border = '2px solid green';
            } else {
                triangle2.style.background = 'red';
                triangle2.style.border = '2px solid red';
            }
            
            // Remove the click event listener to prevent further movement
            triangle2.removeEventListener('click', moveTriangle);
        }
    </script>
</body>
</html>
```