Edited at

Vue.jsでドラクエ風のポートフォリオを作った話 ①


TL;DR


  • Vue.jsを使ってドラクエ風ポートフォリオを作りました

  • できあがったものがこちら

  • GitHubはこちら ← New


あらすじ

 前からポートフォリオを作ろうと思っていたのですが、普通に作るだけでは芸がないかと思い、「ドラクエ風RPG」をイメージして作っています。

 フロントエンドの実務経験がないので、実装期間は10日間(約2時間/日)ほどでした。


できたもの

しらべる.png

ドラクエ風ポートフォリオ

 ちょっと触っていただければ分かると思うのですがマウスやタッチ操作でキャラクターを動かし、人に話しかけたりたからばこを調べたりできます。

 ドラクエと一緒で場所によってできることが変わるので色々動かしてみてください。

 なお、レスポンシブに非対応だったり、ポートフォリオとしては色々情報が足りていなかったりしますが、そのへんは随時更新していこうと思っています。

GitHubに関してはあとで公開する予定です。


使ったもの


  • Vue.js

  • Nuxt.js

  • Vuex

 フロントエンドを勉強したいと思い、フロントエンド最前線の友達に聞いたところ「フレームワークは好みだけど、俺はVue.jsを使ってる。公式のドキュメントがスーパーわかりやすい!」と絶賛だったのでスーパー分かりやすいのを私も選ぶことにしました。


構成

 画面の各要素を個別のコンポーネントとして分けて実装をしました。それ同士をVuexで状態管理して協調動作させているような形になります。

各コンポーネント.png


各コンポーネントの役割


①TheStatus.vue

ドラクエと同じくキャラクターのステータスを表示


②TheCommand.vue

今使えるコマンドを表示

イベントによってコマンドは増減


③index.vue

キャラクターの移動範囲を表示

クリックで移動


④TheComment.vue

コマンドに合わせたメッセージを表示

状態によってメッセージは変動


⑤TheChoice.vue

メッセージ内で選択肢がある場合に表示

選択によってメッセージが変動


⑥⑦⑧

また、つよさ・さくせん、などもまた別コンポーネントで構成されています。


今回説明する内容

 全てを一気に説明するのは厳しいので、今回は下記2点に内容を絞って説明していきます。


  • ステータスの表示

  • キャラクターの移動


ステータスの表示

一定のイベント毎にstateExが加算され、それによってstateLevelが変動します。

 経験値とキャラクターのレベルの関係が比例していて、ドラクエの職業的な部分を「らいほうしゃ」から「ともだち」に変化していく様な作りにしています。

 経験値を増やしていくとより地位の高いポートフォリオ閲覧者になることができます。


TheStatus.vue

TheStatus.vueの中身を分割して説明していきます。


<template>
<section>
<div class="status-list">
<ul>
<li>{{levelList[statusLevel].job}}</li>
<li>レベル:{{statusLevel}}</li>
<li>HP:{{levelList[statusLevel].hp}}</li>
<li>MP:{{levelList[statusLevel].mp}}</li>
<li>EX:{{stateEx}}</li>
</ul>
</div>
</section>
</template>

 レベルに応じて表示の内容を変更するためにバインディングをして、dataの内容をリアクティブに表示をしています。

Vueガイド: データバインディング構文

<script>

export default {
data (){
return {
levelList: [
{
job: 'らいほうしゃ',
hp: '1',
mp: '1',
ex: 1
},
{
job: 'ともだち',
hp: '100',
mp: '100',
ex: 20
},
//(略)//
]
}
},

//(略)//
</script>

 レベル毎の職業はリスト型で、exが経験値の閾値となっています。

<script>

//(略)//
computed: {
stateEx: function(){
return this.$store.state.ex
},
statusLevel: function(){
var tmpLevel = 0
for (var i = 0; this.levelList.length > i ; i++){
if (this.stateEx > this.levelList[i].ex){
tmpLevel = i
}
}
return tmpLevel
}
}
}
</script>

 computedの中身です。

 stateExの経験値の部分は他のコンポーネントのイベントで変動するのでVuexを使って値をストアしています。

 Vuexにストアされた値を使う際はcomputedで取得することでTheStatus.vueのコンポーネントの中で宣言した変数の様に使用することができるようです。

 また、経験値によってレベルを変化させたい(閾値によってレベル判断をしたい)等のロジックを反映させた数値を使用したい場合にも、computedを使用しますので、statusLevelとして宣言を行っています。

Vueガイド: 算出プロパティ computed


<style>

