1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. 小学生からのJavaScript入門。ゲームのメインループを作ってみよう!

小学生からのJavaScript入門。ゲームのメインループを作ってみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第7弾です。

突然(とつぜん)ですが、ゲーム開発(かいはつ)の基本として大切なことってなんだったか覚えていますか?
そうです。「変数(へんすう)」、「条件分岐(じょうけんぶんき)」、そして「繰り返し(ループ)」の3つです。

ゲーム開発では、ループを使う必要があります。
今回はループを使った、JavaScriptでのゲーム開発の方法を紹介(しょうかい)していきます。

アル

アル

第7回目の講座(こうざ)でりこちゃんを動かしたとき、キャラが一瞬(いっしゅん)止まっちゃうんだ。どうすればいいのかな


りこ

りこ

ホントだ。方向キーを押した瞬間(しゅんかん)、止まっちゃうね。でもこの現象(げんしょう)どこかで見たような……えっと、なんだっけな


アル

アル

あ、Scratch(スクラッチ)を使ったときじゃない?


山田

山田

そうだべ。よく思い出したべな。じゃあ、それを直すのにどうしたか覚えてるだべか?


りこ

りこ

あ、繰り返し!


山田

山田

そうだべさ! じゃあ、今回はループ(繰り返し)の方法を紹介するべ!

目次
  1. requestAnimationFrame();でメインループを作ってみよう!
  2. りこちゃんの移動プログラムを、スムーズにしてみよう!
  3. まとめ

requestAnimationFrame();でメインループを作ってみよう!

りこ

りこ

JavaScriptでの繰り返しって、for()とか、while()だっけ?


アル

アル

なにそれ!?


山田

山田

まだ学習してないべからな……でも今回はそのどちらも使わないべ。今回使うコマンドはrequestAnimationFrame();だべ

JavaScriptでのループ(繰り返し)の方法はいくつかあります。
for()while()、といった繰り返しのコマンドもありますが、ゲーム開発でのメインループではrequestAnimationFrame()を使って繰り返しをすることが多いです。

function main() {

	//ここに繰り返したいものを書く

	requestAnimationFrame(main);
}
requestAnimationFrame(main);

山田

山田

まず、7行目のrequestAnimationFrame(main);で、1行目〜6行目のfunction main()に書かれたものが動くんだべ。その中にrequestAnimationFrame(main);を書いておくことで、またfunction main()に書かれたものを動かす。これをずっと繰り返すんだべ


りこ

りこ

こうやって繰り返すのね


アル

アル

じゃあ、この中に作ればいいんだ!


山田

山田

ちょっと待つべよ。そのまま繰り返してもだめなんだべ。それなりの工夫をして繰り返すべ。

りこちゃんの移動プログラムを、スムーズにしてみよう!

まず、第7回目の講座(こうざ)で作った、りこちゃんの移動プログラムはこのような動きをします。

下の枠内(わくない)を一度クリックしてから、方向キーでりこちゃんを動かしてみてね!

方向キーを押した瞬間(しゅんかん)、りこちゃんが止まってしまいますね。。。
では、これを直していきたいと思います。

前のプログラムは、方向キーが押された時に、りこちゃんの画像が32pxその方向へ動くというものでした。
ループを使う場合(ばあい)、少し考え方を変えてみます。

例えば、方向キーひとつひとつの変数を作り、その変数で方向キーが押されているかどうか調(しら)べます。
そして、「押されている間はループ内でキャラをその方向に動かし、押されていなければキャラを動かさない」という方法でりこちゃんを動かします。

方向キーひとつひとつの変数ですが、これはキーボードのオブジェクトを作ると分かりやすくなります。

まず、script.jsにりこちゃんのオブジェクトとキーボードのオブジェクトを作ります。
りこちゃんのオブジェクトは前回作ったので、そのままですね。

キーボードのオブジェクトですが、全てにfalseを代入しています。
これは「偽(ぎ)」という意味で、今回の場合(ばあい)はボタンが押されていない状態(じょうたい)であることを示(しめ)しています。

var rico = new Object();
rico.x = 0;
rico.y = 0;

var key = new Object();
key.up = false;
key.down = false;
key.right = false;
key.left = false;

さらに、ループを作ります。

function main() {

	requestAnimationFrame(main);
}
requestAnimationFrame(main);

ループの中には、ボタンが押された時に関数(かんすう)を呼び出すためのaddEventListener("keydown", keydownfunc, false);と、ボタンが放された時に関数を呼び出すためのaddEventListener("keyup", keyupfunc, false);を書きます。

