プログラミング

Web Development for Beginners を読む:レッスン11

投稿日:

web development

1. はじめに

Web Development for Beginners の 11日目(Creating a game using events) をやっていきます。

この1回分で1つのゲームを作ります。

※ 本記事は、ほぼ「個人的なメモ」です。

2. Lesson 11: Creating a game using events

Lesson 11: Creating a game using events

Event driven programming

イベント・ドリブンなプログラミングについての説明。

参考:Event-driven programming – Wikipedia

Common events

一般的なイベント

  • click
  • contextmenu
  • select
  • input

参考:イベントリファレンス | MDN

Creating the game

  • JavaScript においてイベントがどのように動くかを探求するために、ゲームを開発する。
  • プレイヤーのタイピングスキルをテストするためのゲームである。

ゲームの流れ

  • プレイヤーがスタートボタンをクリックすると、タイプする引用文が表示される。
  • プレイヤーは、できるだけ速く引用文をテキストボックスに入力する。
    • それぞれの単語が完了すると、次の単語がハイライトされる。
    • プレイヤーに入力間違いがあると、テキストボックスが赤色になる。
    • プレイヤーや引用文をすべて入力し終わると、経過時間とともに成功メッセージが表示される。

File structure

  • typing-game フォルダを作成する。
  • typing-game フォルダ直下に以下のファイルを作成する。
    • index.html
    • script.js
    • style.css

Create the user interface

必要な要素

  • ユーザーが入力する引用文を表示するところ
  • 成功メッセージなど、メッセージを表示するところ
  • 入力するためのテキストボックス
  • スタートボタン

Launch the application

VSCode に、Live Server 拡張機能をインストールする。

VSCode 画面の下に、「Go Live」と表示されるので、そこをクリックすると、Webサーバーが起動する。Webサーバーが起動すると、自動的にブラウザが開いて以下の URLのページが開いた。

http://127.0.0.1:5500/index.html

Add the CSS

style.css ファイルに以下を記述する。

/* 入力する引用文をハイライトする */
.highlight {
  background-color: yellow;
}

/* 入力が間違いだった場合にテキストボックスを赤くする */
.error {
  background-color: lightcoral;
  border: red;
}

JavaScript

script.js に記述するコードは3つのパートに分かれている。

Add the constants

まず、ここでは使用する引用文、変数、HTML要素などを用意する。

// all of our quotes
const quotes = [
    'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
    'There is nothing more deceptive than an obvious fact.',
    'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
    'I never make exceptions. An exception disproves the rule.',
    'What one man can invent another can discover.',
    'Nothing clears up a case so much as stating it to another person.',
    'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
];
// store the list of words and the index of the word the player is currently typing
let words = [];
let wordIndex = 0;
// the starting time
let startTime = Date.now();
// page elements
const quoteElement = document.getElementById('quote');
const messageElement = document.getElementById('message');
const typedValueElement = document.getElementById('typed-value');

Add start logic

スタートボタンのクリックイベントに対するイベントリスナーを登録する。

ゲームを開始するための準備を行っている。各処理についての説明はコメントを参照。

// スタートボタンのクリックイベントリスナー
document.getElementById('start').addEventListener('click', () => {
    // 引用文をランダムに1つ取得する
    const quoteIndex = Math.floor(Math.random() * quotes.length);
    const quote = quotes[quoteIndex];
    // Put the quote into an array of words
    // 単語毎に分解して配列にセットする
    words = quote.split(' ');
    // reset the word index for tracking
    wordIndex = 0;
  
    // UI updates
    // Create an array of span elements so we can set a class
    // 各単語を で囲む
    const spanWords = words.map(function(word) { return `${word} `});
    // Convert into string and set as innerHTML on quote display
    // 引用文を画面に表示する
    quoteElement.innerHTML = spanWords.join('');
    // Highlight the first word
    // 1つ目単語をハイライト表示する
    quoteElement.childNodes[0].className = 'highlight';
    // Clear any prior messages
    // メッセージ表示領域をクリアする
    messageElement.innerText = '';
  
    // Setup the textbox
    // Clear the textbox
    typedValueElement.value = '';
    // set focus
    typedValueElement.focus();
    // set the event handler
  
    // Start the timer
    startTime = new Date().getTime();
  });

Add typing logic

テキストボックスでの文字入力イベントに対するイベントリスナーを登録する。

各処理についての説明はコメントを参照。

// テキストボックス要素での入力イベントリスナー
typedValueElement.addEventListener('input', () => {
    // Get the current word
    // 現在、入力すべき単語を取得する
    const currentWord = words[wordIndex];
    // get the current value
    // 実際に、今入力された文字列を取得する
    const typedValue = typedValueElement.value;
  
    // 最後の単語が入力し終わった場合
    if (typedValue === currentWord && wordIndex === words.length - 1) {
      // end of sentence
      // Display success
      const elapsedTime = new Date().getTime() - startTime;
      const elapsedTime1 = elapsedTime / 1000;
      const message = `CONGRATULATIONS! You finished in ${elapsedTime1} seconds.`;
      messageElement.innerText = message;

    // スペースが入力された場合(1つの単語の入力が終わった場合)
    } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
      // end of word
      // clear the typedValueElement for the new word
      // テキストボックスをクリアする
      typedValueElement.value = '';
      // move to the next word
      wordIndex++;
      // reset the class name for all elements in quote
      // 全単語のハイライト表示をクリアする
      for (const wordElement of quoteElement.childNodes) {
        wordElement.className = '';
      }
      // highlight the new word
      // 次の単語をハイライト表示する
      quoteElement.childNodes[wordIndex].className = 'highlight';

    // 1つの単語の入力途中の場合
    } else if (currentWord.startsWith(typedValue)) {
      // currently correct
      // highlight the next word
      // テキストボックスの色をクリアする
      typedValueElement.className = '';
    // それ以外の場合(これは入力間違いがある場合に等しい)
    } else {
      // error state
      // テキストボックスの色を赤くする
      typedValueElement.className = 'error';
    }
  });

Test your application

実際にゲームをやってみる。

3. デモページ

このゲームのデモページを作りました。→ Typing game

4. おわりに

スタートボタンがテキストボックスの右側にあると、テキストボックスに何か入力してから押すボタンだと思ってしまうので、位置を変えるとよいと思いました。

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

React Redux

React と Redux を使ったウェブページのサンプルその1

React と Redux を使ってウェブページのサンプルを作ってみました。以下のURLからアクセスすることがでます。 デモページ 🔗 React + Redux のサンプル002 こ …

CSS Flexible Box Layout Module のサンプルページを作りました

CSS Flexible Box Layout Module のサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンシ …

WordPress

WordPressのソースコード。HTMLにPHPを埋め込むスタイル。

WordPress本体のPHPソースコードや、テーマに含まれているPHPのソースコードを見ると、やたらと PHPの開始タグ(<?php)と終了タグ(?>)が埋め込まれています。 例えば、こ …

normalizr の使い方

目次1. はじめに2. normalizr とは?3. 使い方ともう少し詳しい説明4. 関連 1. はじめに JavaScript のライブラリである normalizr の使い方を簡単に説明します。 …

Web Programming

サーバーからブラウザを通じてデスクトップ通知する方法(Push API を利用)

Push API を使ってサーバーからブラウザにメッセージを送る方法について説明しています。