みなさんこんにちは。
「JavaScriptでゲームを作ったらプログラミングを習得できるのか」試しているプログラミング初心者です。
今回は神経衰弱ゲームを作りましたので、学んだことや感想を述べていこうと思います。
同じプログラミング初心者の人で、JavaScriptでゲームを作ることに興味がある人はぜひ参考にしてください。
（プログラミングを教えるような記事ではありません。）
神経衰弱ゲームの完成形と参考サイト
今回作った神経衰弱ゲームの完成形はこんな感じ↓
こちらが参考にしたサイトです↓
丁寧にわかりやすく解説されています。
参考サイトでは、
「一致した2枚のカードを表向きのままにする」
までコードが説明されています。
表向きのままでもいいのですが、せっかくなので
「一致した2枚のカードを非表示にする」
という動きを自分でコーディングしてみました。
コードの量は全部で150行くらいで、かかった時間は2時間ほどです。
神経衰弱ゲームを作って学んだJavaScriptの知識
神経衰弱ゲームを作って学んだことは次の2つです。
- push
- visibility
push
pushは配列に要素を追加するときに使うようです。
今回のゲームでは
cards.push(card);
と書き、次々とcardを追加していくことでトランプを並べました。
pushと似たものにpopがあります。
popは配列の末尾の要素を削除するときに使うようです。
visibility
「一致した2枚のカードを非表示にする」という動きのコードを書くときに使いました。
visibilityを使えばスペースを確保したまま、非表示にできます。
最初、
display:none;
を使ってみました。
そしたらトランプが非表示にはなるのですが、空いた隙間を詰めてトランプが並び直してしまいました。
そこで調べてvisibilityを見つけました。
visibility: hidden;
と書くと空いた隙間を詰めずに非表示となりました。
JavaScript初心者が神経衰弱ゲームを作った感想
個人的にトランプゲームが好きなので、作るのが楽しかったです。
コード全体の7割くらいは理解できました。
神経衰弱ゲームでは、開いたカードを一枚目か二枚目か判断する必要があり、その部分が難しいかなと思います。
とはいえ、神経衰弱ゲームはコードのボリュームが少なく、短時間で作れます。
私と同じプログラミング初心者の人にとてもおすすめです。
参考サイトが親切で、トランプ画像のダウンロードもできます。
時間があるときにタイマーも実装したいです。