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

更新 : 2022/10/27

カテゴリー : 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>

まとめ

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

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

山田

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

りこ

どうすればいいの？

山田

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

アル

あ、ずるい！

山田

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

りこ

……まさか、食べ……

山田

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

アル

はーい！

りこ

はーい！

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

オススメ記事

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クラス

まとめ

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

オススメ記事

【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法！ 小学生からのプログラミング入門

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

webpackを使ってゲームエンジンを作ろう！（JSライブラリの作り方）

npm-scriptsの使い方。自作のコマンドによるタスク実行方法

【JavaScript】キー入力でキャラを動かしてみよう！ 小学生からのプログラミング入門

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

Gitの使い方。バージョン管理する流れを、実際にやってみよう

pipenvの使い方。MacにPython環境を構築する方法

Pythonのtkinterを使って、ウィンドウを表示してみよう！

パスの書き方を覚えよう。絶対パス、相対パス、ルート相対パスの違い

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

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

【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法！　小学生からのプログラミング入門

【JavaScript】キー入力でキャラを動かしてみよう！　小学生からのプログラミング入門

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

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