【JavaScript】キャラを決まった間隔ずつ動かす！　小学生からのプログラミング入門

小学生からのプログラミング入門講座《にゅうもんこうざ》、今回もはじめていきましょう！

前回は、キャラクターの画像《がぞう》をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔《いどうかんかく》を短くする方法も含《ふく》めて紹介《しょうかい》しました。
このスピードが速すぎたというのは、キャラクターを必ず32pxずつ動くようにしたかったからです。

そこで今回は必ず32pxずつ、ゆっくりと動かす方法を紹介《しょうかい》します。

キャラクターの画像を32pxずつ、ゆっくり動かしてみよう！

ではりこちゃんの画像を、32pxずつゆっくり動かしてみたいと思います。

まず、りこちゃんのオブジェクトに、move（動き）というプロパティを作ります。
xとyはこれまでの講座《こうざ》で作ったものです。

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

さらにpressed_key（押されたキー）という変数を作ります。

var pressed_key = '';

では、りこちゃんが32pxずつゆっくり動くようにしていきましょう。
キーボード入力《にゅうりょく》の部分《ぶぶん》をつぎのように変更《へんこう》してください。
キーボード入力はrico.moveが覚えている数が「0」の時のみ、動くようにします。
さらにキーが押された時は、りこちゃんを32pxずつ動かしたいので、rico.moveに32を代入《だいにゅう》します。
pressed_keyには今押されたキーがなんなのかを、一時的《いちじてき》に代入《だいにゅう》しておきます。

if ( rico.move === 0 ) {
	if ( key.left === true ) {
		rico.move = 32;
		pressed_key = 'left';
	}
	if ( key.up === true ) {
		rico.move = 32;
		pressed_key = 'up';
	}
	if ( key.right === true ) {
		rico.move = 32;
		pressed_key = 'right';
	}
	if ( key.down === true ) {
		rico.move = 32;
		pressed_key = 'down';
	}
}

りこちゃんの移動《いどう》は、つぎのようにします。
さきほど、rico.moveには32を代入《だいにゅう》しましたね。rico.moveが0よりも大きい場合は、rico.moveが覚えている数（32）から4ずつ引いていきます。
32は4で割り切れる数なので、4ずつ引いていけば必《かなら》ず0になります。（必ず割り切れる数にしてください）

さらに、pressed_keyが覚えているキーによって、その方向にりこちゃんを4pxずつ動かします。
rico.moveから引いた数とおなじ数だけ動かせば、最終的《さいしゅうてき》には32px動いたことになります。

if (rico.move > 0) {
	rico.move -= 4;
	if ( pressed_key === 'left' ) rico.x -= 4;
	if ( pressed_key === 'up' ) rico.y -= 4;
	if ( pressed_key === 'right' ) rico.x += 4;
	if ( pressed_key === 'down' ) rico.y += 4;
}

script.js全体《ぜんたい》ではこのようになります。

script.js

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

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

//押されたキーを入れておくための変数
var pressed_key = '';

//キーボードのオブジェクトを作成
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 );

	//rico.moveが0のとき、りこちゃんが移動する準備（じゅんび）をする
	if ( rico.move === 0 ) {
		if ( key.left === true ) {
			rico.move = 32;
			pressed_key = 'left';
		}
		if ( key.up === true ) {
			rico.move = 32;
			pressed_key = 'up';
		}
		if ( key.right === true ) {
			rico.move = 32;
			pressed_key = 'right';
		}
		if ( key.down === true ) {
			rico.move = 32;
			pressed_key = 'down';
		}
	}

	//rico.moveが0より大きいとき、りこちゃんが移動（いどう）する
	if (rico.move > 0) {
		rico.move -= 4;
		if ( pressed_key === 'left' ) rico.x -= 4;
		if ( pressed_key === 'up' ) rico.y -= 4;
		if ( pressed_key === 'right' ) rico.x += 4;
		if ( pressed_key === 'down' ) rico.y += 4;
	}

	//りこちゃんの画像の位置（いち）を反映（はんえい）させる
	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にする
}

このように動きます。
分かりやすいように、たてよこ32pxのマス目を作りました。はみ出さないかぎり、必《かなら》ずマスの中でりこちゃんは止まります。
下の枠内《わくない》を一度クリックしてから、方向キーでりこちゃんを動かしてみてね！

まとめ

今回はりこちゃんを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