みなさんこんにちは！
「JavaScriptでゲームを作りまくったらプログラミングを習得できるのか」という挑戦をしているJavaScript初心者です。
4つ目のゲームを完成させたので、参考サイトや学べたことを紹介していきます。
本記事はあくまで勉強のメモのようなものであり、プログラミング初心者にゲームの作り方を教えるような記事ではありません。
4つ目のゲームはじゃんけんゲーム
4つ目のゲームはじゃんけんゲームを選びました。
2つ目に作ったテトリスが難しすぎて複雑なゲームを選ぶのが怖く、4つ目も比較的簡単なゲームにしました、、、。
コードを書いた時間は1時間ほどです。
htmlにすべて記述すると200行ぐらい。
完成形↓
参考サイト↓
単純なゲームだったので、アレンジするところがあまりなかったです。
グー・チョキ・パーのイラストを少しかわいいものにしたくらい。
いつか改善するとしたら、選んだ手以外を暗めにして選んだ手をわかりやすくする、とかですかね。
じゃんけんゲームを作って学んだJavaScriptの知識
じゃんけんゲームで学んだJavaScriptの知識を3つ紹介します。
知っていたけれど、よくわかっていなかったというものがコードの中に多く出てきました。
new Array
今まで作ったゲームでも何度か出てきましたが、いまいちわかっていなかったので調べました。
new Arrayは配列を生成します。
配列生成ではリテラル[ ]も使えて、リテラルのほうがわかりやすいためよく使われるようです。
例えばリテラルを使って、var array = [3]と書くと、要素が一つで値（初期値）が3となります。
つまり、array[0] = 3（初期値が3）
var array = [3,4]と書けば、3,4と初期値が3で、2つの要素を持つ配列。
つまり、array[0] = 3 , array[1] = 4
なるほど、リテラルはわかりやすい。
var array = new Array(3)では、3つの空の要素を生成し、値は「undefined」となります。
だから、array[0] = undefined , array[1] = undefined , array[2] = undefined
このような状態。
おそらくnew Array()は要素の数を定めるのでしょう。
今回はグー・チョキ・パーの3つでnew Array(3)
オセロを作るときは64マスなので、new Array(64)と書けます。
何度もクリックできないように
click(){
if(!RESET_BUTTON.classList.contains("hidden")){
return;
}
clearTimeout(dealer._timeoutId);
RESET_BUTTON.classList.remove("hidden");
this.result();
}
「グー・チョキ・パー」を連続でクリックできないようにするためのコードです。
「もう一度」ボタンにclass = hiddenを付けたり外したりして、判断しています。
クリックしたときに、「もう一度」ボタンにhiddenが付いていなかったら、実行しない。（手を選択できない）
クリックしたときに、「もう一度」ボタンにhiddenが付いていたら、実行し、hiddenを外す。（手を選択でき、結果を表示）
そして、「もう一度」ボタンを押すことでhiddenが付く。
これで繰り返し遊べます。
document.querySelector()
これはJavaScriptの基礎知識ですね。
理解が曖昧なので、もう一度理解しなおしたいと思います。
querySelector()はHTMLから要素を取得・検出します。
要素を取得すると言えば、getElementById()ではないのでしょうか？
getElementById()はid属性だけしか取得できないことに対して、
querySelector()は、id属性だけでなく、class属性も取得できるようです。
何でも屋さんなんですね。
なるほど。
JavaScript初心者がじゃんけんゲームを作った感想
じゃんけんゲームはJavaScript初心者におすすめのゲームだと思いますが、コード自体は少し難しく感じました。
難しく感じたのは、あまり見たことのない英語で定義していたからだと思います。
仕組みはわかりやすく、細かいことを省けば
- 相手の手をランダムで短い時間おきに表示
- 自分の手を選択
- 自分の手を選択したときに相手の手を止める
- 手を比べて勝敗を表示
- 何度でもゲーム可能にする
初心者でも上のように考えられます。
JavaScript初心者仲間がいましたら、ぜひじゃんけんゲームを作ってみてください。
これまで4つのゲームを作りましたが、JavaScriptのコードを書くことに対する苦手感は和らいできました。
徐々に慣れを感じています。
そりゃ、ほとんど写してますからね。