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

No:3378

1015

←

Prev Next

→

早くアプデしろよ！🤬💢早くアプデしろよ！🤬💢 早くアプデしろよ！🤬💢早くアプデしろよ！🤬💢 早く..ALL
Developer どうスクのアプデ早くしろよ！🤬💢｜Date and time 23/6/24 18:32:34
Build time 46.354 sec｜Game capacity 4.046KB｜

Script

として遊べるアプリを作りましょう！以下は、例として早押しクイズゲームを実装するプログラムです。

早押しクイズ

Score: 0

このプログラムは、4問のクイズを用意し、スコアを表示する早押しクイズゲームを実装しています。スマートフォンでも操作可能で、クイズの問題と選択肢が顕示され、選択肢をクリックすると正誤判定が行われます。正答するとスコアが加算され、次の問題に進みます。全問終了すると、最終スコアがアラートで表示されます。また、レスポンシブデザインを採用しており、画面幅に応じてレイアウトが変化します。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

として遊べるアプリを作りましょう！以下は、例として早押しクイズゲームを実装するプログラムです。

<!DOCTYPE html>
<html>
<head>
	<title>早押しクイズ</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			text-align: center;
			background-color: #f7d5b8;
		}
		
		h1 {
			margin: 20px;
			font-size: 40px;
			color: #003c71;
		}
		
		#question {
			margin: 0 auto;
			padding: 50px;
			background-color: #ffffff;
			border: 5px solid #003c71;
			border-radius: 20px;
			width: 80%;
			max-width: 600px;
			font-size: 30px;
			color: #003c71;
		}
		
		#buttons {
			margin: 20px auto;
			display: flex;
			flex-wrap: wrap;
			max-width: 600px;
		}
		
		.button {
			margin: 5px;
			padding: 10px 20px;
			background-color: #003c71;
			border: none;
			border-radius: 5px;
			color: #ffffff;
			font-size: 20px;
			cursor: pointer;
			-webkit-tap-highlight-color: transparent;
		}
		
		.correct {
			background-color: #28a745;
		}
		
		.incorrect {
			background-color: #dc3545;
		}
		
		#score {
			margin: 20px;
			font-size: 30px;
			color: #003c71;
		}
	</style>
</head>
<body>
	<h1>早押しクイズ</h1>
	<div id="question"></div>
	<div id="buttons"></div>
	<div id="score">Score: 0</div>
	
	<script>
		var questions = [
			{
				question: "日本で最初のコンビニはどこ？",
				choices: ["サークルK", "ローソン", "ファミリーマート"],
				answer: 1
			},
			{
				question: "ラグビーワールドカップ2019年大会の開催国は？",
				choices: ["日本", "アメリカ", "イギリス"],
				answer: 0
			},
			{
				question: "LGBTの略称で使われないものは？",
				choices: ["レズビアン", "ゲイ", "バイオリニスト"],
				answer: 2
			},
			{
				question: "「目からウロコ」を授けた人物といえば？",
				choices: ["ジョン万次郎", "聖徳太子", "ポール・マッカートニー"],
				answer: 1
			}
		];
		
		var currentQuestion = 0;
		var score = 0;
		
		var questionElem = document.getElementById("question");
		var buttonsElem = document.getElementById("buttons");
		var scoreElem = document.getElementById("score");
		
		function showQuestion() {
			questionElem.textContent = questions[currentQuestion].question;
			buttonsElem.innerHTML = "";
			for (var i = 0; i < questions[currentQuestion].choices.length; i++) {
				var choice = questions[currentQuestion].choices[i];
				var button = document.createElement("button");
				button.textContent = choice;
				button.classList.add("button");
				button.addEventListener("click", checkAnswer);
				buttonsElem.appendChild(button);
			}
		}
		
		function checkAnswer(event) {
			var selectedAnswer = event.target.textContent;
			var correctAnswer = questions[currentQuestion].choices[questions[currentQuestion].answer];
			if (selectedAnswer === correctAnswer) {
				event.target.classList.add("correct");
				score++;
			} else {
				event.target.classList.add("incorrect");
			}
			scoreElem.textContent = "Score: " + score;
			currentQuestion++;
			if (currentQuestion < questions.length) {
				setTimeout(showQuestion, 1000);
			} else {
				showResult();
			}
		}
		
		function showResult() {
			alert("終了！あなたのスコアは " + score + " 点です！");
			location.reload();
		}
		
		showQuestion();
	</script>
</body>
</html>