addEventListener("keydown", keydownfunc, false);
addEventListener("keyup", keyupfunc, false);

さらにループの中に、ボタンが押されている場合(ばあい)はキャラを移動(いどう)するようにお願いを書いていきます。
trueというのは「真(しん)」という意味で、今回の場合はボタンが押されていることを示(しめ)しています。

if ( key.left === true ) rico.x -= 32;
if ( key.up === true ) rico.y -= 32;
if ( key.right === true ) rico.x += 32;
if ( key.down === true ) rico.y += 32;

さらにループの中に、りこちゃんの位置(いち)を決めるためのお願いを書いておきます。
これは前に作ったものと同じです。

document.getElementById( 'rico' ).style.top = rico.y + "px";
document.getElementById( 'rico' ).style.left = rico.x + "px";

ループの外側(そとがわ)に、ボタンが押されたときに呼び出される関数(かんすう)と、ボタンが放されたときに呼び出される関数を書きます。
方向ボタンが押されたときは、それぞれボタンのオブジェクトにtrueを代入します。
方向ボタンが放(はな)されたときは、それぞれのボタンのオブジェクトにfalseを代入します。

function keydownfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = true;
	if( key_code === 38 ) key.up = true;
	if( key_code === 39 ) key.right = true;
	if( key_code === 40 ) key.down = true;
}

function keyupfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = false;
	if( key_code === 38 ) key.up = false;
	if( key_code === 39 ) key.right = false;
	if( key_code === 40 ) key.down = false;
}

これで完成です。
script.js全体はこのようになります。

script.js

//りこちゃんのオブジェクトを作成
var rico = new Object();
rico.x = 0;
rico.y = 0;

//キーボードのオブジェクトを作成
var key = new Object();
key.up = false;
key.down = false;
key.right = false;
key.left = false;

//メインループ
function main() {
	//キーボードが押された時、keydownfunc関数(かんすう)を呼び出す
	addEventListener("keydown", keydownfunc, false);
	//キーボードが放(はな)された時、keyupfunc関数(かんすう)を呼び出す
	addEventListener("keyup", keyupfunc, false);

	//方向キーが押されている場合(ばあい)は、りこちゃんが移動する
	if ( key.left === true ) rico.x -= 32;
	if ( key.up === true ) rico.y -= 32;
	if ( key.right === true ) rico.x += 32;
	if ( key.down === true ) rico.y += 32;

	//りこちゃんの位置(いち)を決める
	document.getElementById( 'rico' ).style.top = rico.y + "px";
	document.getElementById( 'rico' ).style.left = rico.x + "px";

	//main関数(かんすう)、つまり自分自身の関数を呼び出すことでループさせる。
	requestAnimationFrame(main);
}
requestAnimationFrame(main);

//キーボードが押されたときに呼び出される関数(かんすう)
function keydownfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = true;
	if( key_code === 38 ) key.up = true;
	if( key_code === 39 ) key.right = true;
	if( key_code === 40 ) key.down = true;
}

//キーボードが放(はな)されたときに呼び出される関数
function keyupfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = false;
	if( key_code === 38 ) key.up = false;
	if( key_code === 39 ) key.right = false;
	if( key_code === 40 ) key.down = false;
}

このように動きます。
下の枠内(わくない)を一度クリックしてから、方向キーでりこちゃんを動かしてみてね!

りこ

りこ

きゃー、スムーズに動いてる! でも、速(はや)すぎるよ!


アル

アル

これじゃあ、すぐに枠の外にはみ出しちゃうね


山田

山田

そんなときは、方向キーが押された時のりこちゃんの移動部分(21行目〜24行目)の数字を少なくするといいんだべ。こんな風にだべ

if ( key.left === true ) rico.x -= 8;
if ( key.up === true ) rico.y -= 8;
if ( key.right === true ) rico.x += 8;
if ( key.down === true ) rico.y += 8;

山田

山田

でも今回、一回に動くのが32pxというのは、理由(りゆう)があるんだべ


アル

アル

どういう理由?


山田

山田

りこちゃんの画像(がぞう)の縦幅(たてはば)と横幅(よこはば)が32pxでできているんだべ。綺麗(きれい)に32pxずつ動かしたいだべよ


アル

アル

なるほど!


りこ

りこ

確(たし)かに。RPGとかだったら32pxずつ動かした方が綺麗に見えるかもね。きっとマップチップとかも32pxで作るのね!?


山田

山田

そのつもりだべ。本当は一回に32pxずつゆっくり動かしたいんだべ。じゃあどうやってこれを解決(かいけつ)するかについては今後(こんご)の記事(きじ)で紹介(しょうかい)していくとするべ


