小学生からの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>
下の枠内（わくない）を一度クリックしてから、方向キーでりこちゃんを動かしてみてね！
りこ
きゃー、わたしがキーボードの入力で動いてる！
山田
かなりゲームっぽくなってきたべな
りこ
うん、すごい！
まとめ
今回はJavaScriptでキャラクターを操作（そうさ）できるようにする方法を紹介しました。
アル
この動き、昔のポケモンっぽいよ！
山田
結構（けっこう）古いバージョンだと思うべけど、よく知ってるべな
アル
ゲーム、大好きだからね！
りこ
はやくみんなにやってもらえるようなゲームが作りたいなー
山田
頑張ってやればすぐに作れるべよ。わだずもディズニーランドにいくことを夢見て毎日頑張ってるべ
りこ
なにを？
山田
人間になりすます練習だべ
りこ
……。
アル
むり……じゃなくて、がんばって！
この企画の一覧はこちら
- 小学生からのプログラミング入門。JavaScriptでおみくじを作ろう！
- 小学生からのJavaScript入門。今月の残り日数を計算してみよう！
- 小学生からのJavaScript入門。画像の表示と移動をしてみよう！
- 小学生からのJavaScript入門。キー入力でキャラを動かしてみよう！
- 小学生からのJavaScript入門。ファイルを分けて管理してみよう！
- 小学生からのJavaScript入門。オブジェクトを使ってみよう！
- 小学生からのJavaScript入門。ゲームのメインループを作ってみよう！
- 小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす！
- 小学生からのJavaScript。HTML5とCanvasを使ってみよう！
- 小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう！
- 小学生からのJavaScript。マップでキャラを動かせるようにしよう！
- 小学生からのJavaScript。クラスの概念をしっかりと理解しよう！
- 小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう！
- 小学生からのJavaScript。文字を表示するクラスを作ってみよう！
- 小学生からのJavaScript。改行と一文字ずつ画面に表示する方法！
- JavaScript｜ノベルゲーム風にキー入力で文字を切り替える方法！
なぜ「==」ではなく「===」を用いてコードを書いたのですか？
個人的には「===」がいまいち理解できないので「==」を用いてfalseをtrueに変えて書き、画像を動かすことができました。しかし、これだとどこかで不具合が出るのでしょうか？