IT音痴なので、せっかく手っ取り早く作った仮の単語ゲームどうやったらブログとかにのっけられるかわからないｗ

愛川みぞれ（英単語検定１級所持） 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Guess the Word Game</title>
	<style>
		body {
			font-family: Arial, Helvetica, sans-serif;
			background-color: #F5F5F5 ;
		}
		h1 {
			text-align: center;
		}
		form {
			text-align: center;
			margin-top: 50px;
		}
		input[type="text"] {
			padding: 10px;
			font-size: 24px;
			text-align: center;
			width: 80%;
			max-width: 400px;
			border: none;
			border-radius: 5px;
			background-color: #FFFFFF ;
			margin-bottom: 20px;
		}
		button {
			background-color: #4CAF50 ;
			color: white;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			font-size: 24px;
		}
	</style>
</head>
<body>
	<h1>Guess the Word Game</h1>
	<form>
		<p id="definition"></p>
		<input type="text" id="answer" placeholder="Enter your answer here">
		<button type="button" onclick="checkAnswer()">Submit Answer</button>
	</form>

	<script>
		// Define the difficult words and their definitions
		const gameWords = [
			{word: "bellicose", definition: "inclined or eager to fight, aggressively hostile, or belligerent"},
			{word: "ennui", definition: "a feeling of weariness and dissatisfaction; boredom"},
			{word: "indolent", definition: "wanting to avoid activity or exertion; lazy"},
			{word: "nefarious", definition: "wicked or criminal"},
			{word: "quixotic", definition: "very idealistic; unrealistic and impractical"},
			{word: "reprobate", definition: "unprincipled person; shameless rogue"},
			{word: "superfluous", definition: "unnecessary, especially through being more than enough"},
			{word: "umbrage", definition: "offense, annoyance, displeasure or resentment, usually as a result of a real or supposed slight or insult"},
			{word: "vicarious", definition: "experienced through another person or related to someone else's experiences, usually in a way that is pleasurable"},
			{word: "zealous", definition: "enthusiastic or passionate about something"},
		];

		let currentWordIndex = Math.floor(Math.random() * gameWords.length);
		let currentWord = gameWords[currentWordIndex];
		let currentWordLength = currentWord.word.length;
		let currentHintIndex = 0;
		let correctAnswer = false;

		// Display the definition of the word
		document.getElementById("definition").innerHTML = currentWord.definition;

		// Function to check if the answer is correct
		function checkAnswer() {
			let answer = document.getElementById("answer").value.toLowerCase();
			if (answer === currentWord.word) {
				alert("Congratulations, you got it right!");
				correctAnswer = true;
			} else {
				alert("Sorry, that is not the correct answer. Please try again.");
			}
			document.getElementById("answer").value = "";
			if (correctAnswer === false) {
				displayHint();
			}
		}

		// Function to display the hints for the word
		function displayHint() {
			if (currentHintIndex < currentWordLength) {
				let hint = currentWord.word.substring(0, currentHintIndex);
				for (let i = currentHintIndex; i < currentWordLength; i++) {
					hint += "●";
				}
				document.getElementById("answer").placeholder = hint;
				currentHintIndex++;
				setTimeout(displayHint, 4000);
			} else {
				alert("Sorry, you ran out of hints. The correct answer is " + currentWord.word);
			}
		}
	</script>
</body>
</html>

この記事が気に入ったらサポートをしてみませんか？