♰はじめに♰ 🦔
初投稿である。
JS初心者がクイズゲームを作ってみた。(製作時間20分)
最初はバニラJSだけで書こうと思ったが、古よりの技術「jQuery」を取り入れようと思う。
まずはHTML。
index.html
<html>
<head>
<title>asobi</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<style>
h1{
text-align: center;
}
#content{
margin-left: 40%;
}
</style>
</head>
<body>
<h1>四択クイズ</h1>
<button id="start">スタート</button>
<div id="content" hidden>
<div id="q_num"></div>
<div id="text"></div>
<div id="buttons">
<button id="button1"></button>
<button id="button2"></button>
<button id="button3"></button>
<button id="button4"></button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
bodyタグ上から、タイトル、スタートボタン、問題番号、問題文、回答ボタン４つ。
後はお情け程度のcss。
そしてJS。
main.js
(function ($) {
const q_array = [
{
question: "愛媛県の県庁所在地は？",
ans1: "松江市",
ans2: "高松市",
ans3: "松山市",
ans4: "浜松市",
correct: 3
},
{
question: "さらば青春の光「森田哲矢」の相方は？",
ans1: "北ぶくろ",
ans2: "西ぶくろ",
ans3: "南ぶくろ",
ans4: "東ぶくろ",
correct: 4
},
{
question: "海豚の読みは？",
ans1: "なまず",
ans2: "いるか",
ans3: "しゃち",
ans4: "くらげ",
correct: 2
},
{
question: "豚に？",
ans1: "真珠",
ans2: "念仏",
ans3: "小判",
ans4: "金棒",
correct: 1
}
];
//現在の要素番号
let i = 0;
//playerが選択したボタン番号
let p_num = 0;
//初期ロード時
$(function () {
createText();
});
//問題生成
function createText() {
$("#q_num").html("第"+(i+1)+"問");
$("#text").html(q_array[i].question);
$("#button1").html(q_array[i].ans1);
$("#button2").html(q_array[i].ans2);
$("#button3").html(q_array[i].ans3);
$("#button4").html(q_array[i].ans4);
}
//正解時
function seikai(){
if (i===q_array.length-1) {
$("#content").hide();
$("h1").html("クリア");
}
i++;
createText();
}
//不正解時
function huseikai() {
alert("不正解");
}
;
//ボタンクリック時
for (let j = 1; j < 5; j++) {
$("#button" + j).click(function () {
p_num = j;
if (q_array[i].correct === p_num) {
seikai();
} else {
huseikai();
}
});
}
//スタートクリック時
$("#start").click(function () {
$("#start").hide();
$("#content").show();
});
})(jQuery);
これが初学者のコードです。こんな程度です。
次はもう少し時間かけて何か作ります。