mi_web/juego.html at master · JesusSalido4000/mi_web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
  <title>Juego RPG - Caballero vs Dragón</title>
  <style>
    /* Estilos para el juego */
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }

    h1 {
      color: #c0392b;
    }

    #combate {
      margin-top: 50px;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #2980b9;
      color: #fff;
      border: none;
      cursor: pointer;
    }

    #vidaCaballero, #vidaDragon {
      font-weight: bold;
    }

    /* Estilo aleatorio alusivo a la edad medida */
    #edadMedida {
      font-size: 32px;
      padding: 5px;
      border-radius: 10px;
      color: #fff;
    }

    /* Cambio aleatorio de color de fondo */
    .edad-1 { background-color: #e74c3c; }
    .edad-2 { background-color: #e67e22; }
    .edad-3 { background-color: #f1c40f; }
    .edad-4 { background-color: #27ae60; }
    .edad-5 { background-color: #3498db; }
    .edad-6 { background-color: #9b59b6; }
  </style>
</head>
<body>
  <h1>Juego RPG - Caballero vs Dragón</h1>
  <div id="combate">
    <p>
      Caballero Vida: <span id="vidaCaballero">100</span>
      &nbsp;&nbsp;&nbsp;&nbsp;
      Dragón Vida: <span id="vidaDragon">150</span>
    </p>
    <p>
      Edad Medida del Caballero: <span id="edadMedida" class="edad-1">20</span>
    </p>
    <p>
      <button onclick="accionCaballero('Atacar')">Atacar</button>
      <button onclick="accionCaballero('Defender')">Defender</button>
      <button onclick="accionCaballero('Tomar Posiciones')">Tomar Posiciones</button>
    </p>
    <p id="accionDragon"></p>
    <p id="resultado"></p>
  </div>

  <script>
     let guerreroPosiciones = 3;
    let guerreroVida = 100;
    let dragonVida = 150;

    function accionCaballero(accion) {
      const accionesDragon = ['Ataque con Fuego', 'Garra Afilada', 'Vuelo Peligroso'];
      const accionDragon = accionesDragon[Math.floor(Math.random() * accionesDragon.length)];

      if (accion === 'Atacar') {
        dragonVida -= getRandomNumber(10, 20);
      } else if (accion === 'Defender') {
        guerreroVida += getRandomNumber(5, 10);
      } else if (accion === 'Tomar Posiciones') {
        guerreroPosiciones += 1;
      }

      if (guerreroPosiciones > 3) {
        guerreroPosiciones = 3;
      }

      guerreroVida -= getRandomNumber(10, 25);

      document.getElementById('vidaCaballero').innerText = guerreroVida;
      document.getElementById('vidaDragon').innerText = dragonVida;
      document.getElementById('accionDragon').innerText = `Dragón realizó: ${accionDragon}`;
      document.getElementById('resultado').innerText = `¡${accion}!`;
    }

    function getRandomNumber(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
  </script>
</body>
</html>