「ボタンをクリックしたら数字が減っていく」という機能は、JavaScriptで簡単に実装できます。
この記事では、カウントダウン機能を使って、10連打ゲームを作る方法を書いています。
機能を最小限にしているので、ゲームと呼べるものではないですが、簡単なアプリを作れたら楽しいですよ。それでは作り方を確認していきましょう。
10連打ゲームを実際に動かしてみましょう
- 最初に数字「10」と赤い「PUSH」ボタンを表示
- 「PUSH」ボタンを押すたびに数字が1ずつ減る
- 0になったら数字と「PUSH」ボタンを非表示にし、ランダムなメッセージとリセットボタンを表示
- リセットを押すと最初の状態に戻る
HTML：アプリの画面構造を作る
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<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>
</body>
</html>
.containerは全体をまとめる枠#countDownに数字（#count）と「PUSH」ボタン（#countBtn）を含む#endScreenに結果メッセージ（#endMsg）と「リセット」ボタン（#resetBtn）を含む（最初は非表示かつ押せない状態）<script src="./app.js">でJavaScriptファイルを読み込む
CSS：見た目を整える
style.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：ボタンを押したときの動きを作る
app.js
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内の各要素を変数に代入して操作できるようにする
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() 関数を実行するようにしている
JavaScriptのカウントダウンに関するリンク
もう少し機能を追加した100回連打アプリ
1秒ごとにカウントダウンする方法を解説
10秒間で何回ボタンを押すことができるかというゲーム
初めての方へ：基礎学習のすすめ
今回の内容で、簡単なカウントダウンアプリの作り方を理解できた方もいれば、少し難しく感じた方もいると思います。
もし難しく感じた場合は、まずHTML・CSS・JavaScriptの基礎を学ぶことをおすすめします。
動画学習サービスのUdemyには、初心者向けのわかりやすい講座が揃っています。
私が実際に受講した講座も紹介していますので、興味のある方は以下のページからチェックしてみてください。
