Añadidos juegos

2025-08-21 23:42:55 +02:00
parent ec9c7d8d63
commit 90b2643d8d
46 changed files with 3936 additions and 0 deletions
--- a/adivina/index.html
+++ b/adivina/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <title>Adivina el Número</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <h1>¡Adivina el número!</h1>
+  <div id="game-box">
+    <p>Estoy pensando en un número entre 1 y 100.</p>
+    <p>¿Puedes adivinarlo en 7 intentos?</p>
+    <input id="guess-input" type="number" min="1" max="100" placeholder="Tu número" />
+    <button id="guess-btn">Adivinar</button>
+    <button id="restart-btn" class="hidden">Jugar de nuevo</button>
+    <div id="info"></div>
+    <div id="attempts">Intentos restantes: <span id="attempts-left">7</span></div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
--- a/adivina/script.js
+++ b/adivina/script.js
@@ -0,0 +1,55 @@
+let randomNumber;
+let attemptsLeft = 7;
+
+const guessInput = document.getElementById('guess-input');
+const guessBtn = document.getElementById('guess-btn');
+const restartBtn = document.getElementById('restart-btn');
+const infoDiv = document.getElementById('info');
+const attemptsSpan = document.getElementById('attempts-left');
+
+function startGame() {
+  randomNumber = Math.floor(Math.random() * 100) + 1;
+  attemptsLeft = 7;
+  attemptsSpan.textContent = attemptsLeft;
+  infoDiv.textContent = '';
+  guessInput.value = '';
+  guessInput.disabled = false;
+  guessBtn.disabled = false;
+  restartBtn.classList.add('hidden');
+}
+
+function checkGuess() {
+  const guess = Number(guessInput.value);
+
+  if (guess < 1 || guess > 100 || isNaN(guess)) {
+    infoDiv.textContent = "Por favor ingresa un número válido entre 1 y 100.";
+    return;
+  }
+
+  attemptsLeft--;
+  attemptsSpan.textContent = attemptsLeft;
+
+  if (guess === randomNumber) {
+    infoDiv.textContent = "¡Correcto! 🎉 Has adivinado el número.";
+    endGame(true);
+  } else if (attemptsLeft === 0) {
+    infoDiv.textContent = `¡Oh no! Te quedaste sin intentos. El número era ${randomNumber}.`;
+    endGame(false);
+  } else if (guess < randomNumber) {
+    infoDiv.textContent = "Demasiado bajo. Intenta nuevamente.";
+  } else {
+    infoDiv.textContent = "Demasiado alto. Intenta nuevamente.";
+  }
+}
+
+function endGame(won) {
+  guessInput.disabled = true;
+  guessBtn.disabled = true;
+  restartBtn.classList.remove('hidden');
+}
+
+guessBtn.onclick = checkGuess;
+restartBtn.onclick = startGame;
+guessInput.onkeydown = (e) => { if (e.key === "Enter") checkGuess(); };
+
+startGame();
--- a/adivina/styles.css
+++ b/adivina/styles.css
@@ -0,0 +1,68 @@
+body {
+  background: #f7f7f7;
+  font-family: Arial, sans-serif;
+  text-align: center;
+}
+
+h1 {
+  margin-top: 40px;
+  color: #222;
+}
+
+#game-box {
+  background: white;
+  width: 350px;
+  margin: 50px auto;
+  padding: 30px 20px;
+  border-radius: 12px;
+  box-shadow: 0 0 8px #bbb;
+}
+
+input[type="number"] {
+  width: 100px;
+  font-size: 1.1em;
+  padding: 6px;
+  margin-right: 12px;
+  margin-bottom: 10px;
+}
+
+button {
+  font-size: 1em;
+  padding: 7px 20px;
+  border: none;
+  border-radius: 5px;
+  background: #2196f3;
+  color: white;
+  cursor: pointer;
+  margin-bottom: 10px;
+}
+button:hover {
+  background: #1769aa;
+}
+
+#info {
+  font-size: 1.2em;
+  margin-top: 14px;
+  min-height: 2em;
+}
+
+#attempts {
+  margin-top: 8px;
+  color: #888;
+}
+
+.hidden {
+  display: none;
+}
+
+@media (min-width: 728px) {
+  body,
+  #game-box,
+  input[type="number"],
+  button,
+  #info,
+  #attempts {
+    width: 95%;
+    font-size: 130%;
+  }
+}