![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回は10カウントダウンタイマーをつくるッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
10カウントダウンタイマー??
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
10から0までカウントするプログラムだっぴ!
カンタンにつくれるから、一緒に勉強してみるッピよ~
- カウントダウンの作り方
- 時間によって操作するプログラム
- プログラムのセットの呼び出し
全体のコードとサンプルゲーム
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
let i = 10;
function timer() {
if (i >= 0){
document.getElementById("count").innerHTML = i;
i--;
setTimeout("timer()",1000);}
}
</script>
<!-- ↓この下にボタンをつくろう!↓ -->
<button onclick="timer();">スタート!</button>
<p id="count"></p>
<!-- ここまで! -->
</body>
</html>
10カウントダウンタイマーをつくろう
必要なもの
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
![メモ帳](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-01_611.jpg)
- メモ帳
- ブラウザ
が必要ッピ!
元になるコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
</script>
<!-- ↓この下にボタンをつくろう!↓ -->
<!-- ここまで! -->
</body>
</html>
プログラムを呼び出すボタンをつくろう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずはプログラムを呼び出す【ボタン】をつくるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<body></body>の間に
<button onclick="timer();">スタート!</button>
<p id="count"></p>
と入力するッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
<button onclick=”timer();“>スタート!</button>
<p id=“count“></p>
という意味になるッピよ~
![](https://janken.asotetu.work/wp-content/uploads/2022/01/2022-01-12.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
できた~!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
でもこれ押してもなにも反応しないな・・・
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
それは、まだプログラムをしこんでいないからッピ!
これからこのボタンを押したあとに動作するプログラムをつくるッピよ~
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
</script>
<!-- ↓この下にボタンをつくろう!↓ -->
<button onclick="timer();">スタート!</button>
<p id="count"></p>
<!-- ここまで! -->
</body>
</html>
カウントダウンプログラムをつくる
変数をつくる
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次はカウントダウンのための【変数】をつくるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<script></script>の間に
let i = 10;
と入力するッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは、
let i = 10;
という意味になるっぴよ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
この【 i 】は別になんでもいいんだっけ?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そうっぴ!
でもプログラミングの世界では【 i ・j ・k】が数字が変化するプログラムによく使われることが多いッピ!
今回もそれに習って【 i 】をつかっていくっぴよ~
Function関数でプログラムセットをつくる
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次はプログラムセット関数をつくっていくっぴ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
プログラムセット関数は
function 関数名() {
命令文
}
でつくることができるッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回はこの関数名(プログラムセット)を
timer()
とするッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
それでは、さっそくプログラムセットをつくってみるッピ!
変数 i の下に
function timer() {
}
と入力するッピ!
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
let i = 10;
function timer() {
//ここに命令文を入れる
}
</script>
<!-- ↓この下にボタンをつくろう!↓ -->
<button onclick="timer();">スタート!</button>
<p id="count"></p>
<!-- ここまで! -->
</body>
</html>
プログラムを呼び出してテストしよう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今まで組んだプログラムがきちんと動作するかテストしてみるっぴ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
テスト~?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そうっピ!
Function関数の命令文を入れる部分に
document.getElementById("conut").innerHTML = i;
と入力して、プログラムが呼び出せるかチェックしてみるっピ!
![](https://janken.asotetu.work/wp-content/uploads/2022/01/2022-01-12_2.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
お! 10って出てきた!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
document.getElementById(“count“).innerHTML = i;
という意味ッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まだカウントダウンが始まるプログラムまで書いていないから、
これはただ【 i 】の中身を書き出すプログラムッピよ~
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
let i = 10;
function timer() {
document.getElementById("count").innerHTML = i;
}
</script>
<!-- ↓この下にボタンをつくろう!↓ -->
<button onclick="timer();">スタート!</button>
<p id="count"></p>
<!-- ここまで! -->
</body>
</html>
変数 i を減らしてみる
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次はこの「10」の数字を変化させてみるッピ!
i--;
とfunction timer()のなかに入れてみるッピ!
![](https://janken.asotetu.work/wp-content/uploads/2022/01/2022-01-12_2.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
なんもかわらないけど・・・
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
むふふ! もう一回ボタンを押してみるッピよ~
![](https://janken.asotetu.work/wp-content/uploads/2022/01/2022-01-12_3.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚き_強.png)
すげえええ! 数が減ってる!
![](https://janken.asotetu.work/wp-content/uploads/2022/01/2022-01-12_5.jpg)
![](https://janken.asotetu.work/wp-content/uploads/2022/01/2022-01-12_6.jpg)
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ムフフ! これがプログラミングの力ッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
だけどさ、うさタブ
これ自分でポチポチやったら意味ないんじゃね?
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
自動でカウントダウンできないのか??
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
もちろんできるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
timer()のなかに
setTimeout("timer()",1000);
と入力するッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
このsetTimeout文は、時間を操るプログラムで、
setTimeout(“timer()”,1000);
という意味になるッピよ~!
![](https://janken.asotetu.work/wp-content/uploads/2022/01/2022-01-12_5.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚き_強.png)
すげええええ!
勝手にうごいた~!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/09/ユウキくん_驚困.png)
・・・ってアレ?
![](https://janken.asotetu.work/wp-content/uploads/2022/01/2022-01-12_4.jpg)
![アイカ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_汗.png)
0を通り過ぎてマイナスになってる・・・
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
むむ! これはマズイッピね・・・
次は0になったらカウントダウンを止めるif文をつくるッピよ~
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
let i = 10;
function timer() {
document.getElementById("count").innerHTML = i;
i--;
setTimeout("timer()",1000);
}
</script>
<!-- ↓この下にボタンをつくろう!↓ -->
<button onclick="timer();">スタート!</button>
<p id="count"></p>
<!-- ここまで! -->
</body>
</html>
カウントダウンを止める
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
カウントダウンを止めるには
if文という命令文をつかうっぴ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずはtimer() の中に
if (i >= 0){ 今までの書いた命令文 }
と入力し、if文でプログラムをかこってみるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<script>
let i = 10;
function timer() {
if (i >= 0){
document.getElementById("count").innerHTML = i;
i--;
setTimeout("timer()",1000);
}
}
</script>
のような感じっピ!
![](https://janken.asotetu.work/wp-content/uploads/2022/01/2022-01-12_6.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
できた~~!
if (i >= 0)で0になったらプログラムが動かなくなるようにする
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
最後にif文の解説をするッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
if文は、
もし◯◯が△△だった~このプログラムを動かして!
といった風に、条件によってプログラムを動かす命令文ッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回は
if (i >=0){ ◯◯◯◯ }
といった風に設定したッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
なるほどね~
全体のコードの確認
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にプログラムを入力してね!↓ -->
<script>
let i = 10;
function timer() {
if (i >= 0){
document.getElementById("count").innerHTML = i;
i--;
setTimeout("timer()",1000);}
}
</script>
<!-- ↓この下にボタンをつくろう!↓ -->
<button onclick="timer();">スタート!</button>
<p id="count"></p>
<!-- ここまで! -->
</body>
</html>
- カウントダウン用の変数をつくる
- <button>タグでカウントダウンボタンをつくる
- function関数によってプログラムセットをつくる
- if関数をつかってカウントダウンプログラムをつくる
- document.getElementByIdによって、IDの部分を変化させる
- setTimeoutでプログラムを呼び出す
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
上手くできたッピか?
これからも色んなゲーム作りやプログラムの解説をしていくッピ!
次回も楽しみにしているッピよ~~!