【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>

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

りこ

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

山田

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

アル

うん、すごい！

まとめ

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

アル

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

山田

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

アル

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

りこ

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

山田

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

りこ

なにを？

山田

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

りこ

……

アル

えっ？

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

スポンサードリンク

オススメ記事

CSSでの円の作り方と、その上下左右中央に文字を表示する方法

サイトを作る時、円形のパーツを作りたい時ってよくありますよね。円はCSSで簡単に作ることができます。さらに今回はCSSで作成した円の中央に文字を置く方法も紹介します。 CSSでの

2015/11/15

【絶対できる！】Unityでの2Dノベルゲームの作り方を詳しく解説

人魚との触れ合いを描いた小説、「ELENA 人魚と過ごした時間」のゲーム化を目指し、日々コツコツと開発を進めているのですが、もう少し時間がかかりそうです。さて、そんなわけで、今回はUnity

2021/10/18

Scratchの使い方と、ゲーム作りの基礎知識を学ぼう！　小学生からのプログラミング入門

さて、今回もプログラミングの勉強（べんきょう）をはじめていきましょう！前回の「小学生からのプログラミング入門。プログラミングってなぁに？」では、プログラミングっていうのが、どういうものなのかを学びま

2018/07/04

SwiftUIでじゃんけんゲームを作ろう。かんたんiPhoneアプリ開発入門

SwiftUIは、2019年にアップルが発表したフレームワークです。 SwiftUIを使って、iPhoneで遊べるじゃんけんゲームを作成してみましょう。この入門ではXcodeを使いますので、

2020/08/06

Gitの使い方。バージョン管理する流れを、実際にやってみよう

こんにちは。@It_is_Rです。前回「【Mac】Gitのダウンロードとインストールの手順」では、Gitのインストーラを公式サイトからダウンロードしてインストールする方法と、Homebrew

2018/03/11

Python(Tkinter)でウィンドウを表示するための基本

ゲームなどのアプリを作成したいとき、まず、ウィンドウを表示する必要があります。そこで今回は、Python(Tkinter)を使って、ウィンドウを表示する方法と、その設定を変える方法を紹介します。

2021/12/27

【JavaScript】ゲームのメインループを作ってみよう！　小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう！突然《とつぜん》ですが、ゲーム開発《かいはつ》の基本として大切なことってなんだっ

2018/11/26

【Android Studio】開発したアプリの実機テストを行う方法。

どうも、頭がすっからかんの@It_is_Rです。やかましいわ。今回は Android Studio で実機テストする方法を紹介します。これからアプリ開発をしていく上で必要不可欠な実機テストです

2017/05/31

Scratchでシューティングゲームを作ろう！　小学生からのプログラミング入門

さて、プログラミングの勉強をはじめていきましょう！前回の「Scratchでじゃんけんゲームを作ろう！」では、じゃんけんゲームの作り方を学びました。今回は、もうちょっと本格的（ほんかくてき）な

2018/07/22

webpackでSass(SCSS)をCSSにコンパイルする最もシンプルな方法

webpackを使うと、JavaScriptをまとめることができて便利です。しかし、webpackにはたくさんの機能があり、パッケージをインストールすることで、様々な機能が使えるようになります。

2021/05/02

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

返信