Añadidos juegos
This commit is contained in:
23
piedra-papel-tijera/index.html
Normal file
23
piedra-papel-tijera/index.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Piedra, Papel o Tijera</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Piedra, Papel o Tijera</h1>
|
||||
<div id="scoreboard">
|
||||
Tú: <span id="user-score">0</span> |
|
||||
Máquina: <span id="computer-score">0</span>
|
||||
</div>
|
||||
<div id="choices">
|
||||
<button data-choice="piedra">🪨 Piedra</button>
|
||||
<button data-choice="papel">📄 Papel</button>
|
||||
<button data-choice="tijera">✂️ Tijera</button>
|
||||
</div>
|
||||
<div id="result"></div>
|
||||
<button id="reset-btn">Reiniciar</button>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
62
piedra-papel-tijera/script.js
Normal file
62
piedra-papel-tijera/script.js
Normal file
@@ -0,0 +1,62 @@
|
||||
const userScoreSpan = document.getElementById('user-score');
|
||||
const computerScoreSpan = document.getElementById('computer-score');
|
||||
const resultDiv = document.getElementById('result');
|
||||
const choiceButtons = document.querySelectorAll('#choices button');
|
||||
const resetBtn = document.getElementById('reset-btn');
|
||||
|
||||
let userScore = 0;
|
||||
let computerScore = 0;
|
||||
|
||||
const choices = ['piedra', 'papel', 'tijera'];
|
||||
|
||||
function computerPlay() {
|
||||
const idx = Math.floor(Math.random() * 3);
|
||||
return choices[idx];
|
||||
}
|
||||
|
||||
function playRound(userChoice) {
|
||||
const computerChoice = computerPlay();
|
||||
|
||||
let resultMsg = `Tu elección: ${emoji(userChoice)} ${capitalize(userChoice)}<br>
|
||||
Computadora: ${emoji(computerChoice)} ${capitalize(computerChoice)}<br>`;
|
||||
|
||||
if (userChoice === computerChoice) {
|
||||
resultMsg += "<strong>¡Empate!</strong>";
|
||||
} else if (
|
||||
(userChoice === 'piedra' && computerChoice === 'tijera') ||
|
||||
(userChoice === 'papel' && computerChoice === 'piedra') ||
|
||||
(userChoice === 'tijera' && computerChoice === 'papel')
|
||||
) {
|
||||
userScore++;
|
||||
userScoreSpan.textContent = userScore;
|
||||
resultMsg += "<strong>¡Ganaste esta ronda! 🎉</strong>";
|
||||
} else {
|
||||
computerScore++;
|
||||
computerScoreSpan.textContent = computerScore;
|
||||
resultMsg += "<strong>La computadora gana esta ronda.</strong>";
|
||||
}
|
||||
|
||||
resultDiv.innerHTML = resultMsg;
|
||||
}
|
||||
|
||||
function emoji(choice) {
|
||||
if (choice === 'piedra') return '🪨';
|
||||
if (choice === 'papel') return '📄';
|
||||
if (choice === 'tijera') return '✂️';
|
||||
}
|
||||
|
||||
function capitalize(word) {
|
||||
return word.charAt(0).toUpperCase() + word.slice(1);
|
||||
}
|
||||
|
||||
choiceButtons.forEach(btn => {
|
||||
btn.onclick = () => playRound(btn.getAttribute('data-choice'));
|
||||
});
|
||||
|
||||
resetBtn.onclick = () => {
|
||||
userScore = 0;
|
||||
computerScore = 0;
|
||||
userScoreSpan.textContent = userScore;
|
||||
computerScoreSpan.textContent = computerScore;
|
||||
resultDiv.textContent = '';
|
||||
};
|
||||
152
piedra-papel-tijera/styles.css
Normal file
152
piedra-papel-tijera/styles.css
Normal file
@@ -0,0 +1,152 @@
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #fdf6e3;
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
color: #222;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Encabezado */
|
||||
h1 {
|
||||
margin-top: 2.7rem;
|
||||
color: #222;
|
||||
font-size: clamp(1.5rem, 4vw, 2.7rem);
|
||||
}
|
||||
|
||||
/* Marcador */
|
||||
#scoreboard {
|
||||
font-size: clamp(1.05em, 2.5vw, 1.2em);
|
||||
margin: 0.9em 0 1.8em 0;
|
||||
}
|
||||
|
||||
/* Botones de elección */
|
||||
#choices {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1em;
|
||||
justify-content: center;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
#choices button {
|
||||
font-size: clamp(1em, 3vw, 1.3em);
|
||||
margin: 0 0.4em;
|
||||
padding: 0.9em 2em;
|
||||
border: none;
|
||||
border-radius: 0.7em;
|
||||
background: #6ab04c;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
min-width: 100px;
|
||||
max-width: 90vw;
|
||||
box-shadow: 0 2px 6px #eaeaea;
|
||||
}
|
||||
|
||||
#choices button:hover {
|
||||
background: #218c5a;
|
||||
}
|
||||
|
||||
/* Resultado */
|
||||
#result {
|
||||
font-size: clamp(1.05em, 2vw, 1.2em);
|
||||
margin: 1.1em 0 1.7em 0;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
/* Reset */
|
||||
#reset-btn {
|
||||
font-size: clamp(1em, 2vw, 1.15em);
|
||||
padding: 0.6em 2em;
|
||||
border: none;
|
||||
border-radius: 0.5em;
|
||||
background: #f76707;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
margin-top: 1.1em;
|
||||
box-shadow: 0 2px 6px #eaeaea;
|
||||
}
|
||||
#reset-btn:hover {
|
||||
background: #c44210;
|
||||
}
|
||||
|
||||
/* ======= Pantallas pequeñas (móviles) ======= */
|
||||
@media (max-width: 600px) {
|
||||
h1 {
|
||||
margin-top: 5vw;
|
||||
font-size: clamp(1.2rem, 7vw, 2rem);
|
||||
}
|
||||
#scoreboard {
|
||||
font-size: clamp(1em, 6vw, 1.35em);
|
||||
margin-top: 2vw;
|
||||
margin-bottom: 5vw;
|
||||
}
|
||||
#choices {
|
||||
gap: 3vw;
|
||||
margin-bottom: 5vw;
|
||||
}
|
||||
#choices button {
|
||||
font-size: clamp(1em, 6vw, 2em);
|
||||
padding: 1.2em 6vw;
|
||||
border-radius: 7vw;
|
||||
min-width: 48vw;
|
||||
}
|
||||
#result {
|
||||
font-size: clamp(1em, 7vw, 1.5em);
|
||||
margin-bottom: 6vw;
|
||||
}
|
||||
#reset-btn {
|
||||
font-size: clamp(1em, 8vw, 2em);
|
||||
padding: 1em 15vw;
|
||||
border-radius: 8vw;
|
||||
margin-top: 5vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Pantallas muy grandes ===== */
|
||||
@media (min-width: 1200px) {
|
||||
h1 {
|
||||
font-size: clamp(2rem, 2vw, 3rem);
|
||||
}
|
||||
#scoreboard {
|
||||
font-size: clamp(1.2em, 2vw, 1.5em);
|
||||
margin-bottom: 2.5em;
|
||||
}
|
||||
#choices button {
|
||||
font-size: clamp(1.2em, 2vw, 1.5em);
|
||||
padding: 1em 3em;
|
||||
border-radius: 1em;
|
||||
min-width: 120px;
|
||||
max-width: 320px;
|
||||
}
|
||||
#reset-btn {
|
||||
font-size: clamp(1.12em, 2vw, 1.25em);
|
||||
padding: 0.8em 2.5em;
|
||||
border-radius: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Pantallas muy pequeñas (<350px) ===== */
|
||||
@media (max-width: 350px) {
|
||||
#choices {
|
||||
flex-direction: column;
|
||||
gap: 5vw;
|
||||
}
|
||||
#choices button {
|
||||
min-width: 60vw;
|
||||
padding: 1em 7vw;
|
||||
}
|
||||
#reset-btn {
|
||||
padding: 1em 8vw;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user