【JavaScript】初心者が1から作る！数字当てゲームを少しゲームらしく改良！最初から・続きから・スコア確認を追加
こんにちは！今回は、前回作った数字当てゲームを、少しゲームらしく改良していきます。
前回は、数字を入力して当てるだけのシンプルなゲームでした。
今回はそこに、「最初から」「続きから」「スコア確認」のメニューを追加して、ゲームっぽい見た目にしていきます。
HTMLで画面を作って、CSSで見た目を整えて、JavaScriptで動きをつけます。
この記事でやること
メニュー画面を作ってみよう
今回のポイントは、ゲームの最初にメニュー画面を作ることです。
いきなりゲームが始まるのではなく、最初にボタンを表示します。
- 最初から：新しくゲームを始める
- 続きから：前の状態から再開する
- スコア確認：これまでの結果を見る
初心者向けに言うと、ゲームの入口を作る感じです。
メニューがあるだけで、かなりゲームっぽく見えます。
前回の数字当てゲームに追加する内容
今回追加するのは、主にこの3つです。
- メニュー画面
- ゲーム画面
- スコア画面
画面を分けることで、「今どこを見ているのか」がわかりやすくなります。
さらに、ボタンを押すと画面が切り替わるので、ただの練習コードよりもゲームらしくなります。
コードを貼る前に知っておくこと
この記事では、コードを見やすく表示するために <pre><code> を使っています。
<pre><code> の中に入れたコードは、記事の中で「コードとして見せるため」のものです。
実際にゲームとして動かしたい場合は、下の完成コードをコピーして、index.html というファイルに貼ってください。
コードの中にあるメモについて
コードの中には、説明用のメモを書くことがあります。
// から始まる行 や /* */、<!-- --> は説明メモです。
読者が丸ごとコピーしても、基本的には画面に表示されません。
「この部分は何をしているのか」をわかりやすくするためのメモだと思ってください。
コードを貼る場所
今回のコードを動かしたい場合は、index.html というファイルを作って、その中に完成コードを全部貼ります。
パソコンで試す場合は、VS Codeなどで index.html を作り、ブラウザで開けばゲームを確認できます。
記事の中でコードを見せる場合は、<pre><code> の中に入れます。
ゲームとして動かす場合は、<pre><code> は使わず、完成コードだけをそのまま貼ります。
つまり、この記事のコード部分は「読者に見せるための表示」です。
実際に動かすときは、完成コードをコピーして、パソコン側で作った index.html に貼って使ってください。
Bloggerの記事内では、コードは「見せるため」に表示しています。ゲームとしてしっかり試す場合は、まず自分のパソコンで index.html を作って動かすのがおすすめです。
コピペ用の完成コード
ここから下が、今回の完成コードです。
今回は、HTML・CSS・JavaScriptを1つのファイルにまとめています。
そのため、index.html というファイルを1つ作って、そこに全部コピーして貼れば動かせます。
このコードは何をしているの？
簡単に言うと、数字当てゲームの画面・見た目・動きをまとめて作っています。
- HTML：ボタン、入力欄、メニュー画面などを作る
- CSS：背景色、カードの形、文字の大きさ、ボタンの見た目を整える
- JavaScript：数字を判定したり、画面を切り替えたり、スコアを保存する
つまり、このコードを使うと、メニューつきの数字当てゲームを作ることができます。
CSSではゲーム画面の見た目を整えています
コードの中にある .game-container や .game-card は、ゲーム画面の見た目を整えるためのCSSです。
.game-container は、ゲーム全体を入れる大きな箱です。
画面の幅を広げすぎないようにしたり、中央に表示したり、まわりに余白を作ったりしています。
.game-card は、白いカードのようなゲーム画面を作る部分です。
背景を白くして、角を丸くして、影をつけることで、少しゲーム画面っぽく見えるようにしています。
初心者向けに言うと、CSSはゲームの見た目担当です。
HTMLで置いたボタンや文字を、CSSできれいに整えています。
同じゲームでも、CSSを入れるだけで「ただの文字」から「ゲーム画面っぽい見た目」に変わります。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字化けしにくくする設定です -->
<meta charset="UTF-8" />
<!-- スマホでも見やすくするための設定です -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ブラウザのタブに表示されるタイトルです -->
<title>数字当てゲーム</title>
<!-- ここから下は、ゲームの見た目を作るCSSです -->
<style>
/* ページ全体の基本設定です */
body {
margin: 0;
font-family: Arial, sans-serif;
background: #eef2ff;
color: #222;
}
/* ゲーム全体を入れる大きな箱です */
.game-container {
max-width: 520px;
margin: 40px auto;
padding: 20px;
}
/* 白いカードのようなゲーム画面を作る部分です */
.game-card {
background: #ffffff;
border-radius: 18px;
padding: 24px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
text-align: center;
}
/* 一番大きいタイトルの見た目です */
h1 {
color: #1f2937;
font-size: 28px;
margin-bottom: 10px;
}
/* 画面ごとの見出しの見た目です */
h2 {
color: #374151;
font-size: 22px;
margin-bottom: 16px;
}
/* 文章を読みやすくする設定です */
p {
line-height: 1.7;
}
/* ボタンを縦に並べるための設定です */
.menu-buttons {
display: grid;
gap: 12px;
margin-top: 20px;
}
/* ボタンの基本デザインです */
button {
border: none;
border-radius: 999px;
padding: 12px 18px;
font-size: 16px;
cursor: pointer;
background: #4f46e5;
color: white;
transition: 0.2s;
}
/* ボタンにマウスを乗せたときの動きです */
button:hover {
opacity: 0.85;
transform: translateY(-1px);
}
/* メニューに戻るボタンなどに使う色です */
.sub-button {
background: #6b7280;
}
/* スコア確認ボタンに使う色です */
.score-button {
background: #f97316;
}
/* 数字を入力する場所の見た目です */
input {
width: 90%;
max-width: 260px;
padding: 12px;
font-size: 16px;
border: 2px solid #c7d2fe;
border-radius: 12px;
text-align: center;
margin: 12px 0;
}
/* 正解・不正解などのメッセージ部分です */
.message {
font-weight: bold;
margin-top: 16px;
color: #111827;
}
/* 挑戦回数など、小さめの文字に使います */
.small-text {
color: #555;
font-size: 14px;
}
/* 画面を最初は非表示にする設定です */
.screen {
display: none;
}
/* 表示したい画面だけ見せるための設定です */
.active {
display: block;
}
/* スコア画面の白い箱です */
.score-box {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 14px;
margin: 12px 0;
text-align: left;
}
</style>
</head>
<body>
<!-- ゲーム全体を入れる場所です -->
<div class="game-container">
<!-- 白いカード型のゲーム画面です -->
<div class="game-card">
<!-- 最初に表示されるメニュー画面です -->
<div id="menuScreen" class="screen active">
<h1>数字当てゲーム</h1>
<p>1〜10の数字を当てるゲームです。</p>
<div class="menu-buttons">
<button onclick="startNewGame()">最初から</button>
<button class="sub-button" onclick="continueGame()">続きから</button>
<button class="score-button" onclick="showScore()">スコア確認</button>
</div>
</div>
<!-- 数字を入力して遊ぶゲーム画面です -->
<div id="gameScreen" class="screen">
<h2>ゲーム画面</h2>
<p>1〜10の数字を入力してください。</p>
<input type="number" id="userGuess" min="1" max="10" placeholder="数字を入力" />
<div class="menu-buttons">
<button onclick="checkAnswer()">答える</button>
<button class="sub-button" onclick="backToMenu()">メニューに戻る</button>
</div>
<p id="message" class="message"></p>
<p id="tryCountText" class="small-text"></p>
</div>
<!-- クリア回数などを見るスコア画面です -->
<div id="scoreScreen" class="screen">
<h2>スコア確認</h2>
<div class="score-box">
<p id="clearCount">クリア回数：0回</p>
<p id="lastTryCount">前回の挑戦回数：なし</p>
</div>
<div class="menu-buttons">
<button class="sub-button" onclick="backToMenu()">メニューに戻る</button>
<button onclick="resetScore()">スコアをリセット</button>
</div>
</div>
</div>
</div>
<!-- ここから下は、ゲームを動かすJavaScriptです -->
<script>
// 正解の数字を入れるための箱です
let answer = 0;
// 何回挑戦したかを数えるための箱です
let tryCount = 0;
// 表示する画面を切り替えるための関数です
function showScreen(screenId) {
document.getElementById("menuScreen").classList.remove("active");
document.getElementById("gameScreen").classList.remove("active");
document.getElementById("scoreScreen").classList.remove("active");
document.getElementById(screenId).classList.add("active");
}
// 「最初から」を押したときに動く関数です
function startNewGame() {
answer = Math.floor(Math.random() * 10) + 1;
tryCount = 0;
localStorage.setItem("answer", answer);
localStorage.setItem("tryCount", tryCount);
document.getElementById("userGuess").value = "";
document.getElementById("message").textContent = "";
document.getElementById("tryCountText").textContent = "挑戦回数：0回";
showScreen("gameScreen");
}
// 「続きから」を押したときに動く関数です
function continueGame() {
const savedAnswer = localStorage.getItem("answer");
const savedTryCount = localStorage.getItem("tryCount");
if (savedAnswer === null) {
alert("続きから始めるデータがありません。最初から始めてください。");
return;
}
answer = Number(savedAnswer);
tryCount = Number(savedTryCount);
document.getElementById("userGuess").value = "";
document.getElementById("message").textContent = "続きから再開しました。";
document.getElementById("tryCountText").textContent = "挑戦回数：" + tryCount + "回";
showScreen("gameScreen");
}
// 入力した数字が正解かどうかを確認する関数です
function checkAnswer() {
const userGuess = Number(document.getElementById("userGuess").value);
const message = document.getElementById("message");
if (userGuess < 1 || userGuess > 10 || userGuess === 0) {
message.textContent = "1〜10の数字を入力してください。";
return;
}
tryCount++;
localStorage.setItem("tryCount", tryCount);
if (userGuess === answer) {
message.textContent = "正解です！" + tryCount + "回で当たりました！";
let clearCount = Number(localStorage.getItem("clearCount")) || 0;
clearCount++;
localStorage.setItem("clearCount", clearCount);
localStorage.setItem("lastTryCount", tryCount);
localStorage.removeItem("answer");
localStorage.removeItem("tryCount");
} else if (userGuess < answer) {
message.textContent = "もっと大きい数字です。";
} else {
message.textContent = "もっと小さい数字です。";
}
document.getElementById("tryCountText").textContent = "挑戦回数：" + tryCount + "回";
}
// スコア画面を表示する関数です
function showScore() {
const clearCount = Number(localStorage.getItem("clearCount")) || 0;
const lastTryCount = localStorage.getItem("lastTryCount");
document.getElementById("clearCount").textContent = "クリア回数：" + clearCount + "回";
if (lastTryCount === null) {
document.getElementById("lastTryCount").textContent = "前回の挑戦回数：なし";
} else {
document.getElementById("lastTryCount").textContent = "前回の挑戦回数：" + lastTryCount + "回";
}
showScreen("scoreScreen");
}
// 保存したスコアを消す関数です
function resetScore() {
localStorage.removeItem("clearCount");
localStorage.removeItem("lastTryCount");
localStorage.removeItem("answer");
localStorage.removeItem("tryCount");
document.getElementById("clearCount").textContent = "クリア回数：0回";
document.getElementById("lastTryCount").textContent = "前回の挑戦回数：なし";
alert("スコアをリセットしました。");
}
// メニュー画面に戻るための関数です
function backToMenu() {
showScreen("menuScreen");
}
</script>
</body>
</html>今回はなぜ index.html にまとめたの？
今回は、コードをコピーしてすぐに試しやすくするために、HTML・CSS・JavaScriptを index.html にまとめています。
これまでのように、HTML・CSS・JavaScriptを3つのファイルに分けても作れます。
ただ今回は、メニュー画面・続きから始める機能・スコア確認など、前回よりもコードが少し長くなっています。
そのため、最初から3つのファイルに分けると、「このコードはどこに貼るの？」と迷いやすくなります。
なので今回は、まずゲームを動かすことを優先して、1つの index.html にまとめました。
つまり、ファイルを分ける作り方が間違いという意味ではありません。
今回は初心者でもコピペして試しやすいように、あえて1つのファイルにまとめています。
慣れてきたら、同じコードを index.html、style.css、script.js に分けることもできます。
開発者を目指すなら、ここも大事です。
プログラミングでは、ただ動けばいいだけではなく、コードを短く・わかりやすく・きれいに整理することも大切です。
コードが長すぎたり、ごちゃごちゃしていると、あとから直すときに自分でもわからなくなりやすいからです。
初心者のうちは、まず動かすことが大事です。
その次に、「もっと短くできないかな？」「もっと見やすくできないかな？」「同じことをもっときれいに書けないかな？」と考えると、少しずつ開発者らしい考え方に近づいていきます。
今回のゲームを作ってみて、「HTMLやCSS、JavaScriptをもう少し学んでみたい」と感じた人向けに、学習サービスも紹介しておきます。
【広告/PR】
HTMLやCSS、JavaScriptを基礎から学びたい人向け
今回のようなゲーム作りを通して、「コードの意味をもう少しちゃんと知りたい」と思った人向けに、初心者でも学びやすいオンライン講座を紹介しています。
今回のゲームで使っているもの
今回のゲームでは、HTML・CSS・JavaScriptを使っています。
- HTML：ボタンや入力欄など、画面の部品を作る
- CSS：色や余白など、見た目を整える
- JavaScript：ボタンを押した時の動きや、数字判定を作る
この3つを組み合わせると、今回のような簡単なゲームを作れるようになります。
今回のまとめ
今回は、前回の数字当てゲームにメニュー画面を追加しました。
「最初から」「続きから」「スコア確認」があるだけで、ゲームらしさがかなり出ます。
また、HTMLで画面を作り、CSSで見た目を整え、JavaScriptで動きをつける流れも確認できました。
今回のコードは少し長めですが、1つずつ見るとやっていることはシンプルです。
最初から全部理解できなくても大丈夫です。まずはコピーして動かして、「ボタンを押すと画面が変わる」「数字を入れると答えが返ってくる」という動きを見てみてください。
自分の手でゲームが動くと、HTML・CSS・JavaScriptがただの文字ではなく、ちゃんと画面を作る道具だとわかりやすくなります。
少しずつ改造して、自分だけの数字当てゲームにしていきましょう！
ここまで読んでくださり、ありがとうございました！
今回は、数字当てゲームにメニュー画面を追加して、少しゲームらしい形にできました。
小さなゲームでも、自分で動かせるようになるとプログラミングはかなり楽しくなります。
次回も、初心者でも試しやすい形で少しずつ改良していきます。
コメント
コメントを投稿