Cuadrado con un control que dispara y se mueve arriba abajo isquierda derecha con el controlador's game

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

No:22898

←

Prev Next

→

Cuadrado con un control que dispara y se mueve arr..ALL
Developer User10585｜Date and time 23/10/26 12:50:05
Build time 52.259 sec｜Game capacity 3.61KB｜

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 del Cuadrado</title>
    <style>
        #cuadrado {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const cuadrado = document.getElementById('cuadrado');
            const velocidadMovimiento = 10;
        
            // Movimiento del cuadrado
            const moverCuadrado = (direccion) => {
                const cuadradoPosicionActual = cuadrado.getBoundingClientRect();
                switch (direccion) {
                    case 'arriba':
                        if (cuadradoPosicionActual.top > 0) {
                            cuadrado.style.top = `${cuadradoPosicionActual.top - velocidadMovimiento}px`;
                        }
                        break;
                    case 'abajo':
                        if (cuadradoPosicionActual.bottom < window.innerHeight) {
                            cuadrado.style.top = `${cuadradoPosicionActual.top + velocidadMovimiento}px`;
                        }
                        break;
                    case 'izquierda':
                        if (cuadradoPosicionActual.left > 0) {
                            cuadrado.style.left = `${cuadradoPosicionActual.left - velocidadMovimiento}px`;
                        }
                        break;
                    case 'derecha':
                        if (cuadradoPosicionActual.right < window.innerWidth) {
                            cuadrado.style.left = `${cuadradoPosicionActual.left + velocidadMovimiento}px`;
                        }
                        break;
                }
            }
        
            // Disparar desde el cuadrado
            const disparar = () => {
                const laser = document.createElement('div');
                laser.classList.add('laser');
                const cuadradoPosicionActual = cuadrado.getBoundingClientRect();
                laser.style.top = `${cuadradoPosicionActual.top + 20}px`;
                laser.style.left = `${cuadradoPosicionActual.left + 20}px`;
                document.body.appendChild(laser);
        
                const moverLaser = setInterval(() => {
                    const laserPosicionActual = laser.getBoundingClientRect();
                    laser.style.left = `${laserPosicionActual.left + 10}px`;
        
                    if (laserPosicionActual.left > window.innerWidth) {
                        clearInterval(moverLaser);
                        document.body.removeChild(laser);
                    }
                }, 10);
            }
        
            // Controlar el movimiento y disparo con las flechas del teclado
            document.addEventListener('keydown', (event) => {
                switch (event.key) {
                    case 'ArrowUp':
                        moverCuadrado('arriba');
                        break;
                    case 'ArrowDown':
                        moverCuadrado('abajo');
                        break;
                    case 'ArrowLeft':
                        moverCuadrado('izquierda');
                        break;
                    case 'ArrowRight':
                        moverCuadrado('derecha');
                        break;
                    case ' ':
                        disparar();
                        break;
                }
            });
        });
    </script>
    <div id="cuadrado"></div>
</body>
</html>