【JavaScript】ゲームのメインループを作ってみよう！　小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう！

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

ゲーム開発では、ループを使う必要があります。
今回はループを使った、JavaScript《ジャバスクリプト》でのゲーム開発の方法を紹介《しょうかい》していきます。

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

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

function main() {

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

	requestAnimationFrame(main);
}
requestAnimationFrame(main);

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

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

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

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

前のプログラムは、方向キーが押された時に、りこちゃんの画像が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にする
}

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

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;

まとめ

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

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

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

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

• Tweet
• Facebook
• はてブ
• Pocket