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

小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!

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

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

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

アル

アル

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


りこ

りこ

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


山田

山田

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


アル

アル

わーい


りこ

りこ

わーい

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

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

山田

山田

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

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

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

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

index.html

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

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

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

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

このように表示されます。
キー入力

アル

アル

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


山田

山田

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


りこ

りこ

keydownfunc( event )のeventってのは?


山田

山田

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

9行目の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";
}

1行目〜2行目で、変数yと変数xの初期値(しょきち)を設定(せってい)しています。りこちゃんの初期位置(しょきいち)はCSSで設定(せってい)しているので、関係(かんけい)ありませんが、キーボードが押された時点(じてん)で変数yと変数xが覚えている数が反映(はんえい)され、りこちゃんの場所が移動します。
3行目で、キーボードが入力された時に、5行目のkeydownfunc関数(かんすう)を呼(よ)び出しています。
6行目は、event.keyCode、つまり押されたボタンに割り当てられた数値(すうち)を、key_code変数に代入(だいにゅう)しています。
7行目で、キーボードの37ボタン、つまり「左ボタン」が押された場合に、x座標(ざひょう)から32をひき算しています。
8行目で、キーボードの38ボタン、つまり「上ボタン」が押された場合に、y座標から32をひき算しています。
9行目で、キーボードの39ボタン、つまり「右ボタン」が押された場合に、x座標に32をたし算しています。
10行目で、キーボードの40ボタン、つまり「下ボタン」が押された場合に、y座標に32をたし算しています。
11行目で、上下ボタンが押された時に、りこちゃんを上下に動かします。
12行目で、左右ボタンが押された時に、りこちゃんを左右に動かします。

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

アル

アル

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


山田

山田

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


アル

アル

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


りこ

りこ

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


山田

山田

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


りこ

りこ

なにを?


山田

山田

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


りこ

りこ

……。


アル

アル

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

この企画の一覧はこちら

  1. 小学生からのプログラミング入門。JavaScriptでおみくじを作ろう!
  2. 小学生からのJavaScript入門。今月の残り日数を計算してみよう!
  3. 小学生からのJavaScript入門。画像の表示と移動をしてみよう!
  4. 小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!
  5. 小学生からのJavaScript入門。ファイルを分けて管理してみよう!
  6. 小学生からのJavaScript入門。オブジェクトを使ってみよう!
  7. 小学生からのJavaScript入門。ゲームのメインループを作ってみよう!
  8. 小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!
  9. 小学生からのJavaScript。HTML5とCanvasを使ってみよう!
  10. 小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!
  11. 小学生からのJavaScript。マップでキャラを動かせるようにしよう!
  12. 小学生からのJavaScript。クラスの概念をしっかりと理解しよう!
  13. 小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!
  14. 小学生からのJavaScript。文字を表示するクラスを作ってみよう!
  15. 小学生からのJavaScript。改行と一文字ずつ画面に表示する方法!
  16. JavaScript|ノベルゲーム風にキー入力で文字を切り替える方法!

スポンサードリンク

関連コンテンツ

オススメ記事

wordpress

WordPress にウィジェット(サイドバー)を追加する方法。

サイドバーというより、頭がパーな@It_is_Rです。やかましいわ。 WordPress テーマ自作シリーズ、早くも第6回目です。 今回はウィジェット(サイドバー)を追加する方法を紹介します。

Local by Flywheel

一瞬でWordPressローカル環境を作成! Local by Flywheelの使い方

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

enchant.js

ゲームに背景画像を表示する方法!( enchant.js )

こんばんわ、@It_is_Rです。 ゴールデンウィークいかがお過ごしでしょうか。 今回は、 enchant.js を使った横スクロールアクションゲームの背景を表示してみようと思います。 空と

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと思い、その努力の割に何も得られないのが@It_is_Rです。やかましいわ。 今回の記事は初のWordPre

プログラミングのクラスってなぁに?

小学生からのJavaScript。クラスの概念をしっかりと理解しよう!

小学生からのプログラミング講座(こうざ)、第12弾です。 前回はマップ上をキャラクターが自由に動くことができるようにしました。 今回はES6から使われるようになった「ク

WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。

時計を見るとなぜか悲しくなります。@It_is_Rです。 今回から、いくつかの記事に渡って、 WordPress のテーマ(テンプレート)を自作する方法を紹介していきたいと思います。 しかし、

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

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

【Android Studio】Button(ボタン)を作る基本中の基本。

ボタンを作る基本中の基本ですが、ボタンを作ること自体が基本中の基本です。@It_is_Rです。 タイトルなんてどうだっていいんです。肝心のなのは真心です。 Androidアプリ開発、7回目とな

これから作る WordPress のテーマをローカルサイトに適用させる。

WordPress と AliExpress って混乱しますよね。@It_is_Rです。せーへんわ。 WordPress テーマ自作シリーズ、第三回目です。 前回までで、ローカルで Wor

コメントをどうぞ!

メールアドレスが公開されることはありません。