【JavaScript】キー入力でキャラを動かしてみよう！　小学生からのプログラミング入門

更新 : 2020/11/02

カテゴリー : JavaScript, プログラミング・Web

by : It is R

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう！

前回は、りこちゃんの画像をクリックすると、前に一歩動くというのをJavaScriptで作りました。
JavaScriptでの画像移動《がぞういどう》の方法が分かったと思います。

今回はキーボードからの入力でキャラクターを移動させる方法を紹介《しょうかい》します。
これを作ることができれば、もっとゲームっぽくなります。がんばっていきましょう！

アル

やっぱりゲームはキーボードでキャラを動かしたいな

りこ

そうよね。ねぇ山田先生！　どうやるの？

山田

キー入力だべな。じゃあ今日はキーボードからの入力について教えてあげるべだべよ

アル

わーい

りこ

わーい

キーボードからの入力に反応させてみよう！
キーボードでキャラクターを操作できるようにしよう！
まとめ

キーボードからの入力に反応させてみよう！

山田

まずはキーボードからの入力に反応させてみるべ

さて、まずはキーボードからの入力に反応させてみましょう。
キーボードからの入力を知るにはaddEventListener()を使うと便利です。

addEventListener()は、マウスのクリックや、キーボードの入力などを調べることができるものです。

では実際《じっさい》に使ってみましょう。
例えばindex.htmlをこのようにすると、何かのキーが押されるたびに「押したなー」というアラートが表示されます。

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>キー入力</title>
</head>
<body>
	<script>

		//なにかキーが押されたとき、keydownfuncという関数を呼び出す
		addEventListener( "keydown", keydownfunc );

		//キーが押されたときに呼び出される関数
		function keydownfunc( event ) {

			//アラートを表示する
			alert( '押したなー' );

		}

	</script>
</body>
</html>

１１行目のaddEventListener( "keydown", keydownfunc );から見ていきましょう。
addEventListener()は、なにかの操作《そうさ》を判断《はんだん》するものです。マウスのクリックだったり、キーボードの入力だったりします。
今回はキーボードの入力を調《しら》べたいので、()の中の１つ目に、keydown《キーダウン》（キーボードが押されたとき、ということ）を書きます。
さらに、()の中の２つ目には「keydownfunc」と書かれています。これで１４〜１９行目の関数《かんすう》を呼び出しています。

１４行目〜１９行目の{}の中には、キーボードが押されたときにしてほしいことを書いていきます。今回のしてほしいことは、１７行目のアラート表示です。

このように表示されます。

アル

関数《かんすう》ってなぁに？

山田

関数は、何度も使う機能《きのう》をあらかじめ作っておいて、どこからでも呼び出せるようにするものだべ。それはまたこの後の記事で説明していくから今は気にしないで、１１行目は「キーボードが押された時にkeydownfunc関数を呼んで」とお願いしていて、１４〜１９行目のkeydownfunc関数が呼ばれる、と思っておけばいいだべよさ

りこ

keydownfunc( event )のeventってのは？

山田

それは今から説明《せつめい》していくべ

１４行目のeventとは何なのでしょうか？
では今から説明していきます。

では、上のプログラム１７行目の、alert()を、以下のように変更してみてください。

alert( event.keyCode );

これでキーボードを押すと、押すキーによって、アラートに様々《さまざま》な数字が表示されます。
この数字は、押されるキーによって変わります。
そうです。このevent.keyCodeをアラートで表示させることによって、何のキーを押したのかが分かるのです。

つまり、eventから様々《さまざま》な情報《じょうほう》を手に入れることができます。

ちなみに「event」は任意《にんい》の名前でもだいじょうぶです。

キーボードでキャラクターを操作できるようにしよう！

次は、キーボードでりこちゃんの画像を操作《そうさ》できるようにしていきます。

アル

キーボードでキャラを操作できるの？

山田

できるべよ。今から作っていくべからな

りこ

わーい。私のイラストが動くのね！

アル

僕のキャラは動かないの？

山田

てやんでぇ、べらぼうめ！　描くのけっこう大変だべよ！

