はじめに
今回Qiitaの記事を書くにあたり、簡単なゲームを制作してみました。私が作成したのは「選択ゲーム」という、シンプルなルールのミニゲームです。
ゲームのルールはとても簡単で、複数の扉の画像から1つを選び、正解を引き当てると次のステップへ進むことができます。不正解を選んでしまうと最初からやり直しになります。
全部で５問あり、途中から２枚→３枚→４枚→５枚と増えていき、最終問題では５つの扉から正解を選ぶ必要があります。
このゲームは、去年にリリースされた1/8192というゲームを参考にして作りました。詳しくはこちら：1/8192について
以下が完成した画面になります。続けて、不正解を選んだ場合と正解を選んだ場合の画面も掲載しています。
完成画像： 
間違ったドアを選択した場合： 
正解のドアを選択した場合：
プログラム
以下のコードが今回制作したゲームのコードです。
HTML
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>選択ゲーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>選択ゲーム</h1>
<p>どちらかの扉をクリックして進もう！</p>
<div id="info">ステップ：0</div>
<div id="doors"></div>
<p id="message"></p>
<button id="nextBtn" style="display:none;">(次へ進む)</button>
<button id="restartBtn" style="display:none;">(最初に戻る)</button>
<script src="main.js"></script>
</body>
</html>
CSS
style.css
body {
background-image: url("/Lesson59/img/simple-doorwall.png");
margin: 0;
padding: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
color: white;
text-align: center;
font-family: sans-serif;
padding: 50px;
}
#doors img {
width: 400px;
margin: 30px;
cursor: pointer;
border-radius: 6px;
}
#message {
font-size: 20px;
margin-top: 20px;
}
button {
padding: 10px 20px;
font-size: 18px;
margin: 10px;
}
JavaScript
main.js
//ステップ数とゴールまでの問題数を設定
let step = 0;
let goal = 5;
// ステップによって扉の数を変える
function getDoorCount() {
if (step >= 5) return 5;
if (step >= 3) return 4;
if (step >= 1) return 3;
return 2;
}
//扉を描画
function drawDoors() {
const container = document.getElementById("doors");
container.innerHTML = "";
const doorCount = getDoorCount();
for (let i = 0; i < doorCount; i++) {
const img = document.createElement("img");
img.src = "img/simple-door13.jpg";
img.alt = `扉 ${i + 1}`;
img.onclick = () => chooseDoor(i);
container.appendChild(img);
}
}
// 扉を選択したとき
function chooseDoor(selected) {
const doorCount = getDoorCount();
const correct = Math.floor(Math.random() * doorCount);
const message = document.getElementById("message");
const nextBtn = document.getElementById("nextBtn");
const restartBtn = document.getElementById("restartBtn");
nextBtn.style.display = "none";
restartBtn.style.display = "none";
if (selected === correct) {
message.textContent = "正解！";
nextBtn.style.display = "inline-block";
} else {
message.textContent = "死んでしまった… ";
restartBtn.style.display = "inline-block";
}
document.getElementById("doors").innerHTML = "";
}
// 正解 → 次へ
document.getElementById("nextBtn").onclick = function () {
step++;
updateInfo();
if (step >= goal) {
document.getElementById("message").textContent = "ゴール！！おめでとう！";
step = 0;
updateInfo();
} else {
document.getElementById("message").textContent = "";
}
document.getElementById("nextBtn").style.display = "none";
document.getElementById("restartBtn").style.display = "none";
drawDoors();
};
// 不正解 → 最初に戻る
document.getElementById("restartBtn").onclick = function () {
step = 0;
updateInfo();
document.getElementById("message").textContent = "";
document.getElementById("nextBtn").style.display = "none";
document.getElementById("restartBtn").style.display = "none";
drawDoors();
};
// ステップ表示
function updateInfo() {
document.getElementById("info").textContent = "ステップ：" + step;
}
// 初期化
updateInfo();
drawDoors();
終わりに
今回はJavaScriptの基礎的な構文を組み合わせてシンプルなゲームを作成しました。制作を通して、JavaScriptの理解を深められただけでなく、実際に手を動かすことで得られる気づきも多かったです。
当初の予定では１５問～２０問ほどを想定していましたが、乱数による仕様のため、テストプレイで最終問題まで到達しづらかったので、今回は５問に調整してみました。また、CSSにあまり力をいれなかったため扉のデザインが少し簡素になってしまった点は今後の改善点だと感じています。次に制作する際は、デザイン面にもこだわって作ってみたいと思います。
JavaScriptやCSSの中身で改善点等をコメントで教えていただけると嬉しいです。