オセロが好きなパンダのブログ

リケジョが書いてます

JavaScriptでゲームを作りまくったらプログラミングを習得できるのか①

みなさんこんにちは。

JavaScriptでゲームを作りまくったらプログラミングを習得できるのか」という実験をし始めたプログラミング初心者です。

なぜこのようなことを始めたのか気になる人はこちらから↓

 

 

1つ目のゲームはオセロ

f:id:mana_312:20201105133140j:plain

1つ目のゲームは私が大好きなオセロです。

これはコードの意味を一生懸命理解しようとしながら、3時間ほどで完成できました。

 

完成形はこちら↓

参考サイトはこちら↓

 

全てをhtmlファイルに書くとすると、約300行ほどのコードでした。

ほぼ参考サイト通りに作りましたが、

  • デザインを少し変更
  • アラームを通常のテキスト表示に

アレンジ(と言えるのか?)しました。

 

ただオセロは、

  • 64マス全て埋まった場合
  • 盤面の石が黒白のどちらか一色になった場合
  • 両者とも置けなくなった場合

にゲーム終了となるのですが、

3つ目の「両者とも置けなくなった場合にゲーム終了」が実装できていないので、今後改善していこうと思います。

また、ゲームが終了したときも「黒の番です。」「白の番です。」と表示されることが気になるので、これも改善したいと考えています。

 

改善点が残っていますが、改善しているといつまでも時間がかかってしまうので、一度スルーします。

 

オセロを作って学んだJavaScriptの知識

f:id:mana_312:20210223144047j:plain

今回、オセロを作って以下のことを学べたと思います。

挫折した以来の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初心者がオセロを作った感想

f:id:mana_312:20210223144101j:plain

コードを書き始めたときは正直、意味わからん、となりました。

しかしよく見てみると、使われている文はけっこう簡単なものが多く、私の持っているJavaScript初心者向けの本でほとんど理解できました。

 

最初から何も見ずに作れと言われたら無理ですが、初心者が興味本位で作ってみるにはオセロはちょうどいいと思います。

完璧にできたわけではないですが、JavaScriptをある程度習得してからまた戻って問題点を修正したいと考えています。

 

自分の好きなオセロを作るのは、けっこう楽しかったですね。

私と同じJavaScript初心者の人がいたら、ぜひ作ってみてください。

JavaScriptでゲームを作りまくったらプログラミングを習得できるのか

みなさんこんにちは。

現在は2021年2月、大学は春休みに入りました。

そこで私は一つ挑戦をしたいと思います。

 

 

JavaScriptを習得したい!

f:id:mana_312:20210222211217j:plain

それがJavaScriptでゲームを作りまくったらプログラミングを習得できるのか」です。

ここで言うプログラミングはJavaScriptです。(タイトルにJavaScriptを2回入れるとくどいかなと笑)

 

以前からプログラミングを身につけたいと思い、一度挑戦したこともありました。

HTML、CSSマークアップ言語はなんとか理解しましたが、次のJavaScriptで挫折。

難しすぎてやめぴ!と諦めてしまいました。

 

しかし、大学生の春休みというのは非常に暇なんですよね。

そこでもう一度リベンジ!

以前は意味がわからなくてやめてしまいましたが、今回はいきなりゲームを作りながらプログラミングを習得できるのかという実験のようにしてみました。

 

ゲームが大好きなので一つ一つ完成させながら進めれば楽しいのでは?と考えました。

もちろん、一からゲームを作っていたら1つのゲームで春休みが終わってしまうので、あらゆるサイトを参考にしていきます。

最初はサイトをほぼ写すだけになってしまいますが、徐々に自分でアレンジを加えながら勉強できればと考えてます。

それじゃ、頑張るぞー!

 

ゲームを作り始める前に持っている知識

f:id:mana_312:20210222211232j:plain

プログラミングは一度挫折していて、少しだけ知識が頭に残っています。

現在持っている知識はHTMLとCSSです。

これらのマークアップ言語であれば、ある程度理解できます。

JavaScriptについてはこちらの本を読んで基礎的な知識は持っています。 

確かな力が身につくJavaScript「超」入門 第2版
 

 ゲームを作りながらこの本の知識を定着させていきます。

 

JavaScriptで作ったゲーム

f:id:mana_312:20210222211245j:plain

では日々こちらを更新していきます。

ゲーム1つ目:オセロ

 

いつもはオセロに関する記事を書いています↓