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

No:1547

1625

Word Puzzle
Developer AI絵師｜Date and time 23/6/18 18:27:16
Build time 48.111 sec｜Game capacity 4.313KB｜

ことばのパズル

スコア: 0

上記のプログラムは「ことばのパズル」というタイトルの、単語を並び替えて完成させるゲームです。画面上部には「ことばのパズル」というタイトルが表示され、中央には単語が表示される枠があります。スマホでプレイすることを前提に、ボタンのサイズが大きめに設定されており、絵文字も多用されています。プログラムは1つのHTMLファイルにまとめられ、JavaScriptも含んでいます。ゲームのルールは、スタートボタンをクリックすると表示される単語を並び替えて完成させることです。単語は10種類用意されています。単語を完成させたら、次の単語が表示され、全ての単語を完成させたらゲームクリアです。キーボードを使ってプレイすることを前提に、表示された文字と同じ文字を入力することで、単語を完成させることができます。入力された単語が正しい場合は、スコアが加算されます。全ての単語を完成させる前に、誤った単語が入力された場合は「はずれです。」とアラートが表示されます。全ての単語を完成させた場合は、ゲーム終了後にスコアが表示されます。また、ゲームを最初からやり直す場合は、ページをリロードする必要があります。

→ 　

0　

0　

　

　
　
　

[PR]現在の売れ筋グッズランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ことばのパズル</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			text-align: center;
			color: #333;
			background-color: #eee;
		}
		h1 {
			margin-top: 50px;
		}
		#container {
			margin-top: 50px;
		}
		button {
			background-color: #4CAF50;
			border: none;
			color: white;
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 4px 2px;
			cursor: pointer;
		}
		#score {
			font-size: 24px;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<h1>ことばのパズル</h1>
	<div id="container"></div>
	<button id="startButton">スタート</button>
	<div id="score">スコア: 0</div>

<script>
		const words = ['りんご', 'バナナ', 'ぶどう', 'オレンジ', 'キウイ', 'パイナップル', 'レモン', 'メロン', 'イチゴ', 'マンゴー'];
		let shuffledWords, wordIndex, score;

function shuffle(array) {
		  let currentIndex = array.length;
		  let temporaryValue, randomIndex;
		  while (0 !== currentIndex) {
		    randomIndex = Math.floor(Math.random() * currentIndex);
		    currentIndex -= 1;
		    temporaryValue = array[currentIndex];
		    array[currentIndex] = array[randomIndex];
		    array[randomIndex] = temporaryValue;
		  }
		  return array;
		}

function displayWord() {
			const word = shuffledWords[wordIndex];
			const letters = word.split('');
			let html = '';
			for (let i = 0; i < letters.length; i++) {
				html += `<div>${letters[i]}</div>`;
			}
			document.getElementById('container').innerHTML = html;
		}

function nextWord() {
			wordIndex++;
			if (wordIndex >= shuffledWords.length) {
				endGame();
			} else {
				displayWord();
			}
		}

function checkAnswer(userAnswer) {
			const word = shuffledWords[wordIndex];
			if (userAnswer === word) {
				score++;
				document.getElementById('score').innerHTML = `スコア: ${score}`;
				nextWord();
			} else {
				alert('はずれです。');
			}
		}

function endGame() {
			alert(`ゲーム終了。スコアは${score}です。`);
			location.reload();
		}

document.getElementById('startButton').addEventListener('click', function() {
			shuffledWords = shuffle(words);
			wordIndex = 0;
			score = 0;
			displayWord();
		});

document.addEventListener('keydown', function(event) {
			if (event.keyCode >= 65 && event.keyCode <= 90) {
				const letter = event.key.toUpperCase();
				const currentDiv = document.querySelector('#container > div:first-child');
				if (letter === currentDiv.textContent) {
					currentDiv.remove();
					if (document.getElementById('container').childElementCount === 0) {
						const userAnswer = shuffledWords[wordIndex];
						checkAnswer(userAnswer);
					}
				}
			}
		});
	</script>
</body>
</html>

上記のプログラムは「ことばのパズル」というタイトルの、単語を並び替えて完成させるゲームです。画面上部には「ことばのパズル」というタイトルが表示され、中央には単語が表示される枠があります。スマホでプレイすることを前提に、ボタンのサイズが大きめに設定されており、絵文字も多用されています。プログラムは1つのHTMLファイルにまとめられ、JavaScriptも含んでいます。

ゲームのルールは、スタートボタンをクリックすると表示される単語を並び替えて完成させることです。単語は10種類用意されています。単語を完成させたら、次の単語が表示され、全ての単語を完成させたらゲームクリアです。キーボードを使ってプレイすることを前提に、表示された文字と同じ文字を入力することで、単語を完成させることができます。入力された単語が正しい場合は、スコアが加算されます。全ての単語を完成させる前に、誤った単語が入力された場合は「はずれです。」とアラートが表示されます。全ての単語を完成させた場合は、ゲーム終了後にスコアが表示されます。また、ゲームを最初からやり直す場合は、ページをリロードする必要があります。