Crea un juego de disparos's game

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

No:27706

←

Prev Next

→

Crea un juego de disparos
Developer User13764｜Date and time 23/12/8 10:17:49
Build time 55.871 sec｜Game capacity 6.058KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Juego de Disparos</title>
<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #000;
    }
    
    #gameCanvas {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #444;
        border: 2px solid #fff;
    }
</style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    
    <script>
        // Variables del juego
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");
        var player = { x: canvas.width/2, y: canvas.height-30, width: 30, height: 30 };
        var bullets = [];
        var enemies = [];
        var score = 0;
        
        // Eventos de teclado para controlar al jugador
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);
        
        var rightPressed = false;
        var leftPressed = false;
        var spacePressed = false;
        
        function keyDownHandler(event) {
            if(event.keyCode === 39) {
                rightPressed = true;
            } else if(event.keyCode === 37) {
                leftPressed = true;
            } else if(event.keyCode === 32) {
                spacePressed = true;
            }
        }
        
        function keyUpHandler(event) {
            if(event.keyCode === 39) {
                rightPressed = false;
            } else if(event.keyCode === 37) {
                leftPressed = false;
            } else if(event.keyCode === 32) {
                spacePressed = false;
            }
        }
        
        // Función para dibujar al jugador en el canvas
        function drawPlayer() {
            ctx.beginPath();
            ctx.rect(player.x, player.y, player.width, player.height);
            ctx.fillStyle = "#fff";
            ctx.fill();
            ctx.closePath();
        }
        
        // Función para actualizar la posición del jugador
        function updatePlayerPosition() {
            if(rightPressed && player.x < canvas.width - player.width) {
                player.x += 5;
            } else if(leftPressed && player.x > 0) {
                player.x -= 5;
            }
        }
        
        // Función para dibujar las balas en el canvas
        function drawBullets() {
            bullets.forEach(function(bullet) {
                ctx.beginPath();
                ctx.arc(bullet.x, bullet.y, 5, 0, Math.PI*2);
                ctx.fillStyle = "#fff";
                ctx.fill();
                ctx.closePath();
            });
        }
        
        // Función para actualizar la posición de las balas
        function updateBulletsPosition() {
            bullets.forEach(function(bullet) {
                bullet.y -= 5;
            });
        }
        
        // Función para dibujar los enemigos en el canvas
        function drawEnemies() {
            enemies.forEach(function(enemy) {
                ctx.beginPath();
                ctx.arc(enemy.x, enemy.y, 15, 0, Math.PI*2);
                ctx.fillStyle = "#ff0000";
                ctx.fill();
                ctx.closePath();
            });
        }
        
        // Función para actualizar la posición de los enemigos
        function updateEnemiesPosition() {
            enemies.forEach(function(enemy) {
                enemy.y += 2;
            });
        }
        
        // Colisiones entre balas y enemigos
        function bulletEnemyCollisions() {
            bullets.forEach(function(bullet) {
                enemies.forEach(function(enemy, enemyIndex) {
                    var dx = bullet.x - enemy.x;
                    var dy = bullet.y - enemy.y;
                    var distance = Math.sqrt(dx*dx + dy*dy);
                    
                    if(distance < 20) {
                        bullets.splice(bullets.indexOf(bullet), 1);
                        enemies.splice(enemyIndex, 1);
                        score += 10;
                    }
                });
            });
        }
        
        // Colisiones entre jugador y enemigos
        function playerEnemyCollisions() {
            enemies.forEach(function(enemy) {
                var dx = player.x - enemy.x;
                var dy = player.y - enemy.y;
                var distance = Math.sqrt(dx*dx + dy*dy);
                
                if(distance < 25) {
                    alert("¡Perdiste! Tu puntaje final fue: " + score);
                    document.location.reload();
                }
            });
        }
        
        // Función para dibujar el puntaje en el canvas
        function drawScore() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#fff";
            ctx.fillText("Puntaje: " + score, 10, 20);
        }
        
        // Función principal de juego
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            drawPlayer();
            updatePlayerPosition();
            
            drawBullets();
            updateBulletsPosition();
            bulletEnemyCollisions();
            
            drawEnemies();
            updateEnemiesPosition();
            playerEnemyCollisions();
            
            drawScore();
            
            requestAnimationFrame(gameLoop);
        }
        
        // Crear enemigos aleatorios cada 2 segundos
        setInterval(function() {
            var enemy = { x: Math.random() * (canvas.width - 30) + 15, y: -20 };
            enemies.push(enemy);
        }, 2000);
        
        // Disparar balas al presionar la barra espaciadora
        setInterval(function() {
            if(spacePressed) {
                var bullet = { x: player.x + player.width/2, y: player.y };
                bullets.push(bullet);
            }
        }, 200);
        
        gameLoop();
    </script>
</body>
</html>