【JavaScript】文字を表示するクラスを作ってみよう！　小学生からのプログラミング入門

更新 : 2022/01/06

カテゴリー : JavaScript, プログラミング・Web

by : It is R

小学生からのJavaScript講座です。
このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。
シリーズの一覧はこちらをご覧ください。

さて、ゲーム作成で重要なキャラ移動などのプログラムはすでに完成しています。
でも、やっぱりRPGにはキャラクター同士の会話がほしいですよね！

そこで今回は、テキスト表示の方法を学んでいきましょう。

アル

うーん……

りこ

どうしたの？

アル

やっぱりゲームには会話が欲しいとおもってるんだけど、どうやるのかな

山田

じゃあ、今回は文字の表示について学んでいくべ！

りこ

山田先生だー。わーい！

アル

はやくやろうよ！

画面に文字を表示してみよう！
今回使うGameクラス
まとめ

画面に文字を表示してみよう！

まずは画面に文字を表示するところから始めてみましょう！

山田

まずは画面に文字を表示する方法だべ

りこ

どうやるの？

山田

「fillText」と「strokeText」の２つの方法があるべだけど、「strokeText」は文字のふちのみを表示するもので、ゲームにはあまり向いてないべ。そこで今回は「fillText」を紹介するべ！

'use strict';

//canvasの設定（せってい）
let canvas = document.getElementById( 'canvas' );
canvas.width = 640;		//canvasの横幅（よこはば）
canvas.height = 480;	//canvasの縦幅（たてはば）

//コンテキストを取得（しゅとく）
let ctx = canvas.getContext( '2d' );

ctx.fillStyle = "#000";
ctx.fillRect( 0, 0, 640, 480 );

//文字の設定
ctx.fillStyle = '#fff';
ctx.font = "24px 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ ゴシック', 'MS Gothic', sans-serif";

//文字の表示
ctx.fillText( '山田ですだべ', 0, 24 );

このプログラムで文字表示に大切なのは、１４行目〜１９行目です。
１５行目のctx.fillStyle = '#fff';は、文字の色を指定しています。
#fffというのは、白という意味です。#000とすると黒になりますが、背景も黒いので見えません。

１６行目のctx.font = "24px 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳゴシック', 'MS Gothic', sans-serif";は、フォントを指定しています。
手前に書いたフォントほど、優先順位が高くなります。優先順位が高いフォントがパソコンに見つからなければ、次のフォントを表示し、そのフォントが見つからなければ、また次のフォントを表示するというふうになります。

１９行目で、実際に文字を表示します。
後ろの数値は文字を表示する位置です。今回はx座標が0、y座標が24のところに、「山田ですだべ」と表示しています。

りこ

こうやって文字を表示するんだね。でも前回学んだクラスを使ってないよ

山田

今から使っていくべよ。さらに今回は前回よりもっとGameクラスに手を加えるべ

今回使うGameクラス

前回のゲームクラスでは、ループを自分で作る必要がありました。
今回はGameクラスの中にループを組み込んでみましょう。

今回はソースが長くなりますので、jsファイルを分けて作っていきたいと思います。
ではまずgame.jsファイルを以下のように作成しましょう。

game.js

'use strict';

//Gameクラス
class Game {
  constructor( width, height ) {
    this.objs = [];

    //もしもwidthやheight何も代入されていなければ、320を代入する
    this.width = width || 320;
    this.height = height || 320;

    this.canvas = document.getElementById( 'canvas' );
    //canvasの横幅とたて幅

    canvas.width = this.width;
    canvas.height = this.height;

    this.ctx = canvas.getContext( '2d' );
  }

  //start()を呼び出すことで、メインループが開始される。
  start() {
    this._main();
  }

  //メインループ
  _main() {
    //背景を黒く塗りつぶす
    this.ctx.fillStyle = "#000";
    this.ctx.fillRect( 0, 0, this.width, this.height );
		
    //ゲームに登場するものの数だけ繰り返す
    for (let i=0; i<this.objs.length; i++) {
      //ゲームに登場するもののクラスから、render()を呼び出す
      this.objs[i].render( this.ctx );
    }

    //_main()を呼び出す（ループさせる）
    requestAnimationFrame(this._main.bind(this));
  }

  //ゲームにテキストなどを表示するための関数
  add( obj, x, y ) {
    obj.x = x || 0;
    obj.y = y || 0;
    this.objs.push( obj );
  }
}

//Labelクラス
class Label {
  //Labelの初期設定
  constructor( label ) {
    this.label = label;
    this.font = "24px 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ ゴシック', 'MS Gothic', sans-serif";
    this.color = '#fff';
    this.baseline = 'top';
  }

  //Labelを表示するための関数（メインループから呼び出される）
  render( ctx ) {
    ctx.fillStyle = this.color;
    ctx.font = this.font;
    ctx.textBaseline = this.baseline;
    ctx.fillText( this.label, this.x, this.y );
  }
}

