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

更新 : 2021/05/22

カテゴリー : 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 – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

2016/10/23

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。今回、第一回目は zsh ( Z Shell

2017/10/27

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

2018/5/14

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

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

2017/1/22

gulp4完全攻略ガイド。インストールから使い方まで徹底解説！

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。今回はgulp4の使い方を、インストールか

2016/5/26

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

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

2019/6/21

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

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

2019/3/4

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

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

2021/8/18

【初心者向け】webpack入門。すぐに使える最も簡単な使い方

webpackは、複数のJavaScriptファイルをまとめてくれる、モジュールバンドラというものです。今回は、webpack入門ということで、webpack5の使い方を紹介していきたいと思

2018/4/28

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

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

2017/12/26

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

返信