1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門

【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座こうざ、今回もはじめていきましょう!

前回はプログラミングにおける、クラスの使い方を学びました。
しかし、まだクラスをどうやって使えばいいのか、ピンときていないかもしれません。

そこで今回は、これまで作成してきたゲームを、クラスを使ったものに書き換えていきたいと思います。

山田

クラスを使うと、プログラムがとても見やすいものになるんだべ

りこ

どうプログラムが変わっていくんだろう? 楽しみ!

目次
  1. スプライトクラスを作ろう!
  2. ゲームクラスを作ろう!
  3. 入力(Input)クラスを作ろう!
  4. プログラム全体をクラスを使って書いてみよう!
  5. まとめ

スプライトクラスを作ろう!

スプライトは「動かしたい画像」のことです。
Scratchスクラッチにもあったスプライトと同じです。ではスプライトのためのクラスを作ってみましょう。

class Sprite {
	constructor( img, left, top ) {
		this.left = left || 0;
    		this.top = top || 0;
		this.img = new Image();
		this.img.src = img;
		this.width = 32;
		this.height = 32;
	}
}

2行目、コンストラクタconstructorの部分に、img、left、topというふうに書かれています。
これは「どの画像」の「左から何px」「上から何px」の部分かを指定するものです。

では次の画像を使うとします。

りこちゃん、山田先生、アル君が、1つの画像のなかにあります。
この中から、アル君のスプライトを作りたいとします。

するとアル君は左から65px、上から0pxの場所にありますので、その場所を指定してあげます。

山田

スプライトを作りたいと思ったら、さっき作ったスプライトクラスのメンバーに入れてあげれば、スプライトになるんだべ

アル

どうやってやるんだっけ?

山田

こんなふうにすればいいべ!

let aru = new Sprite( 'img/character.png', 65, 0 );

letというのは ES6から使えるようになった、変数へんすうを使うよと宣言せんげんするためのコマンドです。
使い方はvarと同じですが、変数の有効範囲ゆうこうはんいことなります。

letでaruを宣言し、aruをSpriteスプライトクラスのメンバーに入れてあげます。
Spriteの後ろには、()をつけて、画像のパスと画像のどの部分をスプライトにするかを指定します。
そうすることで、アル君のスプライトが作られるのです。

今回は1つの画像を縦横32pxの大きさにあらかじめ決めてあるので、左と上のpx数だけ指定すればその画像が表示されます。

りこ

でもこれだとまだスプライトは表示されないよ

山田

じつはそうなんだべ。そこでゲームクラスを作って、スプライトをゲーム上に表示できるようにするべ

ゲームクラスを作ろう!

さて、スプライトクラスには、ゲーム上にスプライトを表示させる機能をつけていません。
スプライトの表示はゲームクラスに作っていきます。

class Game {
	constructor( width, height ) {
		this.width = width || 320;
		this.height = height || 320;
 
		canvas = document.getElementById( 'canvas' );
		canvas.width = this.width;		//canvasの横幅(よこはば)
		canvas.height = this.height;		//canvasの縦幅(たてはば
 
		ctx = canvas.getContext( '2d' );
	}
	add( sprite, x, y ) {
		if ( typeof x === "undefined" ) sprite.x = 0;
		else sprite.x = x;
		if ( typeof y === "undefined" ) sprite.y = 0;
		else sprite.y = y;
		ctx.drawImage( sprite.img, sprite.left, sprite.top, sprite.width, sprite.height, sprite.x, sprite.y ,sprite.width, sprite.height );
	}
}

ゲームクラスでは、実際のゲームで使うcanvasの表示や設定などを行います。
また、14〜20行目で、add()を使ってスプライトをゲーム上に表示できるようにしています。

以下のようにすると縦横640pxのゲームの画面をつくることができます。

let game = new Game( 640, 640 );

りこちゃん、山田先生、アル君のオブジェクトを作成し、さきほどゲームクラスで作成したadd()を使って、メインループ内でスプライトを呼び出します。

〜省略(さきほど作ったクラスや、グローバル変数)〜
 
let game = new Game( 640, 640 );
 
let rico = new Sprite( 'img/character.png' );
let yamada = new Sprite( 'img/character.png', 33, 0 );
let aru = new Sprite( 'img/character.png', 65, 0 );
 
function main() {
	//キャラクターのスプライトを表示
	game.add( rico, 0, 0 );
	game.add( aru, 32, 64 )
	game.add( yamada, 96, 96 );
 
	requestAnimationFrame( main );
}
addEventListener('load', main(), false);
りこ

