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

No:40300

Un juego que se traté lo mismo que mortal Kombat,s..ALL
Developer User18058｜Date and time 24/2/2 7:58:44
Build time 15.889 sec｜Game capacity 4.18KB｜

Script

Juego de Pelea con un Erizo

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Juego de Pelea con un Erizo</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: #f3f3f3;
    }
    h1 {
      color: #333;
    }
    #player-selection {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }
    .player-icon {
      cursor: pointer;
      width: 80px;
      height: 80px;
      margin: 0 10px;
      box-shadow: 0 0 5px rgba(0,0,0,0.3);
      border-radius: 50%;
    }
    .player-icon:hover {
      transform: scale(1.1);
    }
    #battle-arena {
      display: flex;
      justify-content: center;
    }
    #player {
      width: 200px;
      height: 200px;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
      margin-right: 20px;
      padding: 20px;
      border-radius: 10px;
    }
    #enemy {
      width: 200px;
      height: 200px;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
      margin-left: 20px;
      padding: 20px;
      border-radius: 10px;
    }
    #result {
      font-size: 24px;
      margin-top: 20px;
    }
    #play-again-btn {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4caf50;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
      border: none;
    }
    #play-again-btn:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <h1>Juego de Pelea con un Erizo</h1>
  
  <div id="player-selection">
    <img src="erizo1.png" class="player-icon" onclick="setPlayer(1)" />
    <img src="erizo2.png" class="player-icon" onclick="setPlayer(2)" />
    <img src="erizo3.png" class="player-icon" onclick="setPlayer(3)" />
  </div>
  
  <div id="battle-arena" style="display: none;">
    <div id="player">
      <h3>¡Tú!</h3>
      <img id="player-icon" src="" width="120px" height="120px" />
    </div>
    <div id="enemy">
      <h3>Enemigo</h3>
      <img id="enemy-icon" src="erizo_enemy.png" width="120px" height="120px" />
    </div>
  </div>
  
  <div id="result" style="display: none;"></div>
  
  <button id="play-again-btn" style="display: none;" onclick="startGame()">Jugar de nuevo</button>
  
  <script>
    var playerSelected = false;
    var playerChoice = 0;
    var enemyChoice = Math.floor(Math.random() * 3) + 1;
    
    function setPlayer(choice) {
      if (!playerSelected) {
        playerChoice = choice;
        var playerIcon = document.getElementById('player-icon');
        playerIcon.src = 'erizo' + playerChoice + '.png';
        
        document.getElementById('player-selection').style.display = 'none';
        document.getElementById('battle-arena').style.display = 'flex';
        
        playGame();
      }
    }
    
    function playGame() {
      var result = document.getElementById('result');
      var enemyIcon = document.getElementById('enemy-icon');
      
      if (playerChoice === enemyChoice) {
        result.textContent = '¡Empate!';
      } else if (
        (playerChoice === 1 && enemyChoice === 3) ||
        (playerChoice === 2 && enemyChoice === 1) ||
        (playerChoice === 3 && enemyChoice === 2)
      ) {
        result.textContent = '¡Ganaste!';
      } else {
        result.textContent = '¡Perdiste!';
      }
      
      enemyIcon.src = 'erizo' + enemyChoice + '.png';
      result.style.display = 'block';
      document.getElementById('play-again-btn').style.display = 'block';
    }
    
    function startGame() {
      playerSelected = false;
      playerChoice = 0;
      enemyChoice = Math.floor(Math.random() * 3) + 1;
      
      document.getElementById('result').style.display = 'none';
      document.getElementById('play-again-btn').style.display = 'none';
      document.getElementById('player-selection').style.display = 'flex';
      document.getElementById('battle-arena').style.display = 'none';
      
      var playerIcon = document.getElementById('player-icon');
      playerIcon.src = '';
      var enemyIcon = document.getElementById('enemy-icon');
      enemyIcon.src = 'erizo_enemy.png';
    }
  </script>
</body>
</html>