AI game creator

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

No:42461

←

Prev Next

→

Temple run
Developer User18825｜Date and time 24/2/11 19:55:09
Build time 8.949 sec｜Game capacity 3.354KB｜

Script

Sure! Here is a simple implementation of a Temple Run game using JavaScript within a single HTML file. Please note that this is a simplified version and doesn't include all the features and complexity of the original game. The game is designed for smartphone operation and uses pictograms.

To use the code, please make sure to replace `"emozi_all/player.png"` and `"emozi_apple.png"` with the actual paths to your pictograms representing the player and obstacles, respectively.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Temple Run</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // Initialize the game canvas and context
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        
        // Pictograms
        const playerImg = new Image();
        playerImg.src = "player.png";
        
        const obstacleImg = new Image();
        obstacleImg.src = "obstacle.png";
        
        // Game variables
        let playerX = 200;
        let playerY = 350;
        let playerSpeed = 5;
        
        let obstacleX = 400;
        let obstacleY = 350;
        let obstacleSpeed = 8;
        
        // Function to draw the game
        function drawGame() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw player
            ctx.drawImage(playerImg, playerX, playerY);
            
            // Draw obstacle
            ctx.drawImage(obstacleImg, obstacleX, obstacleY);
            
            // Update player position
            playerX += playerSpeed;
            
            // Update obstacle position
            obstacleX -= obstacleSpeed;
            
            // Check for collision
            if (playerX < obstacleX + obstacleImg.width &&
                playerX + playerImg.width > obstacleX &&
                playerY < obstacleY + obstacleImg.height &&
                playerY + playerImg.height > obstacleY) {
                // Game over
                alert("Game Over!");
                resetGame();
            }
            
            // Request animation frame
            requestAnimationFrame(drawGame);
        }
        
        // Function to reset the game
        function resetGame() {
            playerX = 200;
            obstacleX = 400;
        }
        
        // Function to handle touch events
        function handleTouch(e) {
            // Determine touch position
            const touchX = e.touches[0].clientX;
            const touchY = e.touches[0].clientY;
            
            // Move player based on touch position
            if (touchX < canvas.width / 2) {
                playerY -= playerSpeed;
            } else {
                playerY += playerSpeed;
            }
            
            // Prevent default touch event behavior
            e.preventDefault();
        }
        
        // Start the game when the page loads
        window.onload = function() {
            // Bind touch event handler
            canvas.addEventListener("touchstart", handleTouch, false);
            
            // Start the game loop
            drawGame();
        };
    </script>
</body>
</html>
```

To use the code, please make sure to replace `"player.png"` and `"obstacle.png"` with the actual paths to your pictograms representing the player and obstacles, respectively.