1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門

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

小学生からのプログラミング入門講座(にゅうもんこうざ)、第8弾です。

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

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

アル

アル

うーん、前回の講座(こうざ)で教えてもらった方法、キャラの動きが速すぎるんだよね。かといって、移動間隔を狭(せば)めると、マップとずれちゃうみたいだしな


りこ

りこ

どうやってやればいいのかな


山田

山田

ふっふっふ、今回はキャラを決まった間隔(かんかく)ずつゆっくり動かす方法を教えるべ

目次
  1. キャラクターの画像を32pxずつ、ゆっくり動かしてみよう!
  2. まとめ

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

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

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

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

さらにpush_key(押されたキー)という変数を作ります。

push_key = '';

山田

山田

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


アル

アル

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


山田

山田

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


りこ

りこ

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

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

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

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

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

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

山田

山田

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


りこ

りこ

算数ね。4×8=32ね

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

script.js

//りこちゃんのオブジェクトを作成
var rico = new Object();
rico.x = 0;
rico.y = 0;
rico.move = 0;
 
//キーボードのオブジェクトを作成
var key = new Object();
key.up = false;
key.down = false;
key.right = false;
key.left = false;

push_key = '';

//メインループ
function main() {
	//キーボードが押された時、keydownfunc関数(かんすう)を呼び出す
	addEventListener("keydown", keydownfunc, false);
	//キーボードが放(はな)された時、keydownfunc関数(かんすう)を呼び出す
	addEventListener("keyup", keyupfunc, false);
 
	//方向キーが押されている場合(ばあい)は、りこちゃんが移動する
	if ( rico.move === 0 ) {
		if ( key.left === true ) {
			rico.move = 32;
			push_key = 'left';
		}
		if ( key.up === true ) {
			rico.move = 32;
			push_key = 'up';
		}
		if ( key.right === true ) {
			rico.move = 32;
			push_key = 'right';
		}
		if ( key.down === true ) {
			rico.move = 32;
			push_key = 'down';
		}
	}

	//rico.moveが0より大きい場合は、4pxずつ移動(いどう)を続ける
	if (rico.move > 0) {
		rico.move -= 4;
		if ( push_key === 'left' ) rico.x -= 4;
		if ( push_key === 'up' ) rico.y -= 4;
		if ( push_key === 'right' ) rico.x += 4;
		if ( push_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;
	if( key_code === 38 ) key.up = true;
	if( key_code === 39 ) key.right = true;
	if( key_code === 40 ) key.down = true;
	event.preventDefault();
}
 
//キーボードが放(はな)されたときに呼び出される関数
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;
}

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

まとめ

今回はりこちゃんを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. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  15. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  17. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  18. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  19. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  20. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  21. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

Android StudioをMacにインストールする方法

Android Studioを使って、Androidアプリ開発を行っていきましょう! 今回は Android Studioをインストールする手順を解説します。 Android Studio

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

プログラミングのクラスってなぁに?

【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門

小学生からのプログラミング講座(こうざ)、第12弾です。 前回はマップ上をキャラクターが自由に動くことができるようにしました。 今回はES6から使われるようになった「クラス」という機能を

文字を一文字ずつ表示してみよう!

【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門

小学生からのJavaScript講座です。 このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 前回、画面に文字を表示するためのクラスを作ったのですが、それをもう少

Android Studio

【Android Studio】新規プロジェクトを作成する方法

前回、 Android Studio のインストールが完了しました。 その続きから始めていきましょう。 今回は新規プロジェクトを作成する方法です。 新規プロジェクトの作成 それ

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。【準備編】

いつもどうもです。@It_is_Rです。 少し前まで、私は FC2ブログ を使っていました。 やはり個性を大切にしたい私にとって、用意されたテンプレートを使うことに抵抗がありました。 「

carousel

【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

Bootstrap4の使い方、第8回目です。 サイトをみていると、画像を横並びにしてくるくると回転するカルーセル機能を実装しているサイトがありますよね。 Bootstrap4には、カルーセルを

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

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

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