Untitled
unknown
plain_text
2 years ago
2.2 kB
6
Indexable
Oczywiście! Poniżej znajdziesz prosty przykład gry "Wisielec" napisanej w HTML, CSS i JavaScript:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wisielec</title>
<style>
body {
font-family: Arial, sans-serif;
}
#word {
font-size: 24px;
margin-bottom: 20px;
}
#letters {
margin-bottom: 20px;
}
#letters button {
font-size: 18px;
margin: 5px;
padding: 5px 10px;
cursor: pointer;
}
#result {
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="word"></div>
<div id="letters"></div>
<div id="result"></div>
<script>
const words = ["KOT", "PIES", "SAMOCHÓD", "KOMPUTER", "DOM"];
let selectedWord = words[Math.floor(Math.random() * words.length)];
let guessedLetters = new Set();
let remainingAttempts = 6;
function displayWord() {
let wordDisplay = '';
for (let char of selectedWord) {
if (guessedLetters.has(char)) {
wordDisplay += char + ' ';
} else {
wordDisplay += '_ ';
}
}
document.getElementById('word').textContent = wordDisplay;
}
function displayLetters() {
let letters = '';
for (let i = 65; i <= 90; i++) {
let letter = String.fromCharCode(i);
if (!guessedLetters.has(letter)) {
letters += `<button onclick="guess('${letter}')">${letter}</button>`;
}
}
document.getElementById('letters').innerHTML = letters;
}
function guess(letter) {
guessedLetters.add(letter);
if (!selectedWord.includes(letter)) {
remainingAttempts--;
}
displayWord();
displayLetters();
checkResult();
}
function checkResult() {
if (remainingAttempts === 0) {
document.getElementById('result').textContent = 'Przegrałeś. Szukane słowo to: ' + selectedWord;
} else if (!document.getElementById('word').textContent.includes('_')) {
document.getElementById('result').textContent = 'Gratulacje! Wygrałeś!';
}
}
displayWord();
displayLetters();
</script>
</body>
</html>
```
Skopiuj ten kod do pliku HTML i otwórz go w przeglądarce internetowej, aby zagrać w grę "Wisielec".Editor is loading...
Leave a Comment