Vue.jsで○×ゲームを作りたい初心者の日記※How to記事ではないです
諸事情あって、Vue.jsで○×ゲームを作ることになった。
しかし、Vue.jsは全くの初心者で、とても悪戦苦闘しています。
未来の自分が見て成長を感じるために、どんなコードを書いたか日記として残していきたいと思います。
ここに書くコードは動かないコードがほとんどになると思いますので、参考にしないでください。
最初にhtml側。特に何もしていない。jQueryでやるときと違ってhtml側はシンプルになるのかな？ まだわかりませんが。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="style.css">
<title>Tic Tac Toe</title>
</head>
<body>
<div id="components">
<table>
<tr>
<td is="mark-area"></td>
<td is="mark-area"></td>
<td is="mark-area"></td>
</tr>
<tr>
<td is="mark-area"></td>
<td is="mark-area"></td>
<td is="mark-area"></td>
</tr>
<tr>
<td is="mark-area"></td>
<td is="mark-area"></td>
<td is="mark-area"></td>
</tr>
</table>
</div>
</body>
<script src="main.js"></script>
</html>
次にjs側、コピペはしていませんが、自分でも何を書いているのかわからないところが多々あります。
今一番の疑問は、コンポーネントの宣言部分とインスタンスを作成する部分どちらにも色々ロジックが書いてありますが、連携がとれておらず変数のやりとりとかができなくて困っています。
/*
やりたいこと：○×ゲームの作成
TODO:
mark3をコンポーネントから参照したい
勝敗判定ロジックの作成
その他デバッグ
*/
var bus = new Vue();
Vue.component('mark-area', {
data: function () {
return {
mark: ''
}
},
methods: {
mark: function () {
bus.$emit('set-mark', 2);
bus.$emit('change-turn');
}
},
template: '<td v-on:click.once="mark">{{ mark }}</td>'
})
new Vue({
el: '#components',
data: {
turn: 0,
mark3: ''
},
mounted: function () {
bus.$on('change-turn', this.changeTurn);
bus.$on('set-mark', this.setMark);
},
methods: {
changeTurn: function () {
this.turn = this.turn ? 0 : 1;
},
setMark: function (i) {
this.mark3 = this.turn ? '○' : '×';
console.log(this.mark3);
}
}
})
まだ描画するところまでで止まっていて、ゲームの初期化や勝敗判定などはできていません。
勝敗判定は、tableからデータを取得する方法さえわかれば、アルゴリズムはわかるので書けるはず。。
おそらく今ぶち当たってる壁が最大の壁なのかなと思っています。
プログラミング初心者によくある、何がわからないのかわからない状態に陥って、検索する手が止まることが頻繁にあります。
ここを越えると進むんだろうな〜と経験から思いますが、スキル不足でなかなか進まない...(´・ω・｀)
いいなと思ったら応援しよう！
