こんにちは、ナカムラです。
前回の記事でVue.jsを使った簡単なゲームを作ってみました。
今回はそのゲームに一つ機能を付け加えたいと思います。
※ゲームの概要は前回の記事をご覧ください。
追加する機能
【 スコアを保存して表示する 】
「もう一度やる」ボタンを押すと初期値に戻るので何回でも遊べるのですが、
自分がどれくらいの成績だったか気になりませんか？
今回追加するのは【resetメソッドの中にスコアを記録する処理を追加し、
スコアが記録されていたら表示する】という機能です。
See the Pen vue hgame1.2 by Nakamura (@takayo-nakamura) on CodePen.
主な変更点
- スコア記録用の変数（score）を追加 ※初期値は空配列
- resetメソッドで、this.scoreへ現在のpointを追加する処理を追加。
this.score.push(this.point); - ポイント表示の下にscoreの内容を表示 ※空の時は表示しない
使ったVue.jsの機能
v-for
スコアを表示するテーブルのところです。
繰り返し表示したい行にv-for="(item, index) in score"を入れます。
indexも一緒に渡すことで配列の順番も合わせて使えます。
※配列は0始まりなので、1を足して表示しています。{{ index + 1 }}
v-show
スコアが1件も入っていない時にテーブルタグを表示したくないです。
tableタグにv-show="score.length"を追加し、
配列が1件以上入っていたら表示する、そうでなければ非表示となるようにしました。
まとめ
今回は配列を使ってみました。
まだちょっと苦手意識があるのでうまく使えるようになりたいです。
こういうゲームは実際の業務で作ることはほぼないと思いますが、覚えたものでどういうことができるのかなと考えるのは楽しいです。
今度は何をしてみようかな。
