Reactで作成しているタイピングゲームの3問目以降も表示されるようにしたいです。
解決したいこと
Next.js(TypeScript)でタイピングゲームをつくっています。
タイピングをして1問目を解いたら2問目は表示されるのですが2問目を解くと3問目が表示されず2問目が表示されます。
2問目解いたら3問目以降も順に問題が表示されるようにしたいです。
解決方法を教えて下さい。
※エラーコードは出ていません
※Qiitaでの初めての質問ですので質問の仕方が間違えていたらすみません。
該当するソースコード
↓ enLogoTyping.tsx
import Image from 'next/image'
import React, { useEffect, useState } from 'react'
import logoData from "../logoData"
const enLogoTyping = () => {
const [data, setData] = useState(logoData)
let k = 0
// 問題の画像
const [answerImg, setAnswerImg] = useState(data[k].thumbnail.url)
// 答えのテキスト
const [answerText, setAnswerText] = useState(data[k].name)
// 現在入力しているテキスト
const [currentText, setCurrentText] = useState("")
// 現在入力している位置
const [position, setPosition] = useState(0)
const playingKeyDownHandler = (e: React.KeyboardEvent<HTMLDivElement>) => {
const key = e.key
// 入力したキーと現在入力しようとしている文字が一致するとき
if (key === answerText[position]) {
// 現在の文字を入力済とする
setCurrentText(currentText + key)
// まだ入力していない文字があるとき
if (position <= answerText.length - 2) {
// 次の位置へ移動
setPosition(position + 1)
}
// 全ての文字を入力し終わったとき
if (position === answerText.length - 1) {
// 次の問題を表示
k ++
setAnswerImg(data[k].thumbnail.url)
setAnswerText(data[k].name)
setCurrentText("")
setPosition(0)
}
}
}
return(
<div
className='absolute w-full h-[700px] text-[2.5rem] font-medium text-white z-3 top-0'
onKeyDown={playingKeyDownHandler}
tabIndex={0}
>
<div className='flex flex-col justify-center items-center mt-10'>
<Image src={answerImg} width={180} height={180} alt="LOGO" />
<div className='mt-10 text-[3rem] text-white'>{currentText}</div>
</div>
</div>
)
}
export default enLogoTyping
↓ logoData.ts
const logoData = [
{
id: 1,
name: "HTML",
thumbnail: {
url: "/engame-icons/HTML.png",
}
},
{
id: 2,
name: "CSS",
thumbnail: {
url: "/engame-icons/CSS.png",
}
},
{
id: 3,
name: "JavaScript",
thumbnail: {
url: "/engame-icons/JavaScript.png",
}
},
{
id: 4,
name: "Java",
thumbnail: {
url: "/engame-icons/Java.png",
}
},
{
id: 5,
name: "Docker",
thumbnail: {
url: "/engame-icons/Docker.png",
}
},
]
export default logoData;
自分で試したこと
data[k]のkを3や4にした時には画像やテキストは表示され読み込まれました。
全ての文字を入力し終わったときの次の問題を表示のときにconsole.log(k)でkの値を確認をとっても1がずっと表示されカウントが上がらない。2問目を解いた後に全ての文字を入力し終わったときのif文には入っていることは確認しました。
0