山田

ゲーム全体に関することはGameクラスに、ラベルに関することはLabelクラスに書いていくべ

アル

それなら分かりやすいね

山田

でもここでいうGameクラスやLabelクラスは、いわゆるゲームエンジン。呼び出して使用できる形にしなくちゃいけないべよ

りこ

実際の会話を表示してしまうんじゃなくて、その会話を表示させるためのプログラムを作っておくってことね！

さらに、実際にゲームの内容を記述していくscript.jsファイルを作成します。

script.js

'use strict';

//ゲームのオブジェクトを640×480サイズで作る
let game = new Game( 640, 480 );

//ラベルオブジェクトを作る
let label = new Label( 'こんにちは' );

//add()を使って、ゲームにラベルを表示
game.add( label, 20, 40 );

//ゲームスタート
game.start();

山田

script.jsには実際のゲームの内容にかかわるプログラムを入れていくべよ

index.htmlファイルからは、上の２つのファイルを呼び出す必要があります。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>text</title>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script type="text/javascript" src="js/game.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

まとめ

今回は文字を表示するためのクラスをつくりました。
これで好きな位置に好きなように文字を表示することができます。

が、まだまだ改善《かいぜん》点があります。長い文章を入力したとき、画面の外に文字がはみ出てしまったり、するのです。
次回、このクラスをもっと改善していきましょう。

山田

今回のプログラムで、文字の表示はできるようになったべけど、長い文を書いた時、画面から文がはみ出てしまうべ

りこ

どうすればいいの？

山田

わだずは家に帰ってトムとジェリーを見たいから、つづきはまた次回にするべよ

アル

あ、ずるい！

山田

「いとしのジェリー」だべ

りこ

……まさか、食べ……

山田

次回を楽しみにするべよ！

アル

はーい！

りこ

はーい！

このシリーズの一覧はこちら

スポンサードリンク

オススメ記事

WindowsにPythonをインストールしてみよう！小学生からのPython入門

さて、今回もプログラミングを学んでいきましょう！前回までで、Scratch《スクラッチ》やJavaScript《ジャバスクリプト》でのゲーム開発《かいはつ》を体験《たいけん》し、RPGを作る

2021/12/13

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

道が覚えられない、@It_is_Rです。人生さえ彷徨い続けてここにいます。さて、運用中の WordPress サイトの環境を、ローカル開発環境と同期したい時、 WordMove を使うとと

2017/12/15

【 gulp 】超便利！ Sass で Normalize.css などをインポートする方法。

ふと立ち上がった瞬間に、ホットマットを猫に奪われる@It_is_Rです。全然どいてくれない。今回は gulp を使って、 Sass ファイルから Normalize.css などをインポー

2018/01/06

Local by Flywheelの使い方。かんたんWordPressローカル環境構築方法

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。今回はこれを使って、ローカルに

2018/01/16

M1 Mac対応。DockerでWordPress開発環境を構築する方法

みなさんこんにちは。@It_is_Rです。ローカルにWordPressの開発環境を作りたいとき、Dockerを使うと、とても簡単に構築することができます。しかし、実際に運営しているWordP

2019/06/23

【JavaScript】クラスの概念をしっかりと理解しよう！　小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう！前回はマップ上をキャラクターが自由に動くことができるようにしました。今回はES6から使われるようになった「クラス

2018/12/14

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボタング

2018/08/06

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。このシリーズの、前回の記事はこちらです。 Bootstrap 4 を読み込む

2017/11/25

JavaScriptで今月の残り日数を計算してみよう！　小学生からのプログラミング入門

さて、小学生からのJavaScript《ジャバスクリプト》入門、第２回目のはじまりです。今回は、JavaScriptでの演算（えんざん）の方法を学び、今月の残《のこ》り日数を計算してみましょう。

2018/11/21

【JavaScript】迷路やRPGで使えるマップを作ってみよう！　小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう！前回はHTML5とCanvasを使って、キャラクターがキーボードの入力《にゅうりょく》で移動《いどう》するところまで、紹

2018/12/01

4件のコメント “【JavaScript】文字を表示するクラスを作ってみよう！　小学生からのプログラミング入門”

とっても楽しく勉強できます。このような記事を作ってくださりありがとうございます！

質問があります。
配列内の要素を表示し切った後、別の配列内へ表示が移る、みたいな動作は可能なのでしょうか？

返信

>鈴木さん
コメントありがとうございます。

まず、「【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法！　小学生からのプログラミング入門」で紹介したプログラムは、文字の表示、文字を一文字ずつ表示、文字の切り替え、の方法を紹介したものですので、完璧なソースではありません。

ひとつ目の問題として、このプログラムでは、全ての文字を表示し切ったとき、表示できる文字がなくなり（undefinedになってしまいます）、ここでエラーが発生してしまいます。
配列内の要素を表示し切ったときに別の配列内に移る、というプログラムの場合、このエラーがあると、別の配列に移るときに停止してしまいます。

