『じゃんけん』を作ってみる
また大分間が空いてしまいました。
スランプではないのですが、進歩の無い状態と正解のないプログラミングに疲れが出てきたのは事実ですね。
そんな心情の中、地元でプロの人から教えてもらえる企画を見つけたので近々二週間ほど参加してきます。
何をどの程度教えてくれるのか分かりませんが、とりあえずホームページ作りなどの基礎をプロからじっくり教えてもらえるなら、再び進歩が見える様になると思うのでしっかり吸収して来ようと思います。
今回は『じゃんけん』です。
前回の終わりに学習サイトの続きをすると言いましたが、サブタイトルにある通り『じゃんけん』を作ることに変更します。
というのも、学習サイトの次のステップが複数ファイルのエクスポートやパッケージの使い方だったので、いきなりここまで進んでも理解が追い付かないと判断した為です。
いろんなサイトのデベロッパーツールを見ましたが、エクスポートなどはあまり使っておらず、まずはjavascriptの使い方を覚えるのが先決と考えました。
なので、これからはHTML、CSS、javascriptを使った『何か』を投稿していきたいと思います。
(そのようなことも言っている気が……)
その第一弾が『じゃんけん』となります。
とはいえ、いきなり『じゃんけん』を作ろうとしても無理です。
『じゃんけん』を作るのに何が必要で、何の判断が必要で、どんな流れなのかさえ分かりません。
人間の様に思考して駆け引きしながら手を出す、ということができない、決められたプログラムの行動しかできないのが機械なので。
ですので、まずは間違っているのも踏まえ、『じゃんけん』に必要と思える物を箇条書きで書いていきます。
というより、実際『じゃんけん』を作った時に箇条書き・流れを書いていきます。
それと、最初に最終目的というか、最終的に作りたい形を決めます。
小説で言うならストーリーの大筋、プロット、結末といったところでしょうか。
今回の『じゃんけん』でいうと
【CPUの手を画像表示の上ランダムで表し、プレイヤーがボタンを押したらストップし勝敗を表示する】
という形になります。
そのために必要な物は『画像』――CPUの手となるグー・チョキ・パーの画像ですね。
そして、作る為の全体の流れは
1.ランダム関数
2.タイマーで停止
3.画像を挿入
4.出た数値の出力
5.画像を使わずジャッジ
6.目的のじゃんけんを作る
このような感じで作ってみました。
当然、使わなかった部分や変更を加えた部分が多くありました。
途中までうまく出来ても問題が起きて先に進めず数日悩みもして、目的の『じゃんけん』を作る為に似たコードを探しましたが見つからず、かなり時間がかかりました。
結局は見つかったので今があるわけですが、全てを真似ては意味がないので、inputではなくbuttonを使うなど工夫をしています。
1.ランダム関数
これは『じゃんけん』を作る上で絶対に必要なコードとなりました。
CPUの手に番号を付けてランダムで表示するためです。
それ以外にも、勝ち・負けのジャッジの為にも必要でした。
なので、まずは『じゃんけん』ではなくサイコロとして1～6までの数値をランダムで表示させることから考えました。
そのjsコードがこちら
function start() {
var dice = Math.floor(Math.random() * 6) + 1;
var box = document.getElementById("box");
box.innerHTML = dice;
}
そしてHTMLがこちら
<div id="box">0</div>
<button onclick="start()">スタート</button>
先にHTMLの説明をすると
サイコロの値を表示するboxというid
値を出力するボタン
というシンプルなものになります。
classを付けると表示場所や数値のスタイル、ボタンを変更可能です。
それを踏まえてjsの説明をします。
見て分かる通り、関数はstart()という名称が付いています。
HTML側にはbuttonに『onclick="start()"』とあります。
こうすることで『ボタンがクリックしたらstart関数を実行する』というプログラムが出来上がることになります。
()や””の有無、ケアレスミスで何度と処理できないという事態が起きたので打ち間違えには気を付けないといけないです。
関数の中身は
1～6を表示するランダム関数を代入する――変数dice
ランダム数値を出力する為に表示場所のidを取得代入する――変数box
二つを使いdiceをboxに表示する
こんな感じになっています。
box.innerHTMLというのは
box(取得したboxというidが入っている)の中身のHTMLを書き換える、というものです。
最初に入っている0という数値が、ボタンを押すことでstart関数が実行されランダム数値の入ったdiceの値に変更される、ということです。
2.タイマーで停止
『じゃんけん』の手が数秒後に自動停止しては意味がないのですが、ボタンを押すまで永遠とCPUの手をランダムで表示し続ける為には必要となります。
そのために使うコードが『setTimeout』です。
止めるには『clearTimeout』を使うか、関数の処理を停止させてしまうか、の2パターンあります。
この時は関数の処理を停止させることを知らなかったので、『clearTimeout』を使っています。
HTMLのコードは同じなので、jsコードはこちら
var count = 0;
function start() {
var dice = Math.floor(Math.random() * 6) + 1;
var box = document.getElementById("box”);
box.innerHTML = dice;
if (count >= 60) {
clearTimeout();
count = 0;
} else {
count++;
setTimeout(start, 50);
}
}
想定では3秒後に停止させたいので、3秒後とするためにcountという変数を定義しています。
人間の様に『3秒経ったら停止』と十文字もかからずに書くことは不可能なので、あらゆる部分でコードを書くのに頭を悩ませますね。
start関数の3行分は同じです。
その下にif文があります。
内容は
『もしcountが60よりも大きい、若しくは等しい場合タイマーを停止、countに0を代入』
『そうでない場合(60より小さい)、countに1を足し、start関数を50/1000(0.05)秒後に処理する』
0.05秒は1秒経つのに20回必要なので、3秒経つのに60回となります。
0から始まるのでcountが59になった時が丁度3秒経ったときです。
まあ、3秒ピッタリである必要もないので＞でも＞＝でもどっちでも構いませんね。
3.画像を挿入
ランダム数値の代わりに画像を表示させます。
今の段階ではサイコロなのでサイコロの画像を使い、ランダム数値が1の時サイコロの目が1の画像を表示できるように作り替えます。
そのために画像の用意も必要ですが、表示画像のパスを配列で変数に代入することも必要です。
そして、diceの値を出力するのではなく、ランダム数値の値の配列場所の画像が表示できるようにしないともいけません。
そのためのjsコードがこちら
var path = [
"dice1.png",
"dice2.png",
"dice3.png",
"dice4.png",
"dice5.png",
"dice6.png"
];
var count = 0;
function start() {
var dice = Math.floor(Math.random() * path.length);
var img = document.getElementById("img");
img.src = path[dice];
if (count >= 60) {
clearTimeout();
count = 0;
} else {
count++;
setTimeout(start, 50);
}
}
そして、HTMLに変更を加えたのがこちら
<img src="dice1.png" alt="" width="150" id="img">
<button onclick="start()">スタート</button>
まず、変数pathに6つの画像パスを配列代入します。
インデックス番号は0から始まるので、ランダム関数は0～5となる部分には注意が必要です。
私は,(カンマ)や画像パスを間違えやすいのでそこも気を付けないといけないです。
他の変更点はstart関数の3行目
元『box.innerHTML = dice;』だった『img.src = path[dice];』部分です。
意味合いは殆ど同じで
box(idのboxに画像ファイルURLを挿入)にpathの配列dice番目を代入する
というだけです。
srcはimgタグにしか使えないので、divから変更しておく必要があります。
4.出た数値の出力
サイコロの目の値を出力する、即ち『じゃんけん』の勝敗を出力するために必要なコードとなります。
勝敗を表示する時はボタンを押した時なので、3のjsコードif文の『countが60以上の場合』の中にジャッジを出力するコードを書きます。
HTMLにjudgeというidを持つクラス(<div id="judge"></div>)を作り、jsコードの該当部分に
document.getElementById("judge").innerHTML = dice + 1;
idのjudgeの中身をdice(ランダム数値)を代入表示する、というコードを書きます。
1を足すのは、ランダム関数が0～5だからです。
とまあ、此処までは順に増えたり書き換えたりと簡単でした。
しかし、順調なのもそこまでで、5工程目のジャッジを行おうとした時色々と悩む部分が出てかなり時間を消費してしまいました。
先にも言っていますが、既存のコードを真似ればすぐ作れます。
そのコードを理解すれば問題もありません。
ですが、自分の掲げた目標を達成するには自分のコードとして作る必要があると思います。
なので、続きは悩んだ部分などを書きながら次の投稿とします。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
