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

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

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

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

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

アル

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

りこ

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

アル

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

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

キャラクターの画像を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のマス目を作りました。はみ出さないかぎり、かならずマスの中でりこちゃんは止まります。
下の枠内わくないを一度クリックしてから、方向キーでりこちゃんを動かしてみてね!

まとめ

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

スポンサードリンク

関連コンテンツ

オススメ記事

Scratchでピアノを 作ってみよう!

Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門

今回も、小学生からのScratch《スクラッチ》入門、はじめていきます。 前回、「Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門」では、Scratchを使ってシ

これまでのプログラム全体をクラスを使って作るべ!

【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう! 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていない

【解決!】Macで「デフォルトシェルはzshになった」と表示されるときの対処法

MacOSをアップデートしてから、ターミナルを開くたびに、「The default interactive shell is now zsh.」というメッセージが表示されるようになりました。 これは

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 今回はカスタムロゴの使い方を紹介したいと思います。 このシリーズの前回の記事はこちらです。 【 WordPres

Markdown記法一覧。最速で文章を書くには、これを覚えるべし!

Markdownは文章を記述するための言語です。サイト上で文章を作るとき、タグを使うことで、その文章に様々な意味を持たせます。 しかし、直接タグを打ち込むのは大変ですし、エディタの機能を使おう

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

喧嘩するほど仲がいいとは言いますが、喧嘩する相手がいません。友達がいないということでしょうか。@It_is_Rです。 前回、StoryboardでMacのウィンドウに文字を表示しました。しかし、

FC2 blog customize

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

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

パスの書き方を覚えるべ!

パスの書き方を覚えよう。絶対パス、相対パス、ルート相対パスの違い

みなさん、こんにちは。今日もプログラミングの勉強《べんきょう》をはじめていきましょう。 今回は、パスの書き方について学びます。パスというのは、ファイルの場所《ばしょ》を、パソコンに教《おし》え

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

【 gulp 】 超便利! Sass で Normalize.css などをインポートする方法。

ふと立ち上がった瞬間に、ホットマットを猫に奪われる@It_is_Rです。 全然どいてくれない。 今回は gulp を使って、 Sass ファイルから Normalize.css などをインポー

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

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