【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();
}
}
});