Juego de pelea con sprites y música con 30 peleadores con animaciones con botones para jugar escenario menu's game

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

No:34328

←

Prev Next

→

Juego de pelea con sprites y música con 30 peleado..ALL
Developer User16223｜Date and time 24/1/10 3:38:53
Build time 15.406 sec｜Game capacity 3.619KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Juego de Pelea</title>
    <style>
        .game-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }

.game {
            width: 400px;
            height: 400px;
            position: relative;
            border: 2px solid black;
        }

.player {
            position: absolute;
        }

.button {
            display: inline-block;
            margin: 10px;
            padding: 8px 16px;
            font-size: 14px;
            background: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

.menu {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="game">
            <div id="player1" class="player">
                <img src="pictogram1.png" width="50" height="50" alt="Player 1">
            </div>
            <div id="player2" class="player">
                <img src="pictogram2.png" width="50" height="50" alt="Player 2">
            </div>
            <audio id="bg-music" autoplay>
                <source src="bg-music.mp3" type="audio/mp3">
            </audio>
        </div>
    </div>

<div class="menu">
        <button class="button" onclick="startGame()">Jugar</button>
    </div>

// Función para comenzar el juego
        function startGame() {
            document.querySelector('.menu').style.display = 'none';
            document.querySelector('.game').style.display = 'block';

player1 = document.getElementById('player1');
            player2 = document.getElementById('player2');

// Animación de los jugadores
            player1.style.animation = 'player1Animation 1s infinite';
            player2.style.animation = 'player2Animation 1s infinite';
        }

// Función para controlar la entrada de los botones táctiles
        function controlPlayer(event) {
            var keyCode = event.keyCode;
            
            // Movimiento del jugador 1
            if (keyCode === 87) { // W
                player1.style.bottom = parseInt(player1.style.bottom) + 10 + 'px';
            } else if (keyCode === 65) { // A
                player1.style.left = parseInt(player1.style.left) - 10 + 'px';
            } else if (keyCode === 83) { // S
                player1.style.bottom = parseInt(player1.style.bottom) - 10 + 'px';
            } else if (keyCode === 68) { // D
                player1.style.left = parseInt(player1.style.left) + 10 + 'px';
            }
            
            // Movimiento del jugador 2
            if (keyCode === 38) { // Arriba
                player2.style.bottom = parseInt(player2.style.bottom) + 10 + 'px';
            } else if (keyCode === 37) { // Izquierda
                player2.style.left = parseInt(player2.style.left) - 10 + 'px';
            } else if (keyCode === 40) { // Abajo
                player2.style.bottom = parseInt(player2.style.bottom) - 10 + 'px';
            } else if (keyCode === 39) { // Derecha
                player2.style.left = parseInt(player2.style.left) + 10 + 'px';
            }
        }
        
        // Escuchar los eventos de las teclas táctiles
        document.addEventListener('keydown', controlPlayer);
    </script>
</body>
</html>