+

+

Hangman Game

+

Guess the word before the man gets hanged!

+

+

+

+

+

+

+

+

Enjoy the classic word guessing game!

+

+ buildHtml

+ baseUrl https://hangman.scroll.pub

+ metaTags

+ editButton /edit.html

+ title Hangman Game - Play Online

+ style.css

+ body.html

+ script.js

+ {

+ "id": "da72fee9-6e21-4102-9904-e42d32d583eb",

+ "object": "chat.completion",

+ "created": 1735382736,

+ "model": "deepseek-chat",

+ "choices": [

+ {

+ "index": 0,

+ "message": {

+ "role": "assistant",

+ "content": "---domain---\nhangman.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://hangman.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Hangman Game - Play Online\nstyle.css\nbody.html\nscript.js\n---body.html---\n

\n

Hangman Game

\n

Guess the word before the man gets hanged!

\n

\n\n

\n

\n

\n \n

\n\n

\n\n

\n\n

\n

Guesses left: 6

\n

\n

\n\n New Game\n

\n

\n\n\n---style.css---\n:root {\n --primary-color: #2c3e50;\n --secondary-color: #34495e;\n --accent-color: #e74c3c;\n --text-color: #ecf0f1;\n --background-color: #1a1a1a;\n}\n\nbody {\n font-family: 'Segoe UI', system-ui, sans-serif;\n background-color: var(--background-color);\n color: var(--text-color);\n margin: 0;\n padding: 20px;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\nheader {\n text-align: center;\n margin-bottom: 2rem;\n}\n\nh1 {\n color: var(--primary-color);\n font-size: 2.5rem;\n margin: 0;\n}\n\n.game-container {\n max-width: 800px;\n width: 100%;\n background: var(--secondary-color);\n padding: 2rem;\n border-radius: 15px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n}\n\n.hangman-display {\n text-align: center;\n margin-bottom: 2rem;\n}\n\n.hangman-svg {\n width: 200px;\n height: 200px;\n}\n\n.scaffold {\n stroke: var(--primary-color);\n stroke-width: 4;\n}\n\n.hangman-part {\n stroke: var(--accent-color);\n stroke-width: 4;\n fill: none;\n display: none;\n}\n\n.word-display {\n font-size: 2rem;\n letter-spacing: 0.5rem;\n text-align: center;\n margin: 2rem 0;\n font-weight: bold;\n}\n\n.keyboard {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));\n gap: 10px;\n max-width: 600px;\n margin: 0 auto;\n}\n\n.keyboard button {\n padding: 15px;\n font-size: 1.2rem;\n background: var(--primary-color);\n color: var(--text-color);\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.keyboard button:hover {\n background: var(--accent-color);\n transform: translateY(-2px);\n}\n\n.keyboard button:disabled {\n background: #7f8c8d;\n cursor: not-allowed;\n}\n\n.game-status {\n text-align: center;\n margin: 2rem 0;\n}\n\n.reset-button {\n display: block;\n margin: 2rem auto 0;\n padding: 1rem 2rem;\n font-size: 1.2rem;\n background: var(--accent-color);\n color: var(--text-color);\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.reset-button:hover {\n background: #c0392b;\n transform: translateY(-2px);\n}\n\nfooter {\n margin-top: 3rem;\n text-align: center;\n color: #7f8c8d;\n}\n\n@media (max-width: 600px) {\n h1 {\n font-size: 2rem;\n }\n \n .word-display {\n font-size: 1.5rem;\n }\n \n .keyboard button {\n padding: 10px;\n font-size: 1rem;\n }\n}\n---script.js---\nconst words = [\n 'javascript', 'programming', 'algorithm', \n 'developer', 'interface', 'database',\n 'function', 'variable', 'iteration',\n 'framework', 'responsive', 'asynchronous'\n];\n\nlet selectedWord = '';\nlet guessedLetters = [];\nlet remainingGuesses = 6;\nlet gameActive = true;\n\nconst wordDisplay = document.getElementById('word-display');\nconst keyboard = document.getElementById('keyboard');\nconst guessesLeft = document.getElementById('guesses-left');\nconst gameMessage = document.getElementById('game-message');\nconst resetButton = document.getElementById('reset-button');\nconst hangmanParts = document.querySelectorAll('.hangman-part');\n\nfunction initializeGame() {\n selectedWord = words[Math.floor(Math.random() * words.length)];\n guessedLetters = [];\n remainingGuesses = 6;\n gameActive = true;\n \n // Reset display\n wordDisplay.textContent = '_ '.repeat(selectedWord.length);\n guessesLeft.textContent = remainingGuesses;\n gameMessage.textContent = '';\n \n // Reset keyboard\n keyboard.innerHTML = 'abcdefghijklmnopqrstuvwxyz'\n .split('')\n .map(letter => `${letter}`)\n .join('');\n \n // Reset hangman\n hangmanParts.forEach(part => part.style.display = 'none');\n \n // Add event listeners\n keyboard.addEventListener('click', handleLetterClick);\n resetButton.addEventListener('click', initializeGame);\n}\n\nfunction handleLetterClick(e) {\n if (!gameActive || !e.target.matches('button')) return;\n \n const letter = e.target.textContent.toLowerCase();\n e.target.disabled = true;\n \n if (selectedWord.includes(letter)) {\n guessedLetters.push(letter);\n updateWordDisplay();\n checkWin();\n } else {\n remainingGuesses--;\n updateHangman();\n checkLose();\n }\n \n guessesLeft.textContent = remainingGuesses;\n}\n\nfunction updateWordDisplay() {\n wordDisplay.textContent = selectedWord\n .split('')\n .map(letter => guessedLetters.includes(letter) ? letter : '_')\n .join(' ');\n}\n\nfunction updateHangman() {\n const partIndex = 6 - remainingGuesses - 1;\n if (partIndex >= 0 && partIndex < hangmanParts.length) {\n hangmanParts[partIndex].style.display = 'block';\n }\n}\n\nfunction checkWin() {\n if (selectedWord.split('').every(letter => guessedLetters.includes(letter))) {\n gameMessage.textContent = 'Congratulations! You won!';\n gameActive = false;\n }\n}\n\nfunction checkLose() {\n if (remainingGuesses === 0) {\n gameMessage.textContent = `Game over! The word was \"${selectedWord}\".`;\n gameActive = false;\n }\n}\n\n// Initialize game on page load\ninitializeGame();\n---end---"

+ },

+ "logprobs": null,

+ "finish_reason": "stop"

+ }

+ ],

+ "usage": {

+ "prompt_tokens": 243,

+ "completion_tokens": 2004,

+ "total_tokens": 2247,

+ "prompt_cache_hit_tokens": 0,

+ "prompt_cache_miss_tokens": 243

+ },

+ "system_fingerprint": "fp_f1afce2943"

+ }

+ # hangman.scroll.pub

+ Website generated by DeepSeek from prompt: a web page can play game like hugman

+ const words = [

+ 'javascript', 'programming', 'algorithm',

+ 'developer', 'interface', 'database',

+ 'function', 'variable', 'iteration',

+ 'framework', 'responsive', 'asynchronous'

+ ];

+

+ let selectedWord = '';

+ let guessedLetters = [];

+ let remainingGuesses = 6;

+ let gameActive = true;

+

+ const wordDisplay = document.getElementById('word-display');

+ const keyboard = document.getElementById('keyboard');

+ const guessesLeft = document.getElementById('guesses-left');

+ const gameMessage = document.getElementById('game-message');

+ const resetButton = document.getElementById('reset-button');

+ const hangmanParts = document.querySelectorAll('.hangman-part');

+

+ function initializeGame() {

+ selectedWord = words[Math.floor(Math.random() * words.length)];

+ guessedLetters = [];

+ remainingGuesses = 6;

+ gameActive = true;

+

+ // Reset display

+ wordDisplay.textContent = '_ '.repeat(selectedWord.length);

+ guessesLeft.textContent = remainingGuesses;

+ gameMessage.textContent = '';

+

+ // Reset keyboard

+ keyboard.innerHTML = 'abcdefghijklmnopqrstuvwxyz'

+ .split('')

+ .map(letter => `${letter}`)

+ .join('');

+

+ // Reset hangman

+ hangmanParts.forEach(part => part.style.display = 'none');

+

+ // Add event listeners

+ keyboard.addEventListener('click', handleLetterClick);

+ resetButton.addEventListener('click', initializeGame);

+ }

+

+ function handleLetterClick(e) {

+ if (!gameActive || !e.target.matches('button')) return;

+

+ const letter = e.target.textContent.toLowerCase();

+ e.target.disabled = true;

+

+ if (selectedWord.includes(letter)) {

+ guessedLetters.push(letter);

+ updateWordDisplay();

+ checkWin();

+ } else {

+ remainingGuesses--;

+ updateHangman();

+ checkLose();

+ }

+

+ guessesLeft.textContent = remainingGuesses;

+ }

+

+ function updateWordDisplay() {

+ wordDisplay.textContent = selectedWord

+ .split('')

+ .map(letter => guessedLetters.includes(letter) ? letter : '_')

+ .join(' ');

+ }

+

+ function updateHangman() {

+ const partIndex = 6 - remainingGuesses - 1;

+ if (partIndex >= 0 && partIndex < hangmanParts.length) {

+ hangmanParts[partIndex].style.display = 'block';

+ }

+ }

+

+ function checkWin() {

+ if (selectedWord.split('').every(letter => guessedLetters.includes(letter))) {

+ gameMessage.textContent = 'Congratulations! You won!';

+ gameActive = false;

+ }

+ }

+

+ function checkLose() {

+ if (remainingGuesses === 0) {

+ gameMessage.textContent = `Game over! The word was "${selectedWord}".`;

+ gameActive = false;

+ }

+ }

+

+ // Initialize game on page load

+ initializeGame();

+ :root {

+ --primary-color: #2c3e50;

+ --secondary-color: #34495e;

+ --accent-color: #e74c3c;

+ --text-color: #ecf0f1;

+ --background-color: #1a1a1a;

+ }

+

+ body {

+ font-family: 'Segoe UI', system-ui, sans-serif;

+ background-color: var(--background-color);

+ color: var(--text-color);

+ margin: 0;

+ padding: 20px;

+ min-height: 100vh;

+ display: flex;

+ flex-direction: column;

+ align-items: center;

+ }

+

+ header {

+ text-align: center;

+ margin-bottom: 2rem;

+ }

+

+ h1 {

+ color: var(--primary-color);

+ font-size: 2.5rem;

+ margin: 0;

+ }

+

+ .game-container {

+ max-width: 800px;

+ width: 100%;

+ background: var(--secondary-color);

+ padding: 2rem;

+ border-radius: 15px;

+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

+ }

+

+ .hangman-display {

+ text-align: center;

+ margin-bottom: 2rem;

+ }

+

+ .hangman-svg {

+ width: 200px;

+ height: 200px;

+ }

+

+ .scaffold {

+ stroke: var(--primary-color);

+ stroke-width: 4;

+ }

+

+ .hangman-part {

+ stroke: var(--accent-color);

+ stroke-width: 4;

+ fill: none;

+ display: none;

+ }

+

+ .word-display {

+ font-size: 2rem;

+ letter-spacing: 0.5rem;

+ text-align: center;

+ margin: 2rem 0;

+ font-weight: bold;

+ }

+

+ .keyboard {

+ display: grid;

+ grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));