あらかじめクラスを作っておけば、こんなに簡単にゲームの画面やスプライトを表示できるようになるのね!

山田

ブラウザで確認すると、こんなふうになるべ

アル

わー、僕たち3人が表示されてる!

入力(Input)クラスを作ろう!

続いて、Inputクラスを作ってみます。
Inputは「入力する」という意味で、キー入力のためのクラスとします。

class Input {
	constructor() {
		this.up = false;
		this.left = false;
		this.down = false;
		this.right = false;
	}
	push_key() {
		addEventListener( "keydown", () => {
			const key_code = event.keyCode;
			if( key_code === 37 ) this.left = true;
			if( key_code === 38 ) this.up = true;
			if( key_code === 39 ) this.right = true;
			if( key_code === 40 ) this.down = true;
			event.preventDefault();		//方向キーでブラウザがスクロールしないようにする
		}, false);
		addEventListener( "keyup", () => {
			const key_code = event.keyCode;
			if( key_code === 37 ) this.left = false;
			if( key_code === 38 ) this.up = false;
			if( key_code === 39 ) this.right = false;
			if( key_code === 40 ) this.down = false;
		}, false);
	}
}

このInputクラスは、あらかじめよく使うと思うボタンを設定せっていしておいて、そのボタンが押されているかどうかを判断はんだんするものです。

今回はそれぞれの方向キーが押されているかどうかを判断できるようにしました。

inputオブジェクトを作ります。

let input = new Input();

あとは、push_key()を呼び出し、条件分岐でキーが入力されたときにどうしたいのかを書いていきます。
例えばこのようにすると、左キーが押されている間xから6ずつ引いていくというプログラムになります。

function main() {
	input.push_key();
	if ( input.left === true ) x-=6;
	requestAnimationFrame( main );
}
addEventListener('load', main(), false);
りこ

これでキャラ移動もつくれそうだね!

プログラム全体をクラスを使って書いてみよう!

では、プログラム全体をクラスを使って書いてみます。

'use strict';
 
//グローバル変数の定義
let canvas;
let ctx;
 
//マップの作成(さくせい)
let map = [
	[0, 0, 1, 0, 1, 0, 0, 0 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,1 ,0],
	[0, 1, 0, 0, 0, 1, 1, 1 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,1 ,0 ,1 ,0],
	[0, 0, 1, 1, 0, 0, 0, 1 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,0],
	[1, 0, 1, 0, 1, 1, 0, 0 ,0 ,1 ,1 ,1 ,1 ,1 ,0 ,0 ,1 ,0 ,1 ,0],
	[0, 0, 0, 0, 0, 1, 1, 1 ,0 ,1 ,0 ,0 ,0 ,0 ,1 ,1 ,0 ,1 ,1 ,0],
	[0, 1, 1, 1, 0, 0, 0, 0 ,0 ,1 ,0 ,1 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0],
	[0, 1, 1, 1, 0, 1, 1, 1 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,1 ,1 ,1 ,0],
	[0, 0, 0, 1, 0, 0, 0, 0 ,1 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,1 ,0],
	[1, 1, 0, 1, 1, 1, 1, 1 ,1 ,0 ,1 ,1 ,0 ,0 ,1 ,1 ,1 ,0 ,1 ,1],
	[1, 0, 0, 0, 0, 0, 1, 1 ,0 ,0 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,1 ,0],
	[1, 0, 1, 1, 1, 0, 0, 0 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,1 ,1 ,0 ,0],
	[1, 0, 1, 0, 1, 1, 1, 0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,0 ,1],
	[0, 0, 1, 0, 0, 1, 0, 0 ,1 ,0 ,0 ,1 ,0 ,1 ,0 ,1 ,1 ,1 ,0 ,0],
	[0, 1, 1, 1, 0, 1, 0, 1 ,0 ,0 ,1 ,1 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,0],
	[0, 0, 0, 1, 0, 1, 0, 0 ,1 ,0 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0 ,0 ,0],
	[1, 1, 0, 1, 0, 1, 0, 1 ,1 ,0 ,0 ,1 ,0 ,1 ,1 ,0 ,1 ,1 ,1 ,0],
	[0, 0, 0, 1, 0, 1, 1, 1 ,1 ,1 ,0 ,1 ,0 ,1 ,1 ,0 ,0 ,0 ,1 ,0],
	[0, 1, 1, 1, 0, 1, 0, 0 ,0 ,0 ,0 ,1 ,0 ,0 ,0 ,1 ,1 ,0 ,1 ,1],
	[0, 1, 0, 0, 0, 1, 0, 1 ,1 ,1 ,0 ,0 ,1 ,1 ,0 ,1 ,0 ,0 ,0 ,0],
	[0, 0, 0, 1, 0, 0, 0, 1 ,1 ,1 ,1 ,0 ,0 ,0 ,1 ,1 ,1 ,1 ,1 ,0]
]
 
 
//スプライトクラス
//img : スプライトに使う画像
//left : 画像の左から何ピクセルの部分を使うか
//top : 画像の上から何ピクセルの部分を使うか
class Sprite {
	constructor( img, left, top ) {
		this.left = left || 0;
    		this.top = top || 0;
		this.img = new Image();
		this.img.src = img;
		this.width = 32;
		this.height = 32;
	}
}
 
