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

//画面に画像を表示する
document.write( '<img id="rico" src="rico.png">' );

//りこちゃんのオブジェクトを作成
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 );
	//キーボードがはなされた時、keyupfunc関数(かんすう)を呼び出す
	addEventListener( "keyup", keyupfunc );

	//方向キーが押されている場合(ばあい)は、りこちゃんが移動する
	if( key.left === true ) rico.x -= 32;		//key.leftがtrueのとき、rico.xの値から32を引き算する
	if( key.up === true ) rico.y -= 32;		//key.upがtrueのとき、rico.yの値から32を引き算する
	if( key.right === true ) rico.x += 32;		//key.rightがtrueのとき、rico.xの値に32を足し算する
	if( key.down === true ) rico.y += 32;		//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;		//「左ボタン」が押されたとき、key.leftをtrueにする
	if( key_code === 38 ) key.up = true;		//「上ボタン」が押されたとき、key.upをtrueにする
	if( key_code === 39 ) key.right = true;		//「右ボタン」が押されたとき、key.rightをtrueにする
	if( key_code === 40 ) key.down = true;		//「下ボタン」が押されたとき、key.downをtrueにする
}

//キーボードがはなされたときに呼び出される関数
function keyupfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) key.left = false;		//「左ボタン」がはなされたとき、key.leftをfalseにする
	if( key_code === 38 ) key.up = false;  		//「上ボタン」がはなされたとき、key.upをfalseにする
	if( key_code === 39 ) key.right = false		//「右ボタン」がはなされたとき、key.rightをfalseにする;
	if( key_code === 40 ) key.down = false;		//「下ボタン」がはなされたとき、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. 小学生からのプログラミング入門。プログラミングってなぁに?
  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】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

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

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

GitHubのアカウントを作成する方法

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。まず今回はG

scratch

Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門

さて、今回もプログラミングの勉強(べんきょう)をはじめていきましょう!前回の「小学生からのプログラミング入門。プログラミングってなぁに?」では、プログラミングっていうのが、どういうものなのかを学びま

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

クイックタグ

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

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

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した T

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げる

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

文字を表示するクラスを作ろう!

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

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

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

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