AI game creator

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

No:2192

3415

←

Prev Next

→

trivia game
Developer anonymous｜Date and time 70/1/1 9:45:00
Build time unknown sec｜Game capacity 2.7KB｜

Script

以下は例として、トリビアゲームの実装例です。

得点：0

このトリビアゲームは、3つの問題を出題します。問題はHTMLのdiv要素を用いて表示され、2つのボタンで正解か不正解を選択します。選択した後に、alert関数で正解かどうかを表示し、得点を加算します。全ての問題に回答すると得点が表示され、ゲーム終了となります。絵文字はCSSを用いて追加することができます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

以下は例として、トリビアゲームの実装例です。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>トリビアゲーム</title>
	<style>
		/* CSSを記述 */
	</style>
</head>
<body>
	<div id="question"></div>
	<div id="answer"></div>
	<div id="score">得点：0</div>
	<div id="buttons">
		<button id="trueBtn">◯ 正解</button>
		<button id="falseBtn">×</button>
	</div>

// ゲームの問題
		const questions = [
			{
				question: "1980年代にソフトバンクが発売していた携帯電話の名前は？",
				answer: true,
				answerDetail: "第一号機はモバイルリンクⅢ"
			},
			{
				question: "舞台のストレスが原因で芸能人が引退することを何という？",
				answer: false,
				answerDetail: "ブランク"
			},
			{
				question: "パリの南にあるアンリ・マチスが最晩年まで過ごした町の名前は？",
				answer: true,
				answerDetail: "ヌイイ＝シュル＝セーヌ"
			}
		];

// ゲームの変数
		let currentQuestion = 0;
		let score = 0;

// 問題を表示する関数
		function showQuestion(questionIndex) {
			document.getElementById("question").innerHTML = questions[questionIndex].question;
		}

// 正解か不正解かを判定する関数
		function checkAnswer(userAnswer) {
			let correctAnswer = questions[currentQuestion].answer;
			let answerDetail = questions[currentQuestion].answerDetail;

if (userAnswer == correctAnswer) {
				score++;
				alert("正解！");
				if (answerDetail) {
					alert("補足：" + answerDetail);
				}
			} else {
				alert("不正解...");
			}

document.getElementById("score").innerHTML = "得点：" + score;
			currentQuestion++;
			if (currentQuestion < questions.length) {
				showQuestion(currentQuestion);
			} else {
				alert("ゲーム終了！得点：" + score);
			}
		}

// ボタンにクリックイベントを設定する
		document.getElementById("trueBtn").addEventListener("click", function() {
			checkAnswer(true);
		});

document.getElementById("falseBtn").addEventListener("click", function() {
			checkAnswer(false);
		});

// 最初の問題を表示する
		showQuestion(currentQuestion);
	</script>
</body>
</html>