AI game creator

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

No:26250

←

Prev Next

→

Pelea 2d
Developer User12942｜Date and time 23/11/28 4:50:55
Build time 114.906 sec｜Game capacity 4.674KB｜

Script

Aquí tienes un ejemplo de un juego de pelea 2D implementado en un solo archivo HTML usando JavaScript y pictogramas. Recuerda que esto es solo un ejemplo simplificado y que podrías agregar más funcionalidades y mejorar la jugabilidad según tus necesidades. ¡Diviértete!

Este código crea una escena de juego en un canvas donde dos jugadores (representados por pictogramas) pueden moverse con las teclas de flecha. Si ambos jugadores colisionan, sus vidas disminuyen en 10. Cuando la vida de alguno de los jugadores llega a cero, se muestra un mensaje de ganador y se reinicia el juego. Recuerda sustituir las rutas de las imágenes (`emozi_rabbit.png` y `emozi_apple.png`) con las ubicaciones reales de los pictogramas que deseas usar.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pelea 2D</title>
    <style>
        canvas {
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="500" height="300"></canvas>

// Personajes
        const jugador1 = {
            x: 50,
            y: 200,
            width: 50,
            height: 50,
            velocidad: 4,
            vida: 100,
            imagen: new Image()
        };

const jugador2 = {
            x: 400,
            y: 200,
            width: 50,
            height: 50,
            velocidad: 4,
            vida: 100,
            imagen: new Image()
        };

jugador1.imagen.src = "ruta/a/pictograma1.png"; // Ruta a la imagen del jugador 1
        jugador2.imagen.src = "ruta/a/pictograma2.png"; // Ruta a la imagen del jugador 2

// Detectar las teclas pulsadas para mover a los jugadores
        document.addEventListener("keydown", function(event) {
            if (event.key === "ArrowUp") {
                jugador1.y -= jugador1.velocidad;
            }
            else if (event.key === "ArrowDown") {
                jugador1.y += jugador1.velocidad;
            }
            else if (event.key === "ArrowRight") {
                jugador1.x += jugador1.velocidad;
            }
            else if (event.key === "ArrowLeft") {
                jugador1.x -= jugador1.velocidad;
            }
        });

// Bucle de juego principal
        function gameLoop() {
            // Actualizar la posición de los jugadores y verificar colisiones
            update();
            // Dibujar los jugadores en el canvas
            draw();

// Volver a llamar al bucle de juego
            requestAnimationFrame(gameLoop);
        }

// Función para actualizar la posición de los jugadores y verificar colisiones
        function update() {
            // Verificar colisión entre los jugadores
            if (checkCollision(jugador1, jugador2)) {
                // Restar vida a los jugadores en caso de colisión
                jugador1.vida -= 10;
                jugador2.vida -= 10;
            }

// Verificar si alguno de los jugadores se queda sin vida
            if (jugador1.vida <= 0) {
                alert("¡Jugador 2 ha ganado!");
                resetGame();
            }
            else if (jugador2.vida <= 0) {
                alert("¡Jugador 1 ha ganado!");
                resetGame();
            }
        }

// Función para dibujar los jugadores en el canvas
        function draw() {
            // Limpiar el canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar a los jugadores
            ctx.drawImage(jugador1.imagen, jugador1.x, jugador1.y, jugador1.width, jugador1.height);
            ctx.drawImage(jugador2.imagen, jugador2.x, jugador2.y, jugador2.width, jugador2.height);
        }

// Función para verificar colisiones entre jugadores
        function checkCollision(objeto1, objeto2) {
            return objeto1.x < objeto2.x + objeto2.width &&
                   objeto1.x + objeto1.width > objeto2.x &&
                   objeto1.y < objeto2.y + objeto2.height &&
                   objeto1.y + objeto1.height > objeto2.y;
        }

// Función para reiniciar el juego
        function resetGame() {
            // Restablecer las vidas y la posición inicial de los jugadores
            jugador1.vida = 100;
            jugador2.vida = 100;
            jugador1.x = 50;
            jugador1.y = 200;
            jugador2.x = 400;
            jugador2.y = 200;
        }

// Iniciar el bucle de juego
        gameLoop();
    </script>
</body>
</html>
```

Recuerda sustituir las rutas de las imágenes (`ruta/a/pictograma1.png` y `ruta/a/pictograma2.png`) con las ubicaciones reales de los pictogramas que deseas usar.