Click here for free DL of the app version that can save data.

No:1856

3269

←

Prev Next

→

Guess what the cat's name is
Developer User3422｜Date and time 23/6/19 8:57:02
Build time 53.111 sec｜Game capacity 5.403KB｜

Script

I have implemented an app as a single HTML file with JavaScript included. It is a game that can be played on a smartphone with lots of emojis used. The game involves guessing the name of a cat. The user is presented with a picture of a cat and a set of letters to choose from to form the cat’s name. The user has a limited number of guesses and can ask for a hint if needed. If the user correctly guesses the cat’s name, they win the game. Here is the code:

Guess the Cat’s Name!

What is this cat’s name? Choose from the letters below:

Can you guess what the cat’s name is?

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

I have implemented an app as a single HTML file with JavaScript included. It is a game that can be played on a smartphone with lots of emojis used. The game involves guessing the name of a cat. The user is presented with a picture of a cat and a set of letters to choose from to form the cat's name. The user has a limited number of guesses and can ask for a hint if needed. If the user correctly guesses the cat's name, they win the game.

Here is the code:

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Guess the Cat's Name</title>
	<style>
		body {
			background-color: #ffe6ff;
			font-family: sans-serif;
			text-align: center;
		}

h1 {
			color: #9933ff;
			font-size: 2em;
		}

img {
			margin: 20px;
			max-width: 80%;
			height: auto;
		}

button {
			background-color: #cc00cc;
			color: white;
			font-size: 1.5em;
			margin: 10px;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}

.answer {
			font-size: 2em;
			margin: 20px;
		}
	</style>
</head>
<body>
	<h1>Guess the Cat's Name!</h1>
	<img src="cat.jpg" alt="A cute cat">
	<div id="question">
		<p>What is this cat's name? Choose from the letters below:</p>
		<p id="letters"></p>
		<p id="hint"><button onclick="showHint()">Need a hint?</button></p>
	</div>
	<div id="answer"></div>
	<script>
		const catname = "Whiskers";
		let guess = "";
		let hintShown = false;
		let numGuesses = 5;

// Initialize the game
		function initGame() {
			initLetters();
			initAnswer();
		}

// Display the letters to choose from
		function initLetters() {
			const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
			let displayedLetters = "";
			for (let i = 0; i < letters.length; i++) {
				const letter = letters.charAt(i);
				if (catname.includes(letter)) {
					displayedLetters += letter;
				} else {
					displayedLetters += "  ";
				}
			}
			document.getElementById("letters").innerHTML = displayedLetters;
		}

// Initialize the answer display
		function initAnswer() {
			const answer = "_".repeat(catname.length);
			document.getElementById("answer").innerHTML = answer.replace(/./g, "🐾");
		}

// Handle letter button clicks
		function guessLetter(letter) {
			if (guess.length < catname.length && !guess.includes(letter)) {
				guess += letter;
				checkAnswer();
			}
		}

// Check if the guessed answer is correct
		function checkAnswer() {
			let answerText = "";
			let allCorrect = true;
			for (let i = 0; i < catname.length; i++) {
				const catLetter = catname.charAt(i);
				if (guess.includes(catLetter)) {
					answerText += catLetter;
				} else {
					answerText += "_";
					allCorrect = false;
				}
			}
			document.getElementById("answer").innerHTML = answerText.replace(/./g, "🐾");

if (allCorrect) {
				document.getElementById("question").style.display = "none";
				document.getElementById("answer").classList.add("answer");
				document.getElementById("answer").innerHTML = "Congratulations! You guessed the cat's name!";
			} else if (guess.length === catname.length) {
				numGuesses--;
				if (numGuesses === 0) {
					document.getElementById("question").style.display = "none";
					document.getElementById("answer").classList.add("answer");
					document.getElementById("answer").innerHTML = "Game over! The cat's name was " + catname;
				} else {
					const plural = numGuesses === 1 ? "" : "s";
					document.getElementById("answer").innerHTML = "Sorry, that's not the cat's name. You have " + numGuesses + " guess" + plural + " left.";
					guess = "";
				}
			}
		}

// Show a hint
		function showHint() {
			if (!hintShown) {
				hintShown = true;
				const hintLetter = catname.charAt(Math.floor(Math.random() * catname.length));
				const letterButtons = Array.from(document.querySelectorAll("#letters button"));
				const hintButton = letterButtons.filter(button => button.innerHTML === hintLetter.toUpperCase())[0];
				hintButton.disabled = true;
				hintButton.style.backgroundColor = "#ff80ff";
			}
		}
		
		// Initialize the game when page is loaded
		window.onload = initGame;
	</script>
	<p>
		<button onclick="guessLetter('A')">A</button>
		<button onclick="guessLetter('B')">B</button>
		<button onclick="guessLetter('C')">C</button>
		<button onclick="guessLetter('D')">D</button>
		<button onclick="guessLetter('E')">E</button>
		<button onclick="guessLetter('F')">F</button>
		<button onclick="guessLetter('G')">G</button>
		<button onclick="guessLetter('H')">H</button>
		<button onclick="guessLetter('I')">I</button>
		<button onclick="guessLetter('J')">J</button>
		<button onclick="guessLetter('K')">K</button>
		<button onclick="guessLetter('L')">L</button>
		<button onclick="guessLetter('M')">M</button>
		<button onclick="guessLetter('N')">N</button>
		<button onclick="guessLetter('O')">O</button>
		<button onclick="guessLetter('P')">P</button>
		<button onclick="guessLetter('Q')">Q</button>
		<button onclick="guessLetter('R')">R</button>
		<button onclick="guessLetter('S')">S</button>
		<button onclick="guessLetter('T')">T</button>
		<button onclick="guessLetter('U')">U</button>
		<button onclick="guessLetter('V')">V</button>
		<button onclick="guessLetter('W')">W</button>
		<button onclick="guessLetter('X')">X</button>
		<button onclick="guessLetter('Y')">Y</button>
		<button onclick="guessLetter('Z')">Z</button>
	</p>
</body>
</html>
```

Can you guess what the cat's name is?