アル

がーん

では、先ほどの画面で方向キーを押してみてください。
方向キーのそれぞれのボタンが、どの数なのかを見てみましょう。
すると、それぞれのボタンに以下の数が割り当てられていることが分かります。

左 : 37
上 : 38
右 : 39
下 : 40

では、前回作ったプログラムに戻ります。
前回のプログラムはりこちゃんをクリックすると、りこちゃんが一歩前に歩くというものでした。

では、これをキーボードで動かせるように直していきたいと思います。
前回の記事で作成した、JavaScriptの部分を、以下のように変更します。

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

//キャラクターの位置
var y = 0;
var x = 0;

//なにかキーが押されたとき、keydownfuncという関数を呼び出す
addEventListener( "keydown", keydownfunc );

//キーが押されたときに呼び出される関数
function keydownfunc( event ) {

	//押されたボタンに割り当てられた数値（すうち）を、key_codeに代入
	var key_code = event.keyCode;

	if( key_code === 37 ) x -= 32;		//「左ボタン」が押されたとき、xの値から32を引き算する
	if( key_code === 38 ) y -= 32;		//「上ボタン」が押されたとき、yの値から32を引き算する
	if( key_code === 39 ) x += 32;		//「右ボタン」が押されたとき、xの値に32を足し算する
	if( key_code === 40 ) y += 32;		//「下ボタン」が押されたとき、yの値に32を足し算する

	//りこちゃんの画像の位置（いち）を反映（はんえい）させる
	document.getElementById( 'rico' ).style.top = y + "px";
	document.getElementById( 'rico' ).style.left = x + "px";

}

２行目：　りこちゃんの画像を表示しています。
５行目〜６行目：　変数yと変数xの初期値《しょきち》を設定《せってい》しています。
９行目：　キーボードが入力されたときに、１２〜２６行目のkeydownfunc関数《かんすう》を呼《よ》び出しています。
１５行目：　event.keyCode、つまり押されたボタンに割り当てられた数値《すうち》を、key_code変数に代入《だいにゅう》しています。
１７行目：　キーボードの３７ボタン、つまり「左ボタン」が押された場合に、x座標《ざひょう》から３２をひき算しています。
１８行目：　キーボードの３８ボタン、つまり「上ボタン」が押された場合に、y座標から３２をひき算しています。
１９行目：　キーボードの３９ボタン、つまり「右ボタン」が押された場合に、x座標に３２をたし算しています。
２０行目：　キーボードの４０ボタン、つまり「下ボタン」が押された場合に、y座標に３２をたし算しています。
２３行目：　上下ボタンが押された時に、りこちゃんを上下に動かします。
２４行目：　左右ボタンが押された時に、りこちゃんを左右に動かします。

index.html全体ではこのようになります。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>キー入力</title>
	<style>
		#rico {
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>
<body>
	<script>

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

		//キャラクターの位置
		var y = 0;
		var x = 0;

		//なにかキーが押されたとき、keydownfuncという関数を呼び出す
		addEventListener( "keydown", keydownfunc );

		//キーが押されたときに呼び出される関数
		function keydownfunc( event ) {

			//押されたボタンに割り当てられた数値（すうち）を、key_codeに代入
			var key_code = event.keyCode;

			if( key_code === 37 ) x -= 32;		//「左ボタン」が押されたとき、xの値から32を引き算する
			if( key_code === 38 ) y -= 32;		//「上ボタン」が押されたとき、yの値から32を引き算する
			if( key_code === 39 ) x += 32;		//「右ボタン」が押されたとき、xの値に32を足し算する
			if( key_code === 40 ) y += 32;		//「下ボタン」が押されたとき、yの値に32を足し算する

			//りこちゃんの画像の位置（いち）を反映（はんえい）させる
			document.getElementById( 'rico' ).style.top = y + "px";
			document.getElementById( 'rico' ).style.left = x + "px";

		}

	</script>
</body>
</html>

下の枠内《わくない》を一度クリックしてから、方向キーでりこちゃんを動かしてみてね！
<br /> このブラウザはiframeタグに対応しておりません。<br />

