頼んだパソコンが、不手際でキャンセルされたー…Oh My God…
こんなことってあるんですね(´;ω;｀)
気を取り直して、今日からタイピングゲーム制作を始めました。
早速躓いたので、記事にします。
まずは、お決まりのできていないコードから
今回調べたことは、
1、文字をタイプしたら、どうやって文字を表示させるか
2、文字列を配列に分解する方法 ”split()”
3、配列に値を入力する ”push()”
4、配列に入力された値を削除する方法 ”pop()”
では、順番に見ていきましょう。
1、タイピングしたら、そのキーを取得するには
window.addEventListener(‘keydown’,(e)={
const getkey = e.key
});
こうすることで、タイプしたキーを取得できます。
※keydownのところは、keydownのほかに、keypress,keyupがあります。
この違いは、別の記事にしたいと思います。
軽く触れると、
keydown:キーが最初に押されたときに発生
keypress:キーが修飾キーでなければ発生(修飾キー:shiftキー,Altキー,Escキーなど)
keyup:キーが離されたときに発生
参考: https://techacademy.jp/magazine/19613
https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent
ちなみに、
JavaScriptのゲームを作るときは、keydown
今回のようなタイピングゲームを作るときは、ASCⅡを使うので、keypressになります。(この時点で、ASCⅡ使ってない…とりあえず、使わず行ってみます)
2、文字列を分解する方法split()
まず、これをなぜ使うのかというと、(少し、文字が多く長くなります。)
打った文字と問題(const questionAryyのところ)で出した文字が一致しているか調べるためです。問題が収納してあるところは、自分のコードだと配列で表示しています。
(上のコードの8行目)
const questionArry = [“red”, “blue”, “yellow”, “black”, “white”];
ここでは、配列に入っているのは、文字列である。
しかし、タイピングしたキーはバラバラで取得されるため、自分は、配列で収納したくて後述するpush()メソッドを使った。push()メソッドを使うと、配列の最後に値を入れていくことになるので、問題が収納してある配列と一致させるには、問題の配列の文字列をバラバラに収納する必要があったからです。
つまり、問題の配列
const questionArry = [“red”, “blue”, “yellow”, “black”, “white”];
をバラバラにするには、split(“”)を使うことで、配列の0番目の”red”を[“r”,”e”,”d”]
としています。
3、配列に値を入力する ”push()”
ここで2、の最後で書いた
“const questionArry = [“red”, “blue”, “yellow”, “black”, “white”];
をバラバラにするには、split(“”)を使うことで、配列の0番目の”red”を[“r”,”e”,”d”]
としています。”
問題を [“red”,…]から[“r”,”e”,”d”]にできました。
今度は、タイピングした文字を配列に入れたい。と思いました。
そこで、push()メソッドを使いました。
引数に、getkeyと指定することで、文字を入力する度、文字が配列の一番後ろに挿入されます。
例:タイピングでredと打つと、配列”letterArry”にはr,e,dの順番に挿入されていきます。
4、配列に入力された値を削除する方法 ”pop()”
今度は、もし、タイピングを間違えたら、文字を消す必要が出てきたので、配列の最後の文字を消せれば、タイピングの途中で間違えても間違えた文字だけ削除することができます。
そこで、思いついたのがpop()メソッドです。
これは、配列の最後の文字を削除するというものです。
1から4を使えば、うまくできると思っていたのですが、if文の中身が読み込まれず現在、先生に質問をしています。
以上です。
コメント