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

No:31161

A game that if you touch the ball you win but the ..ALL
Developer User15039｜Date and time 23/12/25 11:16:34
Build time 29.028 sec｜Game capacity 3.739KB｜

Script

Juego de Toque de la Muerte

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Juego de Toque de la Muerte</title>
</head>
<body style="text-align: center;">
    <h1>Juego de Toque de la Muerte</h1>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script>
        // Variables globales
        var canvas;
        var canvasContext;
        var ballX = 200; // Posición inicial en X del balón
        var ballY = 300; // Posición inicial en Y del balón
        var ballSpeedY = 5; // Velocidad inicial del balón en Y
        var gameStatus = "playing"; // Estado del juego: 'playing' o 'won'

// Evento de inicio del juego
        window.onload = function() {
            canvas = document.getElementById("gameCanvas");
            canvasContext = canvas.getContext('2d');

// Configuración del evento de toque o clic
            canvas.addEventListener("touchstart", touchOrClick);
            canvas.addEventListener("mousedown", touchOrClick);

// Iniciar el bucle del juego
            setInterval(moveEverything, 30);
        }

// Esta función maneja el evento de toque o clic
        function touchOrClick(event) {
            if (gameStatus === "playing") {
                var x = event.clientX - canvas.offsetLeft;
                var y = event.clientY - canvas.offsetTop;
                
                // Si el balón es tocado, se gana el juego
                if (x > ballX && x < ballX + 50 && y > ballY && y < ballY + 50) {
                    gameStatus = "won";
                }
            } else {
                // Reiniciar el juego si se toca o hace clic después de ganar
                gameStatus = "playing";
                ballX = 200;
                ballY = 300;
            }
        }

// Esta función se llama en cada iteración del bucle del juego
        function moveEverything() {
            // Mover el balón
            ballY += ballSpeedY * 5; // Hacer que el balón se mueva 5 veces más rápido en Y

// Verificar si se ha ganado el juego
            if (ballY > canvas.height) {
                gameStatus = "won";
            }

// Llamar a la función de dibujo del juego
            drawEverything();
        }

// Esta función dibuja todos los elementos del juego en el lienzo
        function drawEverything() {
            // Dibujar el fondo
            colorRect(0, 0, canvas.width, canvas.height, "black");

// Dibujar el balón
            if (gameStatus === "playing") {
                colorCircle(ballX, ballY, 25, "white"); // Dibujar un círculo blanco
                canvasContext.font = "30px Arial";
                canvasContext.fillStyle = "white";
                canvasContext.fillText("Toca la bola", 120, 100);
            } else {
                canvasContext.font = "30px Arial";
                canvasContext.fillStyle = "white";
                canvasContext.fillText("¡Has Ganado!", 110, 100);
                canvasContext.font = "20px Arial";
                canvasContext.fillText("Haz clic o toca para jugar de nuevo", 65, 150);
            }
        }

// Esta función dibuja un rectángulo relleno en el lienzo
        function colorRect(leftX, topY, width, height, color) {
            canvasContext.fillStyle = color;
            canvasContext.fillRect(leftX, topY, width, height);
        }

// Esta función dibuja un círculo relleno en el lienzo
        function colorCircle(centerX, centerY, radius, color) {
            canvasContext.fillStyle = color;
            canvasContext.beginPath();
            canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
            canvasContext.fill();
        }
    </script>
</body>
</html>