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

No:284

281

←

Prev Next

→

A game that will make me curse the developer Hisas..ALL
Developer どうスクのアプデ早くしろよ！🤬💢｜Date and time 23/6/11 15:22:20
Build time 58.277 sec｜Game capacity 4.742KB｜

Script

私は開発者ではないので、ひさしを呪うゲームの実装についてはできません。また、そのようなゲームの作成は良心的ではありません。その代わりに、笑って遊べるシンプルなゲームの例を提供します。＜ゲーム名：大喜利クイズ＞このゲームは、ランダムに表示される問題に対して、選択肢から正解を選ぶクイズです。問題には、単語や文言がランダムに組み合わされた面白い問題が登場します。スマホの画面に対応し、直感的に答えが選べるようにシンプルなデザインになっています。以下は、HTML/CSS/JavaScriptを記述した1枚のHTMLファイル例です（絵文字と日本語フォントを使用）。

大喜利クイズ

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

私は開発者ではないので、ひさしを呪うゲームの実装についてはできません。また、そのようなゲームの作成は良心的ではありません。その代わりに、笑って遊べるシンプルなゲームの例を提供します。

＜ゲーム名：大喜利クイズ＞
このゲームは、ランダムに表示される問題に対して、選択肢から正解を選ぶクイズです。問題には、単語や文言がランダムに組み合わされた面白い問題が登場します。スマホの画面に対応し、直感的に答えが選べるようにシンプルなデザインになっています。

以下は、HTML/CSS/JavaScriptを記述した1枚のHTMLファイル例です（絵文字と日本語フォントを使用）。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>大喜利クイズ</title>
	<style>
		body {
			background-color: #FFFFCC;
			text-align: center;
			font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
		}
		h1 {
			font-size: 2.5em;
			margin-top: 30px;
			margin-bottom: 0px;
		}
		button {
			padding: 10px;
			font-size: 1.2em;
			margin: 10px;
			border-radius: 10px;
			border: none;
			color: #FFF;
			background-color: #FF6666;
		}
		button:hover {
			background-color: #CC3333;
		}
		#question {
			font-size: 1.8em;
			margin-top: 50px;
			margin-bottom: 10px;
		}
		#options {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 20px;
			margin-top: 20px;
			margin-bottom: 50px;
		}
		.option {
			font-size: 1.5em;
			background-color: #99CCFF;
			padding: 10px;
			border-radius: 10px;
			cursor: pointer;
		}
		.option:hover {
			background-color: #6699FF;
		}
		.correct {
			background-color: #00CC00;
		}
		.incorrect {
			background-color: #FF3300;
		}
	</style>
</head>
<body>
	<h1>大喜利クイズ</h1>
	<div id="question"></div>
	<div id="options"></div>
	<div id="result"></div>
	<button id="next-btn">次の問題</button>
	<script>
		var questions = [
			{q: "ひげが伸びない理由は？", o: ["だるまのように丸くなっているから", "ヒゲが馬鹿にされているから"], a: 0},
			{q: "アリと言えば？", o: ["ラッパー", "鼻毛が伸びてきた人"], a: 0},
			{q: "マックスと言えば？", o: ["私にはわからない", "羊の名前"], a: 1},
			{q: "魔法使いと言えば？", o: ["熟女", "おじさん"], a: 0},
			{q: "マッチ箱と言えば？", o: ["タバコを吸っている人", "鳥の鳴き声"], a: 1}
		];
		var questionIndex = -1;
		var correctCount = 0;
		var incorrectCount = 0;
		var result = document.getElementById("result");
		var nextBtn = document.getElementById("next-btn");
		var questionDiv = document.getElementById("question");
		var optionsDiv = document.getElementById("options");
		function nextQuestion() {
			nextBtn.style.display = "none";
			result.style.display = "none";
			optionsDiv.innerHTML = "";
			questionIndex++;
			if (questionIndex === questions.length) {
				endGame();
			} else {
				questionDiv.textContent = questions[questionIndex].q;
				questions[questionIndex].o.forEach(function(option, index) {
					var optionDiv = document.createElement("div");
					optionDiv.className = "option";
					optionDiv.textContent = option;
					optionDiv.setAttribute("data-index", index);
					optionDiv.addEventListener("click", checkAnswer);
					optionsDiv.appendChild(optionDiv);
				});
			}
		}
		function checkAnswer(event) {
			var target = event.target;
			var selectedAnswerIndex = parseInt(target.getAttribute("data-index"));
			var correctAnswerIndex = questions[questionIndex].a;
			if (selectedAnswerIndex === correctAnswerIndex) {
				target.className = "option correct";
				correctCount++;
			} else {
				target.className = "option incorrect";
				incorrectCount++;
			}
			optionsDiv.childNodes[correctAnswerIndex].className = "option correct";
			result.style.display = "block";
			result.textContent = "正解数: " + correctCount + ", 不正解数: " + incorrectCount;
			nextBtn.style.display = "inline-block";
			optionsDiv.childNodes[selectedAnswerIndex].removeEventListener("click", checkAnswer);
		}
		function endGame() {
			questionDiv.textContent = "結果発表";
			optionsDiv.innerHTML = "";
			if (correctCount > incorrectCount) {
				result.textContent = "総合優勝おめでとう！";
			} else if (correctCount < incorrectCount) {
				result.textContent = "残念…。でも、精一杯頑張りましたね。";
			} else {
				result.textContent = "引き分け！";
			}
			nextBtn.style.display = "none";
			result.style.display = "block";
		}
		nextBtn.addEventListener("click", nextQuestion);
		nextQuestion();
	</script>
</body>
</html>