みなさんこんにちは。
「JavaScriptでゲームを作りまくったらプログラミングを習得できるのか」という実験をし始めたプログラミング初心者です。
なぜこのようなことを始めたのか気になる人はこちらから↓
1つ目のゲームはオセロ
1つ目のゲームは私が大好きなオセロです。
これはコードの意味を一生懸命理解しようとしながら、3時間ほどで完成できました。
完成形はこちら↓
参考サイトはこちら↓
全てをhtmlファイルに書くとすると、約300行ほどのコードでした。
ほぼ参考サイト通りに作りましたが、
- デザインを少し変更
- アラームを通常のテキスト表示に
アレンジ（と言えるのか？）しました。
ただオセロは、
- 64マス全て埋まった場合
- 盤面の石が黒白のどちらか一色になった場合
- 両者とも置けなくなった場合
にゲーム終了となるのですが、
3つ目の「両者とも置けなくなった場合にゲーム終了」が実装できていないので、今後改善していこうと思います。
また、ゲームが終了したときも「黒の番です。」「白の番です。」と表示されることが気になるので、これも改善したいと考えています。
改善点が残っていますが、改善しているといつまでも時間がかかってしまうので、一度スルーします。
オセロを作って学んだJavaScriptの知識
今回、オセロを作って以下のことを学べたと思います。
挫折した以来のJavaScriptだったので、「学んだ」というよりも「思い出した」の方が近いかもしれません。
for
for (var x = 0; x < 8; x++){ }というコードがオセロを作る中で出てきて、forって何だっけと思い、持っている本で調べました。
「for (初期化式; 条件式; 増減式) {命令群}」
なるほど。
では、for (var x = 0; x < 8; x++){ }はxが0,1,2,3,4,5,6,7のとき、{ }の中身が実行されるということですね。
this
コードを書いている中でthisが山ほど出ていたので、thisってなんやねんと思い、こちらも調べました。
「thisはイベントが発生した要素を指す。」
なるほど？
例えばonclickイベントが発生した場合、thisはクリックされた要素を指すようです。
なんとなくわかりました。
switch
switch文も出てきたので調べたところ、これはif分で代替できるんですね。
「switch（調べる対象）{
case 値が○○：
命令文①
break;
case 値が△△：
命令文②
break;
default:
命令文③
}」
default:は値が○○と△△のどちらにも当てはまらないとき、ということです。
他にもいろいろと学べたことはありますが、たくさんありすぎるので3つほどにしておきます。
JavaScript初心者がオセロを作った感想
コードを書き始めたときは正直、意味わからん、となりました。
しかしよく見てみると、使われている文はけっこう簡単なものが多く、私の持っているJavaScript初心者向けの本でほとんど理解できました。
最初から何も見ずに作れと言われたら無理ですが、初心者が興味本位で作ってみるにはオセロはちょうどいいと思います。
完璧にできたわけではないですが、JavaScriptをある程度習得してからまた戻って問題点を修正したいと考えています。
自分の好きなオセロを作るのは、けっこう楽しかったですね。
私と同じJavaScript初心者の人がいたら、ぜひ作ってみてください。