+ gap: 10px;

+ max-width: 600px;

+ margin: 0 auto;

+ }

+

+ .keyboard button {

+ padding: 15px;

+ font-size: 1.2rem;

+ background: var(--primary-color);

+ color: var(--text-color);

+ border: none;

+ border-radius: 5px;

+ cursor: pointer;

+ transition: all 0.3s ease;

+ }

+

+ .keyboard button:hover {

+ background: var(--accent-color);

+ transform: translateY(-2px);

+ }

+

+ .keyboard button:disabled {

+ background: #7f8c8d;

+ cursor: not-allowed;

+ }

+

+ .game-status {

+ text-align: center;

+ margin: 2rem 0;

+ }

+

+ .reset-button {

+ display: block;

+ margin: 2rem auto 0;

+ padding: 1rem 2rem;

+ font-size: 1.2rem;

+ background: var(--accent-color);

+ color: var(--text-color);

+ border: none;

+ border-radius: 5px;

+ cursor: pointer;

+ transition: all 0.3s ease;

+ }

+

+ .reset-button:hover {

+ background: #c0392b;

+ transform: translateY(-2px);

+ }

+

+ footer {

+ margin-top: 3rem;

+ text-align: center;

+ color: #7f8c8d;

+ }

+

+ @media (max-width: 600px) {

+ h1 {

+ font-size: 2rem;

+ }

+

+ .word-display {

+ font-size: 1.5rem;

+ }

+

+ .keyboard button {

+ padding: 10px;

+ font-size: 1rem;

+ }

+ }