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

更新 : 2020/08/29

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

by : It is R

小学生からのJavaScript入門講座（にゅうもんこうざ）、第４弾です。

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

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

アル

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

りこ

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

山田

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

アル

わーい

りこ

わーい

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

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

山田

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

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

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

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

index.html

<html>
<head>
    <title>キー入力</title>
</head>
<body>
    <script>
        addEventListener("keydown", keydownfunc);

        function keydownfunc( event ) {
            alert('押したなー');
        }
    </script>
</body>
</html>

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

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

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

アル

関数（かんすう）ってなぁに？

山田

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

りこ

keydownfunc( event )のeventってのは？

山田

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

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

では、上のプログラムの、JavaScriptの部分を、以下のように変更してみてください。

addEventListener("keydown", keydownfunc, false);

function keydownfunc( event ) {
    alert( event.keyCode );
}

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

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

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

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

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

アル

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

山田

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

りこ

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

アル

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

山田

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

アル

がーん

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

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

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

では、これをキーボードで動かせるように直していきたいと思います。

var y = 0;
var x = 0;
addEventListener("keydown", keydownfunc, false);

function keydownfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) x -= 32;
	if( key_code === 38 ) y -= 32;
	if( key_code === 39 ) x += 32;
	if( key_code === 40 ) y += 32;
	document.getElementById( 'rico' ).style.top = y + "px";
	document.getElementById( 'rico' ).style.left = x + "px";
}

１行目〜２行目で、変数yと変数xの初期値（しょきち）を設定（せってい）しています。りこちゃんの初期位置（しょきいち）はCSSで設定（せってい）しているので、関係（かんけい）ありませんが、キーボードが押された時点（じてん）で変数yと変数xが覚えている数が反映（はんえい）され、りこちゃんの場所が移動します。
３行目で、キーボードが入力された時に、５行目のkeydownfunc関数（かんすう）を呼（よ）び出しています。
６行目は、event.keyCode、つまり押されたボタンに割り当てられた数値（すうち）を、key_code変数に代入（だいにゅう）しています。
７行目で、キーボードの３７ボタン、つまり「左ボタン」が押された場合に、x座標（ざひょう）から３２をひき算しています。
８行目で、キーボードの３８ボタン、つまり「上ボタン」が押された場合に、y座標から３２をひき算しています。
９行目で、キーボードの３９ボタン、つまり「右ボタン」が押された場合に、x座標に３２をたし算しています。
１０行目で、キーボードの４０ボタン、つまり「下ボタン」が押された場合に、y座標に３２をたし算しています。
１１行目で、上下ボタンが押された時に、りこちゃんを上下に動かします。
１２行目で、左右ボタンが押された時に、りこちゃんを左右に動かします。

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

<html>
<head>
    <title>キー入力</title>
    <style>
        #rico {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <img id="rico" src="rico.png">
    <script>
        var y = 0;
        var x = 0;
        addEventListener("keydown", keydownfunc, false);

        function keydownfunc( event ) {
            var key_code = event.keyCode;
            if( key_code === 37 ) x -= 32;
            if( key_code === 38 ) y -= 32;
            if( key_code === 39 ) x += 32;
            if( key_code === 40 ) y += 32;
            document.getElementById( 'rico' ).style.top = y + "px";
            document.getElementById( 'rico' ).style.left = x + "px";
        }
    </script>
</body>
</html>

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

りこ

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

山田

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

りこ

うん、すごい！

まとめ

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

アル

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

山田

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

アル

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

りこ

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

山田

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

りこ

なにを？

山田

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

りこ

……。

アル

むり……じゃなくて、がんばって！

この企画の一覧はこちら

スポンサードリンク

オススメ記事

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

2018/1/10

【Git】リモートリポジトリへPushする方法

こんにちは、@It_is_Rです。前回「【Git】ブランチを使って履歴を分岐させる方法」では、ブランチを使うことの便利さを学びました。第五回目の今回は、GitHubのリモートリポジトリを作成

2018/4/6

【Mac】Gitのダウンロードとインストールの手順

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。前回「GitHubのアカウントを作成する方法」では、GitHubのアカウントを作成する方法を紹介しま

2018/3/9

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

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

2018/8/6

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

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

2018/11/5

WordPress – デフォルトで用意されたショートコード一覧と使い方。

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

2016/10/23

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。さて、Rは今、Macアプリ開発を勉強中なので

2015/11/5

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

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

2018/1/12

WordPress｜特定カテゴリーに属する記事を一覧表示させる方法！！

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

2016/9/15

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

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

2018/7/22

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

返信