control que dispara con un botón y se mueve con un control de flechas arriba abajo isquierda derecha con ostaculos que con el disparo se ronpen's game

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

No:22899

←

Prev Next

→

control que dispara con un botón y se mueve con un..ALL
Developer User10585｜Date and time 23/10/26 12:58:22
Build time 105.342 sec｜Game capacity 5.834KB｜

Script

Aquí tienes un ejemplo de cómo podría ser el código HTML con JavaScript para crear un juego simple en el que controlas un personaje que dispara y se mueve con obstáculos que son destruidos por los disparos:

Este código crea un lienzo de juego (`canvas`) en el que mueves un personaje cuadrado con las teclas de flechas. Puedes disparar balas presionando un botón de disparo. Las balas se mueven hacia la derecha y, si colisionan con uno de los obstáculos, tanto la bala como el obstáculo se eliminan del juego. Puedes ejecutar el código en tu navegador o en un editor de HTML/JavaScript para jugar el juego.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Juego de disparos</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>

// Definir el jugador
        var player = {
            x: 200,
            y: 200,
            width: 20,
            height: 20
        };

// Definir las teclas de flechas
        var arrows = {
            up: false,
            down: false,
            left: false,
            right: false
        };

// Definir las balas del jugador
        var bullets = [];

// Definir los obstáculos
        var obstacles = [
            { x: 100, y: 100, width: 50, height: 50 },
            { x: 300, y: 200, width: 30, height: 30 }
        ];

// Función para dibujar el jugador en el canvas
        function drawPlayer() {
            ctx.fillStyle = "#000000";
            ctx.fillRect(player.x, player.y, player.width, player.height);
        }

// Función para dibujar las balas en el canvas
        function drawBullets() {
            ctx.fillStyle = "#FF0000";

for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];
                ctx.fillRect(bullet.x, bullet.y, 5, 5);
            }
        }

// Función para dibujar los obstáculos en el canvas
        function drawObstacles() {
            ctx.fillStyle = "#00FF00";

for (var i = 0; i < obstacles.length; i++) {
                var obstacle = obstacles[i];
                ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
            }
        }

// Función para verificar si hay colisiones entre dos objetos rectangulares
        function checkCollision(obj1, obj2) {
            if (obj1.x < obj2.x + obj2.width &&
                obj1.x + obj1.width > obj2.x &&
                obj1.y < obj2.y + obj2.height &&
                obj1.y + obj1.height > obj2.y) {
                return true;
            }

return false;
        }

// Función para actualizar la posición del jugador en función de las teclas de flechas presionadas
        function updatePlayerPosition() {
            if (arrows.up && player.y > 0) {
                player.y -= 5;
            }

if (arrows.down && player.y < canvas.height - player.height) {
                player.y += 5;
            }

if (arrows.left && player.x > 0) {
                player.x -= 5;
            }

if (arrows.right && player.x < canvas.width - player.width) {
                player.x += 5;
            }
        }

// Función para actualizar la posición de las balas y verificar si colisionan con los obstáculos
        function updateBullets() {
            for (var i = 0; i < bullets.length; i++) {
                var bullet = bullets[i];
                bullet.x += 3;

for (var j = 0; j < obstacles.length; j++) {
                    var obstacle = obstacles[j];

if (checkCollision(bullet, obstacle)) {
                        bullets.splice(i, 1);
                        obstacles.splice(j, 1);
                        break;
                    }
                }

if (bullet.x > canvas.width) {
                    bullets.splice(i, 1);
                    break;
                }
            }
        }

// Función principal de actualización y dibujado
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

updatePlayerPosition();
            drawPlayer();

updateBullets();
            drawBullets();

drawObstacles();

requestAnimationFrame(update);
        }

// Eventos de teclado para mover el jugador
        window.addEventListener("keydown", function (event) {
            if (event.key === "ArrowUp") {
                arrows.up = true;
            } else if (event.key === "ArrowDown") {
                arrows.down = true;
            } else if (event.key === "ArrowLeft") {
                arrows.left = true;
            } else if (event.key === "ArrowRight") {
                arrows.right = true;
            }
        });

// Botón para disparar
        var shootButton = document.createElement("button");
        shootButton.innerText = "Disparar";
        document.body.appendChild(shootButton);

shootButton.addEventListener("click", function () {
            bullets.push({ x: player.x + player.width, y: player.y + player.height / 2 });
        });

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

Puedes ejecutar el código en tu navegador o en un editor de HTML/JavaScript para jugar el juego.