りこ

りこ

はーい!


アル

アル

はーい!

まとめ

今回はJavaScriptで、ゲームのメインループを作る方法を紹介(しょうかい)しました。
ループ(繰り返し)には色んな方法がありますが、ゲーム開発(かいはつ)のメインループではrequestAnimationFrame()を使う場合が多いです。

動きが速い場合はりこちゃんを動かすpxの数を減(へ)らせば解決できます。
しかし本当は32pxずつ動かしたいので、その方法は今後の記事(きじ)で紹介(しょうかい)していきます。

山田

山田

メインループが完成したということは、ゲームのベースが完成したということだべ。このループから色んな機能(きのう)を呼び出してゲームを作っていくんだべよ


りこ

りこ

なるほど、ここからループから呼び出して作っていくのね


アル

アル

ちょっとまだピンとこないけど、これからの講座(こうざ)を見ていけば僕でも分かるかな


山田

山田

てやんでぇ、べらぼうめ! わだずも分かるように頑張って説明するべよ!


りこ

りこ

じゃあ安心だね


山田

山田

では、わだずは今から人間に変装(へんそう)してディズニーランドに行ってくるべよ。きっとネズミがいっぱいだべよ


りこ

りこ

ねずみ……?


アル

アル

……えっ?

この企画の一覧はこちら

  1. 小学生からのプログラミング入門。JavaScriptでおみくじを作ろう!
  2. 小学生からのJavaScript入門。今月の残り日数を計算してみよう!
  3. 小学生からのJavaScript入門。画像の表示と移動をしてみよう!
  4. 小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!
  5. 小学生からのJavaScript入門。ファイルを分けて管理してみよう!
  6. 小学生からのJavaScript入門。オブジェクトを使ってみよう!
  7. 小学生からのJavaScript入門。ゲームのメインループを作ってみよう!
  8. 小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!
  9. 小学生からのJavaScript。HTML5とCanvasを使ってみよう!
  10. 小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!
  11. 小学生からのJavaScript。マップでキャラを動かせるようにしよう!
  12. 小学生からのJavaScript。クラスの概念をしっかりと理解しよう!
  13. 小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!
  14. 小学生からのJavaScript。文字を表示するクラスを作ってみよう!
  15. 小学生からのJavaScript。改行と一文字ずつ画面に表示する方法!
  16. JavaScript|ノベルゲーム風にキー入力で文字を切り替える方法!

スポンサードリンク

関連コンテンツ

オススメ記事

HTML CSS

CSSでの円の作り方と、その上下左右中央に文字を表示する方法

サイトを作る時、円形のパーツを作りたい時ってよくありますよね。 円はCSSで簡単に作ることができます。 さらに今回はCSSで作成した円の中央に文字を置く方法も紹介します。 CSSでの

WordPressのテーマを自作してみよう。テーマ開発の方法を徹底解説!

WordPressテーマの自作方法を紹介していきます。 今回はテーマ作成における知識や、ツール、ファイル構成、実際の作り方などを書いていきます。 WordPressのテーマを自作する上

【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!

Bootstrap4の使い方、第4回目となりました。 サイトを作っていると必然的に必要になるのがパンくずリストです。 パンくずリストは、サイト訪問者が今どのページにいるのかということを分かりや

オブジェクトを使ってみよう!

小学生からのJavaScript入門。オブジェクトを使ってみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第6弾です。 前回の講座(こうざ)では、HTMLやCSS、JavaScriptを分けて管理(かんり)する方法を紹介しました。 今回

プログラミングのクラスってなぁに?

小学生からのJavaScript。クラスの概念をしっかりと理解しよう!

小学生からのプログラミング講座(こうざ)、第12弾です。 前回はマップ上をキャラクターが自由に動くことができるようにしました。 今回はES6から使われるようになった「ク

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

JavaScriptを使ってゲームを作成するのが好きです。@It_is_Rです。 JavaScriptはWebページに動きを出すのによく使われ、ブラウザゲームなども作ることができます。 今回は

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

VCCW

VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

考えすぎて間違った方向へ進む、@It_is_Rです。 WordPress のローカル開発環境を作りたい時、 VCCW を使うと便利です。 今回は、 その方法を紹介します。 VCC

【Android Studio】Button(ボタン)を作る基本中の基本。

ボタンを作る基本中の基本ですが、ボタンを作ること自体が基本中の基本です。@It_is_Rです。 タイトルなんてどうだっていいんです。肝心のなのは真心です。 Androidアプリ開発、7回目とな

コメントをどうぞ!

メールアドレスが公開されることはありません。