小学生からのプログラミング講座、今回もはじめていきましょう！
前回はプログラミングにおける、クラスの使い方を学びました。
しかし、まだクラスをどうやって使えばいいのか、ピンときていないかもしれません。
そこで今回は、これまで作成してきたゲームを、クラスを使ったものに書き換えていきたいと思います。
山田
クラスを使うと、プログラムがとても見やすいものになるんだべ
りこ
どうプログラムが変わっていくんだろう？ 楽しみ！
スプライトクラスを作ろう！
スプライトは「動かしたい画像」のことです。
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;
}
}２行目、コンストラクタの部分に、img、left、topというふうに書かれています。
これは「どの画像」の「左から何px」「上から何px」の部分かを指定するものです。
では次の画像を使うとします。
りこちゃん、山田先生、アル君が、１つの画像のなかにあります。
この中から、アル君のスプライトを作りたいとします。
するとアル君は左から６５px、上から０pxの場所にありますので、その場所を指定してあげます。
山田
スプライトを作りたいと思ったら、さっき作ったスプライトクラスのメンバーに入れてあげれば、スプライトになるんだべ
アル
どうやってやるんだっけ？
山田
こんなふうにすればいいべ！
let aru = new Sprite( 'img/character.png', 65, 0 );letというのは ES6から使えるようになった、変数を使うよと宣言するためのコマンドです。
使い方はvarと同じですが、変数の有効範囲が異なります。
letでaruを宣言し、aruをSpriteクラスのメンバーに入れてあげます。
Spriteの後ろには、()をつけて、画像のパスと画像のどの部分をスプライトにするかを指定します。
そうすることで、アル君のスプライトが作られるのです。
今回は１つの画像を縦横３２pxの大きさにあらかじめ決めてあるので、左と上の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の表示や設定などを行います。
また、１４〜２０行目で、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);りこ
あらかじめクラスを作っておけば、こんなに簡単にゲームの画面やスプライトを表示できるようになるのね！
アル
わー、僕たち３人が表示されてる！
入力（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から６ずつ引いていくというプログラムになります。
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);
まとめ
今回はプログラム全体を、クラスを使ったものに書き換えてみました。
クラスを使うことで、ソースコードが綺麗に整理され、後からみたときも分かりやすくなります。
ぜひクラス使い方をマスターしましょう！
山田
スプライトクラスを作っておくと、簡単にスプライトをつくることができるべ。 クラスの便利さはわかってもらえたべか？
アル
うん、クラスって便利なんだね
りこ
どこに何が書いてあったか悩むのも少なくなるね
山田
今回はわだずやアル君のスプライトも表示したべけど、まだ突っ立っているだけなんだべよ
りこ
なにか喋ったりとかさせたいよね
山田
みんなで一緒に冒険にでかけるのもいいべ。 どんどんゲームらしくなるから、今後の記事を楽しみにするべよ
りこ
はーい！
アル
はーい！
このシリーズの一覧はこちら
- 小学生からのプログラミング入門。プログラミングってなぁに？
- Scratchの使い方と、ゲーム作りの基礎知識を学ぼう！ 小学生からのプログラミング入門
- Scratchでじゃんけんゲームを作ろう！ 小学生からのプログラミング入門
- Scratchでシューティングゲームを作ろう！ 小学生からのプログラミング入門
- Scratchでピアノ鍵盤を作って音を鳴らそう！ 小学生からのプログラミング入門
- テキストエディタ（Visual Studio Code）をインストールしてみよう！ 小学生からのプログラミング入門
- Visual Studio Codeを日本語化してみよう！ 小学生からのプログラミング入門
- JavaScriptでおみくじを作ろう！ 小学生からのプログラミング入門
- JavaScriptで今月の残り日数を計算してみよう！ 小学生からのプログラミング入門
- JavaScriptで画像を表示してみよう！ 小学生からのプログラミング入門
- JavaScriptで画像を移動してみよう！ 小学生からのプログラミング入門
- 【JavaScript】キー入力でキャラを動かしてみよう！ 小学生からのプログラミング入門
- 【JavaScript】ファイルを分けて管理してみよう！ 小学生からのプログラミング入門
- 【JavaScript】オブジェクトを使ってみよう！ 小学生からのプログラミング入門
- 【JavaScript】ゲームのメインループを作ってみよう！ 小学生からのプログラミング入門
- 【JavaScript】キャラを決まった間隔ずつ動かす！ 小学生からのプログラミング入門
- HTML5とCanvasを使ってみよう！ 小学生からのプログラミング入門
- 【JavaScript】迷路やRPGで使えるマップを作ってみよう！ 小学生からのプログラミング入門
- 【JavaScript】マップでキャラを動かせるようにしよう！ 小学生からのプログラミング入門
- 【JavaScript】クラスの概念をしっかりと理解しよう！ 小学生からのプログラミング入門
- 【JavaScript】プログラム全体をクラスを使って作ってみよう！ 小学生からのプログラミング入門
- 【JavaScript】文字を表示するクラスを作ってみよう！ 小学生からのプログラミング入門
- 【JavaScript】改行と一文字ずつ画面に表示する方法！ 小学生からのプログラミング入門
- 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法！ 小学生からのプログラミング入門
- JavaScriptでRPGを作ろう！スマホにも対応したゲームの作り方
- webpackを使ってゲームエンジンを作ろう！（JSライブラリの作り方）
- WindowsにPythonをインストールしてみよう！小学生からのPython入門
- MacにPythonをインストールしてみよう！小学生からのPython入門
- Pythonでじゃんけんゲームを作ってみよう！小学生からのPython入門
- Pythonのtkinterを使って、ウィンドウを表示してみよう！
- Pythonのtkinterで、画像つきのおみくじゲームを作ろう！
コメント失礼致します。毎度お世話になっております。
現在、入力(Input)をクラスを作ろう
の手前まで進行しています。
ここまでの記述で動作確認してみると
Uncaught ReferenceError: canvas is not defined
at new Game (app.js:6:16)
at app.js:33:12
というエラーが出ます。
コピペもしてみたのですが、それでもエラーが出てしまいます。
canvas = document.getElementById(‘canvas’);
let game = new Game(640, 640);
この二行でエラーが起きています。
最後に記載のプログラム全体をコピペしてみても何個かエラーが出てしまいました。
関係ないかもしれませんが、class SpriteのSは大文字でいいのでしょうか？
class Game 内のadd(sprite, x, y) ~のコードでは小文字だったのでどちらかに統一しなくていいのか気になりました。
ここのif分がなんなのか理解できていないため、見当違いでしたらすみません。
ちなみに統一してもエラーはなくなりませんでした。