「ボタンをクリックしたら数字が減っていく」という機能は、JavaScriptで簡単に実装できます。
この記事では、カウントダウン機能を使って、10連打ゲームを作る方法を書いています。
機能を最小限にしているので、ゲームと呼べるものではないですが、簡単なアプリを作れたら楽しいですよ。それでは作り方を確認していきましょう。
10連打ゲームを実際に動かしてみましょう
- 画面には、最初に「10」という数字と「PUSH」と書かれた赤いボタンが表示されます。
- 赤いボタンをクリックすると、数字が1ずつ減っていきます。
- 数字が0になると、数字と赤いボタンが非表示になり、メッセージとリセットボタンが表示されます。
- 表示されるメッセージはランダムに変わります。
- リセットボタンを押すと、数字とボタンが最初の状態（10とPUSH）に戻ります。
HTML：アプリの画面構造を作る
<body>
<div class="container">
<div id="countDown" class="countDown">
<p id="count" class="count"></p>
<button id="countBtn" class="countBtn">PUSH</button>
</div>
<div id="endScreen" class="endScreen hide">
<p id="endMsg" class="endMsg"></p>
<button id="resetBtn" class="resetBtn" disabled>リセット</button>
</div>
</div>
<script src="./app.js"></script>
</body>.containerは全体をまとめる枠です。#countDownには、現在の数字（#count）と「PUSH」ボタン（#countBtn）が含まれています。#endScreenには、結果のメッセージ（#endMsg）と「リセット」ボタン（#resetBtn）があり、最初は非表示かつ押せない状態になっています。<script src="./app.js">で、動作を制御するJavaScriptファイルを読み込んでいます。
CSS：見た目を整える
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 600px;
width: 100%;
height: 400px;
margin: 0 auto;
font-size: 18px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.countDown {
width: 100%;
}
.countDown.hide {
display: none;
}
.count {
font-size: 2.4em;
margin-bottom: 30px;
}
.countBtn {
display: inline-block;
width: 180px;
height: 180px;
margin: 0 auto;
border-radius: 50%;
font-size: 2.4em;
color: #ffffff;
background-color: #ff0000;
box-shadow: 1px 10px #800000;
cursor: pointer;
}
.countBtn:active {
box-shadow: 1px 5px #800000;
position: relative;
top: 5px;
}
.endScreen {
width: 100%;
}
.endScreen.hide {
display: none;
}
.endMsg {
margin-bottom: 30px;
font-size: 1.8em;
}
.resetBtn {
width: 60%;
margin: 0 auto;
padding: 10px;
font-size: 1.2em;
cursor: pointer;
background-color: #008000;
color: #fff;
border: none;
border-radius: 5px;
}
.resetBtn:hover {
background-color: #006400;
}
*で全ての要素の余白やパディングをリセットし、box-sizing: border-boxでサイズ計算を統一しています。.containerは全体の中央揃えと縦横のレイアウトを設定し、最大幅600px、高さ400pxにしています。.countDownと.endScreenは、それぞれ数字表示部分と終了画面部分の幅を指定し、.hideクラスで非表示にできます。.countは数字のフォントサイズと下の余白を設定しています。.countBtnは赤い丸いボタンのスタイルで、押したときに影と位置が変化するアクティブ効果があります。.endMsgは終了時に表示されるメッセージの文字サイズと下の余白を設定しています。.resetBtnは緑色のリセットボタンで、ホバー時に濃い緑に変わります。
全体として、中央に数字とボタンを配置し、終了画面とリセットボタンをきれいに表示するための基本スタイルです。
JavaScript：ボタンを押したときの動きを作る
const countDown = document.querySelector('#countDown');
const count = document.querySelector('#count');
const countBtn = document.querySelector('#countBtn');
const endScreen = document.querySelector('#endScreen');
const endMsg = document.querySelector('#endMsg');
const resetBtn = document.querySelector('#resetBtn');
let num = 10;
count.textContent = num;
const messages = ['おしまい', 'おわりだ', 'おつかれ', '速いね', '意味ないよ'];
countBtn.addEventListener('click', () => {
num--;
count.textContent = num;
if (num <= 0) {
num = 0;
count.textContent = num;
countBtn.textContent = '終了';
countBtn.disabled = true;
resetBtn.disabled = false;
let msgIndex = Math.floor(Math.random() * messages.length);
endMsg.textContent = messages[msgIndex];
countDown.classList.add('hide');
setTimeout(() => {
endScreen.classList.remove('hide');
}, 200);
}
});
function reset() {
num = 10;
count.textContent = num;
countBtn.textContent = 'PUSH';
countBtn.disabled = false;
resetBtn.disabled = true;
endScreen.classList.add('hide');
setTimeout(() => {
countDown.classList.remove('hide');
}, 200);
}
resetBtn.addEventListener('click', reset);
このJavaScriptは、ボタンを押すと数字が減っていき、0になったらメッセージを表示し、リセットできる簡単なカウントダウンアプリの動作を制御するコードです。順を追って説明します。
1. DOM要素の取得
const countDown = document.querySelector('#countDown');
const count = document.querySelector('#count');
const countBtn = document.querySelector('#countBtn');
const endScreen = document.querySelector('#endScreen');
const endMsg = document.querySelector('#endMsg');
const resetBtn = document.querySelector('#resetBtn');
- HTML内の各要素を変数に代入して操作できるようにしています。
#countDown→ 数字と押すボタンの部分#count→ 表示される数字#countBtn→ 「PUSH」ボタン#endScreen→ 終了後に表示するメッセージとリセットボタンの部分#endMsg→ ランダムで表示されるメッセージ#resetBtn→ リセットボタン
2. 初期設定
let num = 10;
count.textContent = num;
- カウントダウンの初期値を10に設定し、画面上の数字にも反映しています。
const messages = ['おしまい', 'おわりだ', 'おつかれ', '速いね', '意味ないよ'];
- カウントが0になったときにランダムで表示するメッセージを配列で用意しています。
3. 数字を減らす処理（クリックイベント）
countBtn.addEventListener('click', () => {
num--;
count.textContent = num;
if (num <= 0) {
num = 0;
count.textContent = num;
countBtn.textContent = '終了';
countBtn.disabled = true;
resetBtn.disabled = false;
let msgIndex = Math.floor(Math.random() * messages.length);
endMsg.textContent = messages[msgIndex];
countDown.classList.add('hide');
setTimeout(() => {
endScreen.classList.remove('hide');
}, 200);
}
});
詳細な流れ
- ボタンを押すたびに
numを1減らします。 - 減らした値を画面の数字に反映します。
numが0以下になった場合：numを0に固定して画面に表示します（負の値を防ぐ）。- ボタンの文字を「終了」に変え、押せなくします（
disabled = true）。 - リセットボタンを押せる状態にします（
disabled = false）。 - 配列
messagesからランダムにメッセージを選び、画面に表示します。 - カウントダウン部分を非表示にして、終了画面を0.2秒後に表示します。
if文を使った条件分岐を基本から詳しく解説しています
Math.random()の使い方をわかりやすく解説しています
4. リセット処理
function reset() {
num = 10;
count.textContent = num;
countBtn.textContent = 'PUSH';
countBtn.disabled = false;
resetBtn.disabled = true;
endScreen.classList.add('hide');
setTimeout(() => {
countDown.classList.remove('hide');
}, 200);
}
- カウントを初期値の10に戻します。
- 数字の表示も更新します。
- ボタンの文字を「PUSH」に戻し、再び押せるようにします。
- リセットボタンは押せない状態に戻します。
- 終了画面を非表示にして、0.2秒後にカウントダウン画面を表示します。
5. リセットボタンにイベントを設定
resetBtn.addEventListener('click', reset);
- リセットボタンが押されたときに、
reset()関数を実行するようにしています。
まとめ
- ボタンを押すと数字が1ずつ減る
- 数字が0になると終了処理が行われ、メッセージとリセットボタンが表示される
- リセットボタンで初期状態に戻せる
このコードにより、シンプルで直感的なカウントダウンアプリが実現されています。
JavaScriptのカウントダウンに関するリンク
もう少し機能を追加した100回連打アプリ
1秒ごとにカウントダウンする方法を解説
10秒間で何回ボタンを押すことができるかというゲーム
初めての方へ：基礎学習のすすめ
今回の内容で、簡単なカウントダウンアプリの作り方を理解できた方もいれば、少し難しく感じた方もいると思います。
もし難しく感じた場合は、まずHTML・CSS・JavaScriptの基礎を学ぶことをおすすめします。
動画学習サービスのUdemyには、初心者向けのわかりやすい講座が揃っています。
私が実際に受講した講座も紹介していますので、興味のある方は以下のページからチェックしてみてください。
