みなさんこんにちは！
意地でもお金をかけずにプログラミングを習得したい大学生です！
春休みに入ったあたりから、
「JavaScriptでゲームを作りまくったらプログラミングを習得できるのか
という挑戦をはじめました。
本記事では5つ目に作ったゲームの感想や学んだことを述べています。
（プログラミングを教える記事ではありません。ご了承ください。）
5つ目のゲームは〇×ゲーム
5つ目のゲームとして、〇×ゲームを作りました。
かかった時間は1時間半ほどです。
htmlにすべてを記述すると、350行ほどになりました。
完成形↓
参考サイト↓
「写経してみた」という記事を参考にして写経してみた、という感じです笑。
ゲーム自体は単純でアレンジするところがほぼありませんでした。
一つ変えたところは、〇を先攻にしたことです。
参考サイトでは×が先攻だったのですが、私が紙とペンで〇×ゲームをするときは必ず〇を先攻にするので、変えました。
〇×ゲームを作って学んだJavaScriptの知識
〇×ゲームを作って学んだことは次の3つです。
[ ].slice.call();
今回初めて見たコードでした。
[ ].slice.call();はArray.prototype.slice.call();を短縮して書いた形です。
一般的にはArray.prototype.slice.call(arguments);と書くようで、意味は「argumentを配列に変換」。
むむ？
〇×ゲームでは以下のように使われています。
const squares = document.querySelectorAll('.square');
const squaresArray = [ ].slice.call(squares);
squareはマス1つ。
squaresArrayはマスの配列を表すのでしょう。（不確かですが、、、）
例えば、squaresArray ＝ [ ].slice.call(squares);で1-1のマス・2-1のマス・3-1のマスの配列にして、3つのマスに同じ記号（〇か×）が揃えばゲーム終了と設定できます。
同じように、〇×ゲームでは8つの並び方があります。
for Each
for Eachではループ処理が可能となります。
何度も呼び出したい関数をfor Eachで記述しておけば、要素の1つ1つに繰り返して処理を実行できるようです。
〇×ゲームではメッセージの切り替え関数内の、クラス名の付け外しで使われています。
someとevery
中学生で習うような英語もプログラミングで出てくるとビビります笑。
- someは、配列が1つでも条件を満たしていればtrue
- everyは、すべての配列が条件を満たしていればtrue
英語の意味とも関係しているようでなんとなくわかりやすいですね。
〇×ゲームでは勝利判定で使われていて、簡単にすると
3マスすべて同じ記号なら1行揃い（every)
1行でも揃っていれば勝ち（some)
このような意味だと考えられます。
JavaScript初心者が〇×ゲームを作った感想
今回の〇×ゲームに限らず、何かの関数や配列を定義した後、「この単語の定義、なんだっけ」となることが多いです。
最初のほうのコードを書くときは、定義が多いので油断しているのだと思います。
今後は油断せず定義されている関数や配列の意味をしっかり確認しながら書いていこうと考えています。
〇×ゲームの仕組みは
- 9個おマスを用意
- 〇と×を交互に書いていく
- 1行揃ったら勝ち
このように非常に単純なのでもっと簡単なコードだと思っていたのですが、想像以上に難しく感じました。
個人的にはクラス名js-hiddenの付け外しがポイントかなと思います。
私は難しいと感じましたが、JavaScriptで作るゲームの中ではおそらく簡単なほうなので、プログラミング初心者の人はぜひ作ってみてください。