//ゲームクラス
//width : ゲーム全体の横幅
//height : ゲーム全体の縦幅
//
//add() : ゲームにスプライトを表示
class Game {
	constructor( width, height ) {
		this.width = width || 320;
		this.height = height || 320;
 
		canvas = document.getElementById( 'canvas' );
		canvas.width = this.width;		//canvasの横幅(よこはば)
		canvas.height = this.height;		//canvasの縦幅(たてはば
 
		ctx = canvas.getContext( '2d' );
	}
	add( sprite, x, y ) {
		if ( typeof x === "undefined" ) sprite.x = 0;
		else sprite.x = x;
		if ( typeof y === "undefined" ) sprite.y = 0;
		else sprite.y = y;
		ctx.drawImage( sprite.img, sprite.left, sprite.top, sprite.width, sprite.height, sprite.x, sprite.y ,sprite.width, sprite.height );
	}
}
 
//入力(Input)クラス
//up : 上キー
//left : 左キー
//down : 下キー
//right : 右キー
class Input {
	constructor() {
		this.up = false;
		this.left = false;
		this.down = false;
		this.right = false;
	}
	push_key() {
		addEventListener( "keydown", () => {
			const key_code = event.keyCode;
			if( key_code === 37 ) this.left = true;
			if( key_code === 38 ) this.up = true;
			if( key_code === 39 ) this.right = true;
			if( key_code === 40 ) this.down = true;
			event.preventDefault();		//方向キーでブラウザがスクロールしないようにする
		}, false);
		addEventListener( "keyup", () => {
			const key_code = event.keyCode;
			if( key_code === 37 ) this.left = false;
			if( key_code === 38 ) this.up = false;
			if( key_code === 39 ) this.right = false;
			if( key_code === 40 ) this.down = false;
		}, false);
	}
}
 
//inputオブジェクトの作成
let input = new Input();
 
//プレイヤークラス
//x : プレイヤーのx座標
//y : プレイヤーのy座標
//move : プレイヤーをうまく動かすためのもの
//
//move_sp() : プレイヤーのスプライトを動かす
class Player {
	constructor(x, y) {
		this.sprite = new Sprite( 'img/character.png' );
		this.x = x;
		this.y = y;
		this.move = 0;
	}
	move_sp() {
		input.push_key();
		game.add( this.sprite, this.x, this.y );
		if ( this.move === 0 ) {
			if ( input.left === true ) {
				var x = this.x/32;
				var y = this.y/32;
				x--;
				if ( map[y][x] === 0 ) {
					this.move = 32;
					input.push = 'left';
				}
			}
			if ( input.up === true ) {
				var x = this.x/32;
				var y = this.y/32;
				if ( y > 0) {
					y--;
					if ( map[y][x] === 0 ) {
						this.move = 32;
						input.push = 'up';
					}
				}
			}
			if ( input.right === true ) {
				var x = this.x/32;
				var y = this.y/32;
				x++;
				if ( map[y][x] === 0 ) {
					this.move = 32;
					input.push = 'right';
				}
			}
			if ( input.down === true ) {
				var x = this.x/32;
				var y = this.y/32;
				if ( y < 19 ) {
					y++;
					if ( map[y][x] === 0 ) {
						this.move = 32;
						input.push = 'down';
					}
				}
			}
		}
 
		//this.moveが0より大きい場合は、4pxずつ移動(いどう)を続ける
		if (this.move > 0) {
			this.move -= 4;
			if ( input.push === 'left' ) this.x -= 4;
			if ( input.push === 'up' ) this.y -= 4;
			if ( input.push === 'right' ) this.x += 4;
			if ( input.push === 'down' ) this.y += 4;
		}
	}
}
 
