見出し画像

【Vue.js】キャラ当てクイズゲームを作成

エンジニアの休日

今回はJavaScriptのフレームワークであるVue.jsでクイズゲームを作成しました。

基本的な内容の復習にもなるので、ぜひ作成してみてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" media="screen" href="style.css">
  </head>
  <body>
    <div id="app">
      <h1>ワンピースキャラクイズ</h1>
      <div class="character-image" v-bind:style="{ backgroundImage: 'url(' + currentCharacter.imageUrl + ')' }"></div>
      <ul>
        <li v-for="character in characters" v-bind:key="character.name" v-on:click="checkAnswer(character.name)">
          {{ character.name }}
        </li>
      </ul>
      <p v-if="answerCorrect">当ったり〜！！</p>
      <p v-else-if="answerIncorrect">違うよ!もう一度チャレンジ</p>
      <button v-on:click="nextCharacter()">次のキャラクター</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="index.js"></script>
  </body>
</html>
const app = new Vue({
  el: '#app',
  data: {
    characters: [
      { name: 'ルフィ', imageUrl: 'img/luffy.png' },
      { name: 'ゾロ', imageUrl: 'img/zoro.png' },
      { name: 'ナミ', imageUrl: 'img/nami.png' },
      { name: 'ウソップ', imageUrl: 'img/usopp.png' },
      { name: 'サンジ', imageUrl: 'img/sanji.png' },
      { name: 'チョッパー', imageUrl: 'img/chopper.png' },
      { name: 'ロビン', imageUrl: 'img/robin.png' },
      { name: 'フランキー', imageUrl: 'img/franky.png' },
      { name: 'ブルック', imageUrl: 'img/brook.png' }
    ],
    currentCharacter: {},
    answerCorrect: false,
    answerIncorrect: false
  },
  created() {
    this.chooseCharacter();
  },
  methods: {
    chooseCharacter() {
      const index = Math.floor(Math.random() * this.characters.length);
      this.currentCharacter = this.characters[index];
      this.answerCorrect = false;
      this.answerIncorrect = false;
    },
    checkAnswer(name) {
      if (name === this.currentCharacter.name) {
        this.answerCorrect = true;
        this.answerIncorrect = false;
      } else {
        this.answerCorrect = false;
        this.answerIncorrect = true;
      }
    },
    nextCharacter() {
      this.chooseCharacter();
    }
  }
});

この記事が気に入ったらサポートをしてみませんか？