<template>
<div id="app">
<div v-if="playing">
<span>{{ pressed }}</span>{{ word }}
<br>
<br>
miss:{{ miss }}
</div>
<div v-else>Spaceでスタート</div>
</div>
</template>
<script>
export default {
data() {
return {
words: ['apple', 'banana', 'grape'],
word: '',
pressed: '',
miss: 0,
playing: false,
};
},
created() {
addEventListener('keydown', (e) => {
if (e.key !== ' ' || this.playing) {
return;
}
this.playing = true;
this.setWord();
this.keyDown();
});
},
methods: {
setWord() {
this.word = this.words.splice(Math.floor(Math.random() * this.words.length), 1)[0];
},
keyDown() {
addEventListener('keydown', (e) => {
if (e.key !== this.word[0]) {
this.miss++;
return;
}
this.pressed += e.key;
this.word = this.word.slice(1);
if (this.word.length === 0) {
this.pressed = '';
if (this.words.length === 0) {
this.word = 'おしまい';
return;
}
this.setWord();
}
});
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
span {
opacity: 0.5;
}
</style>
配列からランダムな値を取り出す
setWord
メソッドを作り、created
で呼び出しています。
その際words
の中からランダムな値をword
に格納。
<template>
<div id="app">
<div>
{{ word }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
words: ['apple', 'banana', 'grape'],
word: '',
}
},
created() {
this.setWord();
},
methods: {
setWord() {
this.word = this.words[Math.floor(Math.random() * this.words.length)];
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
#タイピングの処理
keyDown
メソッドを作り、created
で呼び出しています。
入力されたKeyと現在のword
の頭文字が一致しない場合はmiss
が加算。
pressed
には入力されたkeyを格納。
word
にはkeyが押されるごとに頭文字を削除し再代入します。
これで入力した文字と未入力の文字を仕分けしています。
word
が全て無くなったらpressed
をリセットし、新しいword
を表示させます。
<script>
export default {
data() {
return {
words: ['apple', 'banana', 'grape'],
word: '',
pressed: '',
miss: 0,
}
},
created() {
this.setWord();
this.keyDown()
},
methods: {
setWord() {
this.word = this.words[Math.floor(Math.random() * this.words.length)];
},
keyDown() {
addEventListener('keydown', (e) => {
if (e.key !== this.word[0]) {
this.miss++;
return;
}
this.pressed += e.key;
this.word = this.word.slice(1);
if (this.word.length === 0) {
this.pressed = '';
this.setWord();
}
});
},
}
}
</script>
Viewでpressed
とword
連結させます。
入力されていることが分かりやすいようにpressed
をspan
タグで囲みスタイルをつけます。
あとmiss
のカウントをここで表示させます。
<template>
<div id="app">
<div>
<span>{{ pressed }}</span>{{ word }}
<br>
<br>
miss:{{ miss }}
</div>
</div>
</template>
<style>
span {
opacity: 0.5;
}
</style>
単語の重複を防ぐ
現時点だと単語が重複して無限に遊べるので一度出た単語は消してしまいます。
<script>
setWord() {
this.word = this.words.splice(Math.floor(Math.random() * this.words.length), 1)[0];
},
</script>
ゲームの開始と終了の処理
data
にplaying
を追加しSpaceキーを押すことでfalse
からtrue
にします。
<template>
<div id="app">
<div v-if="playing">
<span>{{ pressed }}</span>{{ word }}
<br>
<br>
miss:{{ miss }}
</div>
<div v-else>Spaceでスタート</div>
</div>
</template>
<script>
export default {
data() {
return {
words: ['apple', 'banana', 'grape'],
word: '',
pressed: '',
miss: 0,
playing: false,
}
</script>
Spaceキーが押されたらplaying
がtrue
になり、ゲームスタートです。
|| this.playing
で再スタートを防ぎます。
<script>
created() {
addEventListener('keydown', (e) => {
if (e.key !== ' ' || this.playing) {
return;
}
this.playing = true;
this.setWord();
this.keyDown();
});
},
</script>
words
が空になったらおしまい
と表示させゲーム終了です。
<script>
keyDown() {
addEventListener('keydown', (e) => {
if (e.key !== this.word[0]) {
this.miss++;
return;
}
this.pressed += e.key;
this.word = this.word.slice(1);
if (this.word.length === 0) {
this.pressed = '';
if (this.words.length === 0) {
this.word = 'おしまい';
return;
}
this.setWord();
}
});
},
}
}
</script>
おしまい
以上となります。
もっとこうした方が良いんじゃない?
というのがあれば是非教えて下さいm(_ _)m