次に、このプログラムでは、文字が一文字ずつ表示されているうちに、スペースキーを押してしまうと、文章が途中で途切れて次の行に進んでしまいます。
１行の文字をすべて表示し切ってからしか次の行へ進めない、といった機能を付け加えないと、別の配列に移ったときに、文字が重なって読めなくなってしまいます。

そこで、game.jsのLabelクラスを、つぎのように変更してみました。

game.js

//〜省略〜

//Labelクラス
class Label {
	//Labelの初期設定
	constructor( label ) {
		//〜省略〜

		//下を追加
		this.isAllDisplayed = false;
	}
 
	//次の行への切り替え機能
	next() {
		//今の行がすべて表示されていなければ、行を切り替えない
		if ( this.label[ this._visibleLine].length !== this._displayLength ) {
			return
		}

		//ひとつ先の行がundefinedだったとき
		if ( typeof this.label[ this._visibleLine+1 ] === 'undefined' ) {
			this.isAllDisplayed = true;
			this._text = [];
			return;
		}

		this._visibleLine++;
		this._text = [];
		this._line = 0;
		this._displayLength = 0;
	}
	//〜省略〜
}

さらに、script.jsはこのように変更しました。

script.js

'use strict';
 
const nekodearu = [
	'吾輩は猫である。',
	'名前はまだ無い。',
	'どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いていた事だけは記憶して居る。'
];
const bocchan = [
	'親譲の無鉄砲で小供の時から損ばかりしている。',
	'小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。',
	'なぜそんな無闇をしたと聞く人があるかも知れぬ。',
	'別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。',
	'小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。'
]
 
//ゲームのオブジェクトを640×480サイズで作る
const game = new Game( 640, 480 );
 
//ラベルオブジェクトを作る
const nekoLabel = new Label( nekodearu );
nekoLabel.interval = 5;
nekoLabel.maxLength = 32;

const bocchanLabel = new Label( bocchan );
bocchanLabel.interval = 5;
bocchanLabel.maxLength = 32;
 
//add()を使って、ゲームにラベルを表示
game.add( nekoLabel, 0, 0 );

let strNum = 0;
let isDisplayBocchan = false;

//キーボードが押された時
addEventListener( "keydown", () => {
	const key_code = event.keyCode;

	if ( strNum === 0 ) {
		if( key_code === 32) nekoLabel.next();
	}
	else if ( strNum === 1 ) {
		if( key_code === 32) bocchanLabel.next();
	}

	if ( nekoLabel.isAllDisplayed ) {
		strNum = 1;
		if ( !isDisplayBocchan ) {
			isDisplayBocchan = true;
			game.add( bocchanLabel );
		}
	}
	event.preventDefault();		//方向キーでブラウザがスクロールしないようにする
}, false);
 
//ゲームスタート
game.start();

参考になれば幸いです。

返信

水野より:

2021年11月2日 6:28 PM

楽しく勉強させて頂いております。
index.htmlの「script2.js」は「script.js」の誤植かなと思いました。。

返信
1. It is R より:
  
  2021年11月2日 8:27 PM
  
  >水野さん
  コメントありがとうございます。
  申し訳ありません。おっしゃる通り、「script.js」とする部分を間違えてしまいました。
  記事は修正させていただきました。ありがとうございます。
  
  返信

画面に文字を表示してみよう！

今回使うGameクラス

まとめ

このシリーズの一覧はこちら

オススメ記事

WindowsにPythonをインストールしてみよう！小学生からのPython入門

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

【 gulp 】 超便利！ Sass で Normalize.css などをインポートする方法。

Local by Flywheelの使い方。かんたんWordPressローカル環境構築方法

M1 Mac対応。DockerでWordPress開発環境を構築する方法

【JavaScript】クラスの概念をしっかりと理解しよう！ 小学生からのプログラミング入門

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

JavaScriptで今月の残り日数を計算してみよう！ 小学生からのプログラミング入門

【JavaScript】迷路やRPGで使えるマップを作ってみよう！ 小学生からのプログラミング入門

4件のコメント “【JavaScript】文字を表示するクラスを作ってみよう！ 小学生からのプログラミング入門”

コメントを残す（コメントは承認後に反映されます） コメントをキャンセル

【 gulp 】超便利！ Sass で Normalize.css などをインポートする方法。

【JavaScript】クラスの概念をしっかりと理解しよう！　小学生からのプログラミング入門

JavaScriptで今月の残り日数を計算してみよう！　小学生からのプログラミング入門

【JavaScript】迷路やRPGで使えるマップを作ってみよう！　小学生からのプログラミング入門

4件のコメント “【JavaScript】文字を表示するクラスを作ってみよう！　小学生からのプログラミング入門”

コメントを残す（コメントは承認後に反映されます）コメントをキャンセル