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 -

ドットインストール

仮想通貨ロボットで収益化

ソースコードを公開できるようになりました。

Web版にしかないレッスンがあります。

最新記事 - New Posts -

口座状況(第55週)

口座状況(第54週)

４月１日

年間収支

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

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

共有:

関連記事 - Related Posts -

最新記事 - New Posts -

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