AI game creator

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

No:23637

←

Prev Next

→

Un juego de oleadas
Developer User11063｜Date and time 23/11/2 8:52:16
Build time 117.112 sec｜Game capacity 6.738KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Juego de Oleadas</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>

// Pictogramas
        var playerImage, enemyImage, bulletImage;

// Escucha de eventos táctiles
        var touchLeft, touchRight;

// Inicializar el juego
        function initializeGame() {
            // Obtener el canvas y su contexto
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");

// Cargar imágenes de pictogramas
            playerImage = new Image();
            playerImage.src = "player.png";

enemyImage = new Image();
            enemyImage.src = "enemy.png";

bulletImage = new Image();
            bulletImage.src = "bullet.png";

// Inicializar variables del juego
            player = {
                x: canvas.width / 2,
                y: canvas.height - 50,
                width: 50,
                height: 50,
                speed: 5
            };

enemies = [];
            bullets = [];

score = 0;

// Añadir escucha de eventos táctiles
            touchLeft = false;
            touchRight = false;

document.addEventListener("touchstart", handleTouchStart, false);
            document.addEventListener("touchend", handleTouchEnd, false);

// Iniciar bucle del juego
            gameInterval = setInterval(updateGame, 20);
        }

// Actualizar el juego en cada iteración
        function updateGame() {
            clearCanvas();
            movePlayer();
            moveEnemies();
            moveBullets();
            checkCollisions();
            drawPlayer();
            drawEnemies();
            drawBullets();
            displayScore();
        }

// Limpiar el canvas
        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

// Mover al jugador según los eventos táctiles
        function movePlayer() {
            if (touchLeft && player.x > 0) {
                player.x -= player.speed;
            }
            if (touchRight && player.x < canvas.width - player.width) {
                player.x += player.speed;
            }
        }

// Generar enemigos en oleadas
        function moveEnemies() {
            if (enemies.length === 0) {
                var numEnemies = Math.floor(Math.random() * 3) + 1; // Entre 1 y 3 enemigos en cada oleada
                for (var i = 0; i < numEnemies; i++) {
                    enemies.push({
                        x: Math.random() * (canvas.width - 50), // Posición X aleatoria dentro del canvas
                        y: Math.random() * 100, // Posición Y inicial en la parte superior del canvas
                        width: 50,
                        height: 50,
                        speed: Math.random() * 3 + 1 // Velocidad aleatoria entre 1 y 4
                    });
                }
            }

// Mover enemigos hacia abajo
            for (var i = 0; i < enemies.length; i++) {
                var enemy = enemies[i];
                enemy.y += enemy.speed;

// Si un enemigo sale del canvas, eliminarlo del array de enemigos
                if (enemy.y > canvas.height) {
                    enemies.splice(i, 1);
                    i--;
                }
            }
        }

// Mover balas hacia arriba y eliminarlas si salen del canvas
        function moveBullets() {
            for (var i = 0; i < bullets.length; i++) {
                bullets[i].y -= 5;

if (bullets[i].y < 0) {
                    bullets.splice(i, 1);
                    i--;
                }
            }
        }

// Comprobar colisiones entre balas y enemigos
        function checkCollisions() {
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];

for (var j = 0; j < enemies.length; j++) {
                    var enemy = enemies[j];

if (
                        bullet.x < enemy.x + enemy.width &&
                        bullet.x + bullet.width > enemy.x &&
                        bullet.y < enemy.y + enemy.height &&
                        bullet.y + bullet.height > enemy.y
                    ) {
                        bullets.splice(i, 1);
                        i--;

enemies.splice(j, 1);
                        j--;

score += 10;
                    }
                }
            }
        }

// Dibujar al jugador en el canvas
        function drawPlayer() {
            ctx.drawImage(playerImage, player.x, player.y, player.width, player.height);
        }

// Dibujar enemigos en el canvas
        function drawEnemies() {
            for (var i = 0; i < enemies.length; i++) {
                var enemy = enemies[i];
                ctx.drawImage(enemyImage, enemy.x, enemy.y, enemy.width, enemy.height);
            }
        }

// Dibujar balas en el canvas
        function drawBullets() {
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];
                ctx.drawImage(bulletImage, bullet.x, bullet.y, bullet.width, bullet.height);
            }
        }

// Mostrar puntuación en el canvas
        function displayScore() {
            ctx.font = "24px Arial";
            ctx.fillStyle = "white";
            ctx.fillText("Puntuación: " + score, 10, 30);
        }

// Manejar eventos táctiles al tocar la pantalla
        function handleTouchStart(e) {
            e.preventDefault();
            
            // Obtener las coordenadas del toque
            var touchX = e.touches[0].clientX;
            var canvasCenterX = canvas.offsetLeft + canvas.width / 2;

// Establecer las variables de dirección correspondientes
            if (touchX < canvasCenterX) {
                touchLeft = true;
                touchRight = false;
            } else {
                touchLeft = false;
                touchRight = true;
            }
        }

// Manejar eventos táctiles al levantar el dedo de la pantalla
        function handleTouchEnd() {
            touchLeft = false;
            touchRight = false;
        }

// Iniciar el juego cuando se cargue la página
        window.onload = function() {
            initializeGame();
        };
    </script>
</body>
</html>