JavaScriptでタイピングゲームを作る

2019/06/24

2019/06/25

この記事を書いている人 - WRITER -

サラリーマンエンジニアです。平成３１年４月１日から1日当たり100円を FX口座に積立てて令和元年の初日から自作プログラムによるシステムトレードをしています。プログラミングを基礎から学習しつつ効率的な自動売買ロジックを考えて、副収入で月給を超えることを目標にコツコツ頑張ります。

JavaScriptのミニアプリはドットインストールで学習出来ます。今回はタイピングゲームです。3秒間にどれだけ正確にタイプできるかを測るアプリです。index.html, styles.css, main.jsの３つのソースコードを作ればよく、実装、デバッグのコツはつかめてきました。講座の中では、問題点に対する原因と対策がすぐにわかる事になっているが、自力で作るアプリではバグを見つけ解消することが簡単ではないと思う。そのためにも講義をしっかり聞いて引き出しを増やしていきたい。

【完成時のソースコード】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Typing Game</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <p id="target">click to start</p>
  <p class="info">
    Letter count: <span id="score">0</span>,
    Miss count: <span id="miss">0</span>,
    Time left: <span id="timer">0</span>
  </p>
  <script src="js/main.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Typing Game</title>

</head>

<body>

click to start

Letter count: 0,

Miss count: 0,

Time left: 0

</body>

</html>

body {
  padding-top: 40px;
  font-family: 'Courier New', monospace;
  text-align: center;
}

#target {
  font-size: 48px;
  letter-spacing: 3px;
}

.info {
  color: #ccc;
}

body {

padding-top: 40px;

font-family: 'Courier New', monospace;

text-align: center;

}

#target {

font-size: 48px;

letter-spacing: 3px;

}

.info {

color: #ccc;

}

'use strict';

{
  const words = [
    'apple',
    'sky',
    'blue',
    'middle',
    'set',
  ];
  let word;
  let loc;
  let score;
  let miss;
  const timeLimit = 3 * 1000;
  let startTime;
  let isPlaying = false;

  const target = document.getElementById('target');
  const scoreLabel = document.getElementById('score');
  const missLabel = document.getElementById('miss');
  const timerLabel = document.getElementById('timer');

  function updateTarget() {
    let placeholder = '';
    for (let i = 0; i < loc; i++) {
      placeholder += '_';
    }
    target.textContent = placeholder + word.substring(loc);
  }

  function showResult() {
    const accuracy = score + miss === 0 ? 0 : score / (score + miss) * 100;
    alert(`${score} letters, ${miss} misses, ${accuracy.toFixed(2)}% accuracy!`);
  }

  function updateTimer() {
    const timeLeft = startTime + timeLimit - Date.now();
    timerLabel.textContent = (timeLeft / 1000).toFixed(2);

    const timeoutId = setTimeout(() => {
      updateTimer();
    }, 10);

    if (timeLeft < 0) {
      isPlaying = false;

      clearTimeout(timeoutId);
      setTimeout(() => {
        showResult();
      }, 100);

      timerLabel.textContent = '0.00';
      target.textContent = 'click to replay';
    }
  }

  window.addEventListener('click', () => {
    if (isPlaying === true) {
      return;
    }
    isPlaying = true;

    loc = 0;
    score = 0;
    miss = 0;
    scoreLabel.textContent = score;
    missLabel.textContent = miss;
    word = words[Math.floor(Math.random() * words.length)];

    updateTarget();
    startTime = Date.now();
    updateTimer();
  });

  window.addEventListener('keyup', e => {
    if (isPlaying !== true) {
      return;
    }

    if (e.key === word[loc]) {
      loc++;
      if (loc === word.length) {
        word = words[Math.floor(Math.random() * words.length)];
        loc = 0;
      }
      score++;
      scoreLabel.textContent = score;
      updateTarget();
    } else {
      miss++;
      missLabel.textContent = miss;
    }
  });
}

'use strict';

{

const words = [

'apple',

'sky',

'blue',

'middle',

'set',

];

let word;

let loc;

let score;

let miss;

const timeLimit = 3 * 1000;

let startTime;

let isPlaying = false;

const target = document.getElementById('target');

const scoreLabel = document.getElementById('score');

const missLabel = document.getElementById('miss');

const timerLabel = document.getElementById('timer');

function updateTarget() {

let placeholder = '';

for (let i = 0; i < loc; i++) {

placeholder += '_';

}

target.textContent = placeholder + word.substring(loc);

}

function showResult() {

const accuracy = score + miss === 0 ? 0 : score / (score + miss) * 100;

alert(`${score} letters, ${miss} misses, ${accuracy.toFixed(2)}% accuracy!`);

}

function updateTimer() {

const timeLeft = startTime + timeLimit - Date.now();

timerLabel.textContent = (timeLeft / 1000).toFixed(2);

const timeoutId = setTimeout(() => {

updateTimer();

}, 10);

if (timeLeft < 0) {

isPlaying = false;

clearTimeout(timeoutId);

setTimeout(() => {

showResult();

}, 100);

timerLabel.textContent = '0.00';

target.textContent = 'click to replay';

}

window.addEventListener('click', () => {

if (isPlaying === true) {

return;

}

isPlaying = true;

loc = 0;

score = 0;

miss = 0;

scoreLabel.textContent = score;

missLabel.textContent = miss;

word = words[Math.floor(Math.random() * words.length)];

updateTarget();

startTime = Date.now();

updateTimer();

});

window.addEventListener('keyup', e => {

if (isPlaying !== true) {

return;

}

if (e.key === word[loc]) {

loc++;

if (loc === word.length) {

word = words[Math.floor(Math.random() * words.length)];

loc = 0;

}

score++;

scoreLabel.textContent = score;

updateTarget();

} else {

miss++;

missLabel.textContent = miss;

}

});

}

この記事を書いている人 - WRITER -

mukuchan

JavaScriptでタイピングゲームを作る

関連記事 - Related Posts -

無駄遣い？

ドットインストール

JavaScriptでスライドショー

HTML & CSS 初級編完了

最新記事 - New Posts -

通勤時間の埋め合わせ

株主優待券

口座状況(第25週)

週間実績(9/9-9/14)

- Comments - コメントをキャンセル

JavaScriptでタイピングゲームを作る

共有:

関連記事 - Related Posts -

最新記事 - New Posts -

- Comments - コメントをキャンセル