//ゲームオブジェクトの作成
let game = new Game( 640, 640 );
 
//プレイヤーのオブジェクトを作成
let player = new Player( 0, 0 );
 
//キャラクターのオブジェクトを作成
let yamada = new Sprite( 'img/character.png', 33, 0 );
let aru = new Sprite( 'img/character.png', 65, 0 );
 
//床、壁のマップチップのオブジェクトを作成
let floor = new Sprite( 'img/map.png', 0, 0 );
let wall = new Sprite( 'img/map.png', 33, 0 );
 
//メインループ
function main() {
	//塗(ぬ)りつぶす色を指定(してい)
	ctx.fillStyle = "rgb( 0, 0, 0 )";
	//塗(ぬ)りつぶす
	ctx.fillRect(0, 0, 640, 640);
 
	//マップを表示する
	for (var y=0; y<map.length; y++) {
		for (var x=0; x<map[y].length; x++) {
			if ( map[y][x] === 0 ) game.add( floor, 32*x, 32*y );
			if ( map[y][x] === 1 ) game.add( wall, 32*x, 32*y );
		}
	}
 
	//キャラクターのスプライトを表示
	player.move_sp();
	game.add( aru, 32, 64 );
	game.add( yamada, 96, 96 );
 
	requestAnimationFrame( main );
}
addEventListener('load', main(), false);

まとめ

今回はプログラム全体を、クラスを使ったものに書き換えてみました。

クラスを使うことで、ソースコードが綺麗きれい整理せいりされ、後からみたときも分かりやすくなります。
ぜひクラス使い方をマスターしましょう!

山田

スプライトクラスを作っておくと、簡単にスプライトをつくることができるべ。 クラスの便利さはわかってもらえたべか?

アル

うん、クラスって便利べんりなんだね

りこ

どこに何が書いてあったかなやむのも少なくなるね

山田

今回はわだずやアル君のスプライトも表示したべけど、まだ突っ立っているだけなんだべよ

りこ

なにかしゃべったりとかさせたいよね

山田

みんなで一緒いっしょ冒険ぼうけんにでかけるのもいいべ。 どんどんゲームらしくなるから、今後の記事を楽しみにするべよ

りこ

はーい!

アル

はーい!

この企画の一覧はこちら

  1. 小学生からのプログラミング入門。プログラミングってなぁに?
  2. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門
  3. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門
  4. Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門
  5. Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門
  6. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
  7. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
  8. JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門
  9. JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門
  10. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
  11. 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
  12. 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
  13. 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
  14. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  15. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  17. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  18. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  19. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  20. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  21. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  22. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門
  23. JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方
  24. webpackを使ってゲームエンジンを作ろう!(JSライブラリの作り方)

スポンサードリンク

関連コンテンツ

オススメ記事

Android Studio

【Android Studio】新規プロジェクトを作成する方法

前回、 Android Studio のインストールが完了しました。 その続きから始めていきましょう。 今回は新規プロジェクトを作成する方法です。 新規プロジェクトの作成 それ

【enchant.js入門】ガンシューティングゲームの作り方を完全解説!

enchant.jsを使ってガンシューティングゲームの開発を行なっていきます。 enchant.jsはゲームを作るのに特化したJavaScriptフレームワークです。 これを使うことで、Jav

fish shell

Fish shellの使い方。プラグインなしでもここまで可愛くできる!

先日、Macをフォーマットしたため、今まで構築したきた開発環境が消えました。 といっても、バックアップはとってあるので戻すことはできるのですが、せっかく綺麗に全部消えたので、もう一度作り直そうかな、

小学校プログラミング必修化。どんなことを学べばいいの?

2020年からのプログラミング必修化において、お子さんのいる方は、「いったいどんなことを学べばいいんだろう?」、「プログラミングなんてまったく分からないのに、どうやって教えてあげればいいんだろう……

PythonでUSBメモリのパスワードを解析。総当たりでロック解除してみよう!

みなさんこんにちは。@It_is_Rです。今回はPythonを使って、総当たりでUSBメモリのパスワードを解析する方法を紹介します。(※このストーリーはフィクションです) Rりこ師匠、

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

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

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

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

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

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

ファイルを分けるべよ!

【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回はりこちゃんを方向キーで操作《そうさ》することができるようになりました。しか

コメントをどうぞ!(コメントは承認後に反映されます)

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