AI game creator

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

No:44058

←

Prev Next

→

Fútbol tenis
Developer User19310｜Date and time 24/2/17 3:36:20
Build time 13.815 sec｜Game capacity 4.141KB｜

Script

Puntaje: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>Fútbol Tenis</title>
<style>
    body {
        font-family: Arial, sans-serif;
    }

canvas {
        border: 1px solid black;
    }

#score {
        font-size: 20px;
        text-align: center;
        margin-top: 20px;
    }
</style>
</head>
<body>
    <canvas id="game" width="400" height="300"></canvas>
    <p id="score">Puntaje: 0</p>

// Obtener el lienzo del juego
        var canvas = document.getElementById("game");
        var context = canvas.getContext("2d");

// Definir las dimensiones y posición inicial de los jugadores
        var playerWidth = 80;
        var playerHeight = 10;
        var playerX = canvas.width / 2 - playerWidth / 2;
        var playerY = canvas.height - playerHeight - 10;
        var playerSpeed = 10;

// Definir las dimensiones y posición inicial de la pelota
        var ballRadius = 10;
        var ballX = canvas.width / 2;
        var ballY = canvas.height / 2;
        var ballDX = 2;
        var ballDY = -2;

// Definir la puntuación del jugador
        var score = 0;

// Función para dibujar los jugadores y la pelota en el lienzo del juego
        function draw() {
            // Limpiar el lienzo
            context.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar el jugador
            context.beginPath();
            context.rect(playerX, playerY, playerWidth, playerHeight);
            context.fillStyle = "black";
            context.fill();
            context.closePath();

// Dibujar la pelota
            context.beginPath();
            context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            context.fillStyle = "black";
            context.fill();
            context.closePath();

// Mostrar la puntuación del jugador
            document.getElementById("score").innerHTML = "Puntaje: " + score;
        }

// Función para mover al jugador hacia la izquierda
        function moveLeft() {
            playerX -= playerSpeed;
            
            // Restringir el movimiento del jugador en el lienzo
            if (playerX < 0) {
                playerX = 0;
            }
        }

// Función para mover al jugador hacia la derecha
        function moveRight() {
            playerX += playerSpeed;
            
            // Restringir el movimiento del jugador en el lienzo
            if (playerX + playerWidth > canvas.width) {
                playerX = canvas.width - playerWidth;
            }
        }

// Función para actualizar el juego en cada fotograma
        function update() {
            // Mover al jugador si se presiona alguna tecla
            document.addEventListener("keydown", function(event) {
                if (event.code === "ArrowLeft") {
                    moveLeft();
                } else if (event.code === "ArrowRight") {
                    moveRight();
                }
            });

// Mover la pelota
            ballX += ballDX;
            ballY += ballDY;

// Rebote de la pelota en los bordes del lienzo
            if (ballX - ballRadius < 0 || ballX + ballRadius > canvas.width) {
                ballDX = -ballDX;
            }
            if (ballY - ballRadius < 0 || ballY + ballRadius > canvas.height) {
                ballDY = -ballDY;
            }

// Rebote de la pelota en el jugador
            if (
                ballY + ballRadius > playerY && 
                ballX > playerX && 
                ballX < playerX + playerWidth
            ) {
                ballDY = -ballDY;
                score++; // Incrementar la puntuación del jugador
            }

// Dibujar los elementos del juego
            draw();

// Repetir la actualización del juego en el siguiente fotograma
            requestAnimationFrame(update);
        }

// Iniciar el juego
        update();
    </script>
</body>
</html>