小学生からのJavaScript入門講座、今回もはじめていきましょう!
突然ですが、ゲーム開発の基本として大切なことってなんだったか覚えていますか?
そうです。「変数」、「条件分岐」、そして「繰り返し」の3つです。
ゲーム開発では、ループを使う必要があります。
今回はループを使った、JavaScriptでのゲーム開発の方法を紹介していきます。

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

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

あ、繰り返し!

そうだべさ! じゃあ、今回はループ(繰り返し)の方法を紹介するべ!
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ずつ動かしたいので、その方法は今後の記事で紹介していきます。

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

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

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

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

じゃあ安心だね

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

ねずみ……?

……えっ?
このシリーズの一覧はこちら
- 小学生からのプログラミング入門。プログラミングってなぁに?
- 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で、画像つきのおみくじゲームを作ろう!
「矢印が全くききません」
矢印キーを押しても、まったく反応がなかったので、一応サンプルで貼ってあるコードを実行してみたのですが、無理でした。のタグの中に入れています。解決方法はありますか?