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

更新 : 2024/05/02

by : It is R

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

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

そこで今回は必ず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 = '';

山田

rico.moveには初期値《しょきち》として0を代入しているべ。これはりこちゃんを動かすときに使うためのものだべ

アル

どうやって使うんだろう？

山田

見ていけば分かるべ。pressed_keyは、押されたキーを一時的《いちじてき》に代入《だいにゅう》しておく変数《へんすう》だべ。32px動き終わるまでは、押されていたキーをこの変数が覚えていてくれれば、キーがはなされてしまってもその方向に32px動かせるべ

りこ

そっか。32px動き終わる前《まえ》にキーがはなされちゃったら、どっちに動いていいのか分からなくなっちゃうのね！　それを覚えておくための変数だ

では、りこちゃんが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;
}

山田

実際《じっさい》には、一回ボタンが押される（または押され続けている）ごとに、4pxずつ、8回移動《いどう》することになるんだべ。合計《ごうけい》32px移動するべ

りこ

算数ね。4×8=32ね

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のマス目を作りました。はみ出さないかぎり、必《かなら》ずマスの中でりこちゃんは止まります。
下の枠内《わくない》を一度クリックしてから、方向キーでりこちゃんを動かしてみてね！
<br /> この<a class="c-link c-link--dark c-link--underline" href="https://original-game.com/it_dictionary/browser/">ブラウザ</a>はiframeタグに対応しておりません。<br />