.status-list{
text-align: center;
width: 130px;
height: 120px;
padding:10px;
margin-bottom:10px;
border: 2px solid #fff;
border-radius: 10px;
}
</style>

 TheStatus.vueのCSSの中では枠線や文字の位置等の調整のみをおこなっています。

 「げすとさん」といった文字やステータスの位置自体はlayoutsのdefault.vueで指定をしています。


キャラクターの移動

こちらの記事を参考にさせていただきました。

vue.jsでcsvファイルのデータ抽出表示とオセロ

 この記事の中でオセロを置くために使われている実装方法をキャラクターの移動に利用しています。


index.vue

<template>

<section>
<div class="map">
<div v-for="i in 8" class="container" :key="i">
<div v-for="j in 9" class="waku" :key="j">
<div :class="{ 'object-human': xy[i][j]==1, 'visitor': xy[i][j]==0 }" @click="visitorMove(i, j)">
<img class="visitor" v-if="xy[i][j]==0" src="../assets/img/brave.png"/>
<img class="object-treasure" v-if="xy[i][j]==4" src="../assets/img/object-treasure-1.png"/>
<img class="object-treasure" v-if="xy[i][j]==5" src="../assets/img/object-treasure-2.png"/>
<img class="object-human" v-if="xy[i][j]==1" src="../assets/img/tono.png"/>
<div class="object-wall" v-if="xy[i][j]==9"></div>
</div>
</div>
</div>
</div>
</section>
</template>

 dataにあるxyという2次元配列がマップを表しています。それぞれの数値には下記のような意味を持たせており、変更することでマップに対してオブジェクトを設置することができます。

0: キャラクターの位置

1: 人オブジェクトの位置

2: 床オブジェクト(キャラクター移動可能)

3: マップ外

4: 宝箱オブジェクト①

5: 宝箱オブジェクト②

9: 壁オブジェクト

v-forとv-ifを使い上記の配列を使用しています。

<script>

export default {
data: function() {
return {
wb: 0,
xx: 8,
yy: 5,
xy: [
[3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
[3, 9, 9, 9, 9, 9, 9, 9, 9, 9, 3],
[3, 9, 4, 9, 2, 1, 2, 9, 5, 9, 3],
[3, 9, 2, 2, 2, 2, 2, 2, 2, 9, 3],
[3, 9, 2, 2, 2, 2, 2, 2, 2, 9, 3],
[3, 9, 2, 2, 2, 2, 2, 2, 2, 9, 3],
[3, 9, 2, 2, 2, 2, 2, 2, 2, 9, 3],
[3, 9, 2, 2, 2, 2, 2, 2, 2, 9, 3],
[3, 9, 2, 2, 2, 0, 2, 2, 2, 9, 3],
[3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
],
}
},
methods: {
visitorMove: function(x, y) {
//置ける場所の判定
if (this.xy[x][y] != 2) return;
this.xy[x][y] = this.wb;
this.xy[this.xx][this.yy] = 2;
this.xx = x;
this.yy = y;
this.xy.push();

this.setPositionState()
},
// left x, right x, forward y, back y
setPositionState: function() {
const lx = this.xy[this.xx - 1][this.yy]
const rx = this.xy[this.xx + 1][this.yy]
const fy = this.xy[this.xx][this.yy - 1]
const by = this.xy[this.xx][this.yy + 1]

this.$store.commit('setlx', lx)
this.$store.commit('setrx', rx)
this.$store.commit('setfy', fy)
this.$store.commit('setby', by)
}
}
}
</script>

<style>

p {
text-align: center;
}

div {
min-width: 40px;
min-height: 40px;
}

.map {
background-image: url("../assets/img/tile-1.png");
}
.container {
display: flex;
justify-content: center;
}

.waku {
width: 40px;
height: 40px;
}

.object-treasure {
padding-top: 2px;
padding-left: 2px;
width: 90%;
height: 90%;
}

.object-tile {
width: 100%;
height: 100%;
}

.object-wall {
background-image: url("../assets/img/wall.png");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}

.object-human {
padding-top: 2px;
padding-left: 2px;
width: 90%;
height: 90%;
}

.visitor {
width: 100%;
height: 100%;
object-position: 100% 100%;
object-fit: cover;
}

.pages-top{
width: 50vw;
height: 300px;
padding:10px;
margin-bottom:10px;
border: 2px solid #fff;
border-radius: 10px;
}
</style>


とりあえずここまで

 とりあえず今回はステータスの部分とキャラクターの移動の部分の説明のみをおこないました。

 次回の投稿で他の部分の実装の説明もしていきたいと思います。


追加(2018.11.17)

フォントをPixelMplusに変更してみました!