【JavaScript】ワンピースのタイピングゲームをプログラミングで作成

2023年7月29日 11:35

今回は、JavaScriptでタイピングゲームを作成しました。

よくある例ですが、作ってみるといい勉強になりますよ。

<!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" media="screen" href="style.css">
  </head>
  <body>
    <p class="result">[Enter] ゲームスタート</p>
    <p class="word"></p>
    <p class="img_center">
      <img class="img" src="">
    </p>
    <script src="index.js"></script>
  </body>

body {
    font-size: 42px;
    background-color: cornsilk;
}
.result{
    text-align: center;
}
span{
    font-size: 24px;
}
p.img_center {
    text-align: center;
}

const questions = [
  "akainu",
  "aokiji",
  "arlong",
  "buggy",
  "chopper",
  "crocodile",
  "doflamingo",
  "moria",
  "franky",
  "jinbe",
  "kizaru",
  "lucci",
  "luffy",
  "nami",
  "robin",
  "sanji",
  "usopp",
  "zoro",
];
let images = []; //ワンピースの画像一覧
for (let i = 0; i < questions.length; i++) {
  images.push(`img/${questions[i]}.png`)
}

const result = document.querySelector(".result");
const word = document.querySelector(".word");
const img = document.querySelector(".img");

const questionsNum = questions.length; // 問題の総数
let num = 0;  //出題された文字のindex番号
let question; //出題される文字

// 問題をランダムで出題させる関数
function setQuestion() {
  let random = Math.floor(Math.random() * questions.length);
  question = questions.splice(random, 1)[0];
  let image = images.splice(random, 1)[0];
  word.textContent = question;
  img.src = image;                   //a k a i n u
  num = 0;   //問題の文字のindex番号      0 1 2 3 4 5
}
// キーが押された時の処理
document.addEventListener("keydown", keyDown);
function keyDown(e) {
  if (e.key === "Enter") {  //e.keyで押されたkeyの種類
    if (result.textContent == "[Enter] ゲームスタート") {
      result.textContent = `${questionsNum}/${questionsNum}`;
      setQuestion();
      move.play();
      return;
    }
  }
  // タイプ文字が違う時
  if (e.key !== question[num]) {
    return;
  }
  // タイプ文字が合っていた時の処理
  num++; //その問題の次の文字
  word.textContent = question.substring(num);
  // 問題の単語をクリアした時
  if (num === question.length) {
    result.textContent = `${questions.length}/${questionsNum}`;
    move.currentTime = move.currentTime - 2000;
    if (questions.length === 0) {
      result.innerHTML = "ゲームクリア！！ <span>[Enter]もう一回やりますか？</span>";
      move.pause();
      img.src = "";
      gameEnd();
      return
    }
    setQuestion();
  }
}
// ゲーム終了時の処理
function gameEnd() {
  document.removeEventListener("keydown", keyDown);
  document.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      location.reload();
    }
  });
}
// 文字を動かすアニメーション
const move = word.animate(      //右端(0%)から左端(100%)へ
  [{ transform: "translateX(100%)" }, { transform: "translateX(0%)" }],//keyframes
  { duration: 7000, fill: "forwards" }
      //７秒          最後のキーフレーム（100%）のスタイルが適用
);
move.pause();
/* animate(keyframes, options)
第一引数に２つのキーフレームを指定すると、
  自動的にそれぞれの値がアニメーションの進捗が 0% と 100% に割り当てられる
    pause()メゾッド・・・一時停止させる
    play()メゾッド・・・一時停止しているアニメーションを再生する
    currentTimeプロパティ・・・アニメーションの現在の時間値をミリ秒単位で返す
    onfinishイベントハンドラプロパティ・・アニメーションの再生が終了したときに実行される
*/
// ゲームオーバー処理
move.onfinish = () => {
  result.innerHTML = `${questions.length + 1
    }/${questionsNum} <span>[Enter]再挑戦！！</span>`;
  gameEnd();
};

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