りこ

きゃー、わたしがキーボードの入力で動いてる！

山田

かなりゲームっぽくなってきたべな

アル

うん、すごい！

まとめ

今回はJavaScriptでキャラクターを操作《そうさ》できるようにする方法を紹介しました。

アル

この動き、昔のポケモンっぽいよ！

山田

結構《けっこう》古いバージョンだと思うべけど、よく知ってるべな

アル

ゲーム、大好きだからね！

りこ

はやくみんなにやってもらえるようなゲームが作りたいなー

山田

頑張ってやればすぐに作れるべよ。わだずもディズニーランドにいくことを夢見て毎日頑張ってるべ

りこ

なにを？

山田

人間になりすます練習だべ

りこ

……

アル

えっ？

この企画の一覧はこちら

スポンサードリンク

オススメ記事

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法！

愛と勇気だけが友達の@It_is_Rです。今回はPugでWordPressテーマを作る方法を少し紹介します。詳しいテーマの作り方はこちらをご覧ください。 WordPressのテーマを自作

2017/12/23

【JavaScript】文字を表示するクラスを作ってみよう！　小学生からのプログラミング入門

小学生からのJavaScript講座です。このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。シリーズの一覧はこちらをご覧ください。さて、ゲーム作成で重要なキ

2019/2/16

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

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

2018/1/12

PugでPHPが使える！　gulpfile.jsをちょっと工夫するだけだよ

HTMLを書くときPugを使うととても便利なのですが、PHPを書きたいと思ったときは少し工夫が必要になります。 PugでPHPを書くためのプラグインを使う方法もありますが、使うプラグインが増えれば増

2020/5/25

WordPress｜ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。改めまして、@It_is_Rです。特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

2016/9/16

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ！

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

2016/10/28

Javaでじゃんけんゲームを作ろう。サンプルコードあり！

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされており、Java

2014/7/12

【Java】スーパクラス、サブクラスとは？継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

2015/11/27

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボ

2018/8/6

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。今回はアプリに表示されたテキストを変更

2017/7/1

3件のコメント “【JavaScript】キー入力でキャラを動かしてみよう！　小学生からのプログラミング入門”

ああああ より:

2019年8月12日 10:28 PM

なぜ「==」ではなく「===」を用いてコードを書いたのですか？
個人的には「===」がいまいち理解できないので「==」を用いてfalseをtrueに変えて書き、画像を動かすことができました。しかし、これだとどこかで不具合が出るのでしょうか？

返信
1. It is R より:
  
  2019年8月16日 9:28 AM
  >ああああさん
  はじめまして、コメントありがとうございます。
  返信が遅くなり、申し訳ありません。
  
  まず「==」は「同じ」という意味ですが、この場合、変数の型が違っても同じものとして扱われます。
  例えば、変数numに100を代入し、条件分岐を行なったとします。
```
let num = 100;

if ( num == 100 ) console.log( '数値' );
if ( num == '100' ) console.log( '文字' );
```
  実行結果は
  ——
  数値
  文字
  ——
  というふうになり、numには数値を代入しているにも関わらず、文字列でもtrueの判断がされてしまっています。
  
  ifの「==」を「===」に変更すると、「数値」とのみ表示されます。
  「==」と「===」の違いはこれだけではありませんが、つまり「==」よりも「===」の方が、厳密に判定してくれるということです。
  
  今回の場合、キー入力の判断をしているだけなので、「==」と「===」の違いによっての不具合は生じないのではないかと思います。
  しかし今後プログラムを作るうえで、数値を扱いたいのに文字列でもtrueとなってはまずい状況に遭遇するかもしれません。
  
  故意に「==」を使う場合もあると思いますが、なるべく「===」を使い、変数の型を意識したプログラムを作るほうがバグを防げるのではないかと思います。
  返信
ああああ より:

2019年8月12日 10:24 PM

なぜ「==」ではなく「===」を用いてJSを書いたのでしょうか？
もしも、すでにこの記事のどこかに記述してある場合はすいません。

返信