El juego de the binding of con RTX's game

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

No:16275

106

←

Prev Next

→

El juego de the binding of con RTX
Developer User7200｜Date and time 23/9/16 22:01:11
Build time 28.443 sec｜Game capacity 3.399KB｜

Script

GAME OVER

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>The Binding of RTX</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
            background-color: #000;
        }
        #game-over {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: 'Arial', sans-serif;
            font-size: 50px;
            color: red;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <div id="game-over">GAME OVER</div>
</body>
<script>
    // Initialization
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
    const gameOverDiv = document.getElementById("game-over");
    
    let gameOver = false;
    let score = 0;
    
    // Player Object
    const player = {
        x: 400,
        y: 300,
        speed: 5,
        sprite: "👾",
        draw: function() {
            ctx.font = "40px Arial";
            ctx.fillStyle = "white";
            ctx.fillText(this.sprite, this.x, this.y);
        },
        move: function(directionX, directionY) {
            this.x += directionX * this.speed;
            this.y += directionY * this.speed;
        }
    };
    
    // Game Loop
    function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        if (!gameOver) {
            player.draw();
        } else {
            displayGameOver();
        }
        
        requestAnimationFrame(gameLoop);
    }
    
    // Game Over logic
    function displayGameOver() {
        gameOverDiv.style.display = "block";
        gameOverDiv.innerHTML = "GAME OVER<br/>Score: " + score;
    }
    
    // Event Listeners for Player Movement
    
    // Keyboard Controls
    document.addEventListener("keydown", function(event) {
        switch(event.keyCode) {
            case 37: // left arrow
                if (!gameOver) {
                    player.move(-1, 0);
                }
                break;
            case 38: // up arrow
                if (!gameOver) {
                    player.move(0, -1);
                }
                break;
            case 39: // right arrow
                if (!gameOver) {
                    player.move(1, 0);
                }
                break;
            case 40: // down arrow
                if (!gameOver) {
                    player.move(0, 1);
                }
                break;
        }
    });
    
    // Touch Controls (for phones)
    document.addEventListener("touchstart", function(event) {
        event.preventDefault();
        
        const touchX = event.changedTouches[0].clientX;
        const touchY = event.changedTouches[0].clientY;
        
        const canvasBounds = canvas.getBoundingClientRect();
        const canvasX = touchX - canvasBounds.left;
        const canvasY = touchY - canvasBounds.top;
        
        // Determine movement direction based on touch position
        const directionX = canvasX > player.x ? 1 : -1;
        const directionY = canvasY > player.y ? 1 : -1;
        
        if (!gameOver) {
            player.move(directionX, directionY);
        }
    });
    
    // Start the game loop
    gameLoop();
</script>
</html>