1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門

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

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

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

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

アル

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

りこ

そうよね。ねぇ山田先生! どうやるの?

山田

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

アル

わーい

りこ

わーい

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

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

山田

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

さて、まずはキーボードからの入力に反応させてみましょう。
キーボードからの入力を知るには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>

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

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

キー入力

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

アル

関数かんすうってなぁに?

山田

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

りこ

keydownfunc( event )のeventってのは?

山田

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

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

では、上のプログラム17行目の、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";

}

2行目: りこちゃんの画像を表示しています。
5行目〜6行目: 変数yと変数xの初期値しょきち設定せっていしています。
9行目: キーボードが入力されたときに、12〜26行目のkeydownfunc関数かんすうび出しています。
15行目: event.keyCode、つまり押されたボタンに割り当てられた数値すうちを、key_code変数に代入だいにゅうしています。
17行目: キーボードの37ボタン、つまり「左ボタン」が押された場合に、x座標ざひょうから32をひき算しています。
18行目: キーボードの38ボタン、つまり「上ボタン」が押された場合に、y座標から32をひき算しています。
19行目: キーボードの39ボタン、つまり「右ボタン」が押された場合に、x座標に32をたし算しています。
20行目: キーボードの40ボタン、つまり「下ボタン」が押された場合に、y座標に32をたし算しています。
23行目: 上下ボタンが押された時に、りこちゃんを上下に動かします。
24行目: 左右ボタンが押された時に、りこちゃんを左右に動かします。

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でキャラクターを操作そうさできるようにする方法を紹介しました。

アル

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

山田

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

アル

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

りこ

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

山田

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

りこ

なにを?

山田

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

りこ

……

アル

えっ?

この企画の一覧はこちら

  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】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

Docker Composeで自分のWordPressサイトをローカル開発環境に反映!

ローカルにWordPress開発環境を整えてテーマを作成することがあるのですが、単にローカルに環境を作っただけでは記事がなく、テーマのイメージが分かりません。@It_is_Rです。 かといって、te

WordPress | ツイート数やシェア数付きのSNSシェアボタンを自作しよう!

最近SNSシェアボタンを作り直した@It_is_Rです。 せっかく作ったんだから、シェアするのだよ、みんな。 そこで今回は、Twitter や Facebook、GooglePlus、はてな

画像を動かすよ!

JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門

みなさんこんにちは。今回も、プログラミングの勉強《べんきょう》をはじめていきましょう! 前回、「JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門」では、JavaSc

とってもかんたん!iPhoneアプリ開発

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

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

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。 トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。 今回はそんな記事一覧ページを作るのに便利な「カー

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

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

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

Dockerでよく使うコマンドとオプション、その使い方を徹底解説!

人生に意味は求めない。それよりもDockerのコマンドの意味を理解する方が重要です。@It_is_Rです。 Dockerにはたくさんのコマンドがありますが、まずはよく使うコマンドを覚えていきまし

キー入力で文字を切り替えるべ

【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

小学生からのJavaScript講座です。 前回、文字を一文字づつ表示させる方法と改行の方法を紹介しました。今回はこのプログラムに、キー入力によって文字を切り替えられる機能をつけてみましょう。

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

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

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

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

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

    1. >ああああさん
      はじめまして、コメントありがとうございます。
      返信が遅くなり、申し訳ありません。

      まず「==」は「同じ」という意味ですが、この場合、変数の型が違っても同じものとして扱われます。
      例えば、変数numに100を代入し、条件分岐を行なったとします。

      let num = 100;
      
      if ( num == 100 ) console.log( '数値' );
      if ( num == '100' ) console.log( '文字' );
      

      実行結果は
      ——
      数値
      文字
      ——
      というふうになり、numには数値を代入しているにも関わらず、文字列でもtrueの判断がされてしまっています。

      ifの「==」を「===」に変更すると、「数値」とのみ表示されます。
      「==」と「===」の違いはこれだけではありませんが、つまり「==」よりも「===」の方が、厳密に判定してくれるということです。

      今回の場合、キー入力の判断をしているだけなので、「==」と「===」の違いによっての不具合は生じないのではないかと思います。
      しかし今後プログラムを作るうえで、数値を扱いたいのに文字列でもtrueとなってはまずい状況に遭遇するかもしれません。

      故意に「==」を使う場合もあると思いますが、なるべく「===」を使い、変数の型を意識したプログラムを作るほうがバグを防げるのではないかと思います。

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

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

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