プログラミング

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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Pug(旧Jade)テンプレートファイル内で、npmでインストールしたモジュールを使う方法

Pug(旧Jade)というJavaScriptのテンプレートエンジンがありますが、このテンプレートファイル内では JavaScriptが使えるので、複雑なHTMLを生成することができます。 但しデフォ …

Canvasでの回転

Canvas に回転した画像を表示するサンプルページを作りました

Canvas に回転した画像を表示するサンプルページを作りました。 Canvas の標準の機能では用意されていない操作なので、自分でこの処理を書く場合は少々面倒な記述が必要になります。 目次1. スク …

Canvas と WebGL を使ったサンプルページを作りました

Canvas と WebGL を使ったサンプルページを作りました 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット …

JavaScript

JavaScript で URL を扱う場合の処理

JavaScript で URL文字列に関する処理を行う場合、セキュリティの観点から、URL()コンストラクタを使うことが推奨されます。URL()コンストラクタによって URLオブジェクトを生成し、そ …

web development

Web Development for Beginners を読む:レッスン4と5

目次1. はじめに2. Lesson 4: JavaScript Basics: Data TypesVariables(変数)Constants(定数)Data Types3. Lesson 5: …