Vue.jsでHighLowゲームをつくったよ
Vue.jsとは
Vueの公式ページからのコピペ
Vue (発音は / v j u ː / 、 view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。
リアクティブなことを使って何かをしたい
たまたまハイローゲームの話が友達との間で出たのでそれを実装してみました。
コード
Flaskをサーバに使っているためデリミターを変更しています。npmしろってはなしなんですけどCDNの書き方しかわからんのだわこれが・・・・
作ったゲームのページですHighLow
<!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"> <title>HighLow</title> <!-- 開発バージョン、便利なコンソールの警告が含まれています --> <script src="../static/js/Vue/vue.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/siimple@3.1.1/dist/siimple.min.css"> </head> <body> <h1>ハイローゲーム</h1> <div id="app"> <h2>残りのカード</h2> <div class="siimple-grid-row"> <div class="siimple-grid-col siimple-grid-col--0" v-for="card in cards" v-bind:key="card"> [[card]] </div> </div> <h2>現在のカード</h2> <div>[[nowcard]]</div> <div class="siimple-tag siimple-tag--success" v-show="judge">Success!!</div><br> <div class="siimple-btn siimple-btn--red" v-show="!start" v-on:click="Start">Game Start</div> <div class="siimple-btn siimple-btn--red" v-show="start" v-on:click="High">High</div> <div class="siimple-btn siimple-btn--blue" v-show="start" v-on:click="Low">Low</div> </div> </body> </html> <script> var vm = new Vue({ el: "#app", delimiters: ['[[', ']]'], // Flaskのdelimiterとの重複を回避 data: { cards: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], nowcard: null, start: false, judge: false, message: null }, methods: { draw: function() { var random = Math.floor(Math.random() * this.cards.length); this.nowcard = this.cards[random] this.cards.splice(random, 1) }, High: function() { var before_card = this.nowcard this.draw() if (this.nowcard >= before_card) { this.judge = true } else { this.loseprocess() } this.winCheck() }, Low: function() { var before_card = this.nowcard this.draw() if (this.nowcard <= before_card) { this.judge = true } else { this.loseprocess() } this.winCheck() }, winCheck: function() { if (this.cards.length == 0) { alert("よううぃn!") this.judge = false this.start = false this.cards = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13] this.nowcard = null } }, loseprocess: function() { this.judge = false this.start = false this.cards = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13] alert("ゲームオーバー" + this.nowcard) this.nowcard = null }, Start: function() { this.draw() this.start = true } } }) </script>
まとめ
さくっとできた