Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
12
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@Sinhalite

スプラトゥーン2 おすすめブキ診断を作ってみた(Vue.js)

追記(2018/7/6)

続編
【Vue.js】スプラトゥーン2 おすすめブキ診断をパワーアップさせた【Part2】 - Qiita
を書きました。

きっかけ

最近Qiitaやはてブを開くと毎日のように「Vue.js」の話題が上がっているので、キャッチアップしなければ…ということで勉強を兼ねて作ってみました。

完成サイト

スプラトゥーン2 ブキ診断

ss.png

ソースコード

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>スプラトゥーン2 武器診断</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
  </head>
  <body>
    <div id="app">
        <h1>スプラトゥーン2 武器診断</h1>
        <h2>
          {{ message }}
        </h2>
        <div id="choice" v-if="choice">
            <a href="#" class="square_btn yes" v-on:click="clickAnswer('Yes')">はい</a>
            <a href="#" class="square_btn no" v-on:click="clickAnswer('No')">いいえ</a>
        </div>
        <div id ="retry" v-if="retry_btn">
            <a href="#" class="square_btn yes" v-on:click="retry">リトライする</a>
        </div>
    </div>
    <script src="js/main.js" ></script>
  </body>
</html>

main.js
var counter;
var quetions;
var weapons;
init();

function init(){
  counter = 0;
  quetions = [
    "エイムには自信がある",
    "キルよりも塗りのほうが好きだ",
    "かくれんぼが得意だ",
    "ガンガン前に突っ込むのが好きだ",
    "機動力が高い武器が好きだ",
    "トリッキーな武器が好きだ"
  ];
  weapons= {
    'スプラシューターコラボ':0,
    'N-ZAP85':0,
    'ジェットスイーパーカスタム':0,
    'デュアルスイーパーカスタム':0,
    'スプラマニューバーコラボ':0,
    'スプラチャージャー':0,
    'ホットブラスターカスタム':0,
    'スプラローラー':0,
    'パブロ':0,
    'バケットスロッシャーデコ':0,
    'バレルスピナー':0,
    'パラシェルター':0
  }
}

var app = new Vue({
  el: '#app',
  data: {
    choice: true,
    retry_btn: false,
    message: quetions[0]
  },
  methods: {
    clickAnswer: function (answer) {
      addPoint(answer,counter);
      counter += 1;
      if(counter > quetions.length-1){
        maxCount = 0
        maxWeapon = ""
        for(weapon in weapons) {
          if(maxCount < weapons[weapon]){
            maxCount = weapons[weapon];
            maxWeapon = weapon;
          }
        }
        this.message = "あなたには「" + maxWeapon + "」がオススメです!";
        this.choice = false;
        this.retry_btn = true;
      }else{
        this.message = quetions[counter];
      }
    },
    retry: function () {
      init();
      this.message = quetions[counter];
      this.choice = true;
      this.retry_btn = false;
    }
  }
});

function addPoint(answer,counter) {
  switch(counter){
    case 0:
      if(answer == 'Yes'){
        weapons['スプラシューターコラボ'] += 1;
        weapons['N-ZAP85'] += 1;
        weapons['ジェットスイーパーカスタム'] += 1;
        weapons['デュアルスイーパーカスタム'] += 1;
        weapons['スプラマニューバーコラボ'] += 1;
        weapons['スプラチャージャー'] += 1;
        weapons['バレルスピナー'] += 1;
      }else{
        weapons['ホットブラスターカスタム'] += 1;
        weapons['スプラローラー'] += 1;
        weapons['パブロ'] += 1;
        weapons['バケットスロッシャーデコ'] += 1;
        weapons['バレルスピナー'] += 1;
        weapons['パラシェルター'] += 1;
      }
      break;
    case 1:
      if(answer == 'Yes'){
        weapons['N-ZAP85'] += 1;
        weapons['デュアルスイーパーカスタム'] += 1;
        weapons['バレルスピナー'] += 1;
        weapons['バケットスロッシャーデコ'] += 1;
      }else{
        weapons['スプラシューターコラボ'] += 1;
        weapons['ジェットスイーパーカスタム'] += 1;
        weapons['ホットブラスターカスタム'] += 1;
        weapons['スプラローラー'] += 1;
        weapons['パブロ'] += 1;
        weapons['パラシェルター'] += 1;
        weapons['スプラマニューバーコラボ'] += 1;
        weapons['スプラチャージャー'] += 1;
      }
      break;
    case 2:
      if(answer == 'Yes'){
        weapons['スプラローラー'] += 1;
        weapons['パブロ'] += 1;
      }else{
        weapons['ジェットスイーパーカスタム'] += 1;
        weapons['バレルスピナー'] += 1;
        weapons['スプラチャージャー'] += 1;
      }
      break;
    case 3:
      if(answer == 'Yes'){
        weapons['スプラローラー'] += 1;
        weapons['パブロ'] += 1;
        weapons['バケットスロッシャーデコ'] += 1;
        weapons['ホットブラスターカスタム'] += 1;
        weapons['スプラシューターコラボ'] += 1;
        weapons['パラシェルター'] += 1;
        weapons['スプラマニューバーコラボ'] += 1;
      }else{
        weapons['N-ZAP85'] += 1;
        weapons['デュアルスイーパーカスタム'] += 1;
        weapons['ジェットスイーパーカスタム'] += 1;
        weapons['バレルスピナー'] += 1;
        weapons['スプラチャージャー'] += 1;
      }
      break;
    case 4:
      if(answer == 'Yes'){
        weapons['スプラローラー'] += 1;
        weapons['パブロ'] += 1;
        weapons['N-ZAP85'] += 1;
        weapons['スプラシューターコラボ'] += 1;
        weapons['スプラマニューバーコラボ'] += 1;
      }else{
        weapons['ホットブラスターカスタム'] += 1;
        weapons['バケットスロッシャーデコ'] += 1;
        weapons['ジェットスイーパーカスタム'] += 1;
        weapons['バレルスピナー'] += 1;
        weapons['スプラチャージャー'] += 1;
      }
      break;
    case 5:
      if(answer == 'Yes'){
        weapons['パラシェルター'] += 1;
        weapons['パブロ'] += 1;
        weapons['スプラチャージャー'] += 1;
      }else{
      }
      break;
  }
}

実装について

  • クリックで関数を実行する箇所には「v-on:click」を設定。
  • 条件によって表示を出し分けたい箇所には「v-if」を設定。
  • 連想配列でブキごとにポイントを持つ。回答を元にポイントを加算し、最大ポイントのブキをリコメンド。
  • 設問ごとにcase文で分岐。その中で「はい」「いいえ」を元に、ブキポイントを加算。あんまり設問が多くなると、長くなりすぎて良くない。

感想

このレベルの簡単なWEBアプリだと、Vue.jsを使うメリットはそこまで大きくないかもしれません。
ただシンプルで記述も分かりやすいですし、人気のある理由が分かりました。

もっと良い書き方などありましたら、ご教授いただけるとありがたいです。

(ちなみに私の診断結果は「スプラローラー」でした…。ほとんど使ってないけど…。)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
12
Help us understand the problem. What are the problem?