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

更新 : 2022/01/06

カテゴリー : 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>

下の枠内《わくない》を一度クリックしてから、方向キーでりこちゃんを動かしてみてね！

りこ

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

山田

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

アル

うん、すごい！

まとめ

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

アル

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

山田

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

アル

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

りこ

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

山田

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

りこ

なにを？

山田

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

りこ

……

アル

えっ？

このシリーズの一覧はこちら

小学生からのJavaScript入門

小学生からのプログラミング入門

スポンサードリンク

オススメ記事

enhancd で cd コマンドを超便利に！インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。やかましいわ。ターミナルをカッコよくするシリーズ４回目です。今回は enhancd というプラグインを使って cd コマンドを便利にする方

2017/11/18

npm-scriptsの使い方。自作のコマンドによるタスク実行方法

畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。 npm-scriptsを使うことで、あらかじめタスクをかんたんな名前で指定しておき、そのタスクを素早く実行できるように

2018/5/2

【Unity】開発したiOSゲームをiPhoneで実機テストする方法

こんにちは。現在、最新ゲーム熱意製作中の@It_is_Rです。個人での開発はとても大変で、時間がかかってしまっていますが、すこしずつ形にしていっています。さて、今回はUnityで開発したiO

2021/9/16

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

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

2015/8/12

【Android Studio】レイアウト( Layout )の種類を覚えよう！

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。水平(Ho

2017/11/14

【JavaScript】オブジェクトを使ってみよう！　小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう！前回の講座《こうざ》では、HTMLやCSS、JavaScriptを分けて管理《かんり》す

2018/11/25

MacにPythonをインストールしてみよう！小学生からのPython入門

さて、今回《こんかい》もプログラミングを学んでいきましょう！前回はWindows《ウィンドウズ》にPython《パイソン》をインストールする方法《ほうほう》を紹介《しょうかい》しました。今回

2021/12/15

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

2016/9/30

webpackを使ってゲームエンジンを作ろう！（JSライブラリの作り方）

みなさんこんにちは。今回もたのしくプログラミングを学んでいきましょう！前回の「JavaScriptでRPGを作ろう！スマホにも対応したゲームの作り方」では、JavaScriptでゲームエンジ

2021/3/15

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。今回もFC2ブログの最強カスタマイズを始めていこうと思います。今回は文字の大きさや色など、ブログ内の文字の設定をしていきます。初

2015/8/17

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を書いたのでしょうか？
もしも、すでにこの記事のどこかに記述してある場合はすいません。

返信