1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. 小学生からのJavaScript入門。画像の表示と移動をしてみよう!

小学生からのJavaScript入門。画像の表示と移動をしてみよう!

小学生からのJavaScript入門、第3弾です。
今回はゲーム開発(かいはつ)へもう一歩踏み込んでみましょう!

アル

アル

うーん……


りこ

りこ

あ、アル。プログラムの勉強は進んだ?


アル

アル

あ、りこちゃん。やっぱりゲームなんだから画像(がぞう)を表示(ひょうじ)させたいんだけど、うまくいかないんだ


りこ

りこ

それなら山田先生にききに行きましょ!

目次
  1. HTMLで画像を表示してみよう
  2. パスの書き方を覚えよう!
  3. JavaScriptでキャラクターを移動してみよう!
  4. まとめ

HTMLで画像を表示してみよう

アル

アル

先生! 画像ってどうやって表示させるの?


山田

山田

おう、アルくん。いきなりだべな


りこ

りこ

ゲームに画像を使いたいんだって


山田

山田

そうか。それならHTMLで画像を表示してしまって、それをJavaScriptで動かす方法が一番簡単(かんたん)だべ。今から教えてあげようべか?


アル

アル

うん!


りこ

りこ

うん!

画像を表示して動かしたい時、HTMLで画像を表示させてそれをJavaScriptで動かす方法が一番簡単です。
画像を表示させるためのHTMLタグは、<img>です。

<img src="img.png">

山田

山田

このsrcってとこに、画像ファイルまでのパスを入力するんだべ


アル

アル

パスってなぁに?


山田

山田

ファイルまでの場所ってことだべ。パスの書き方は後からくわしく教えるべ。それより実際に画像を表示させてみるべ!表示させるのは、りこちゃんのドット絵画像だべ

りこ

りこ

りこ

きゃー! 私がちっちゃくなっちゃった


山田

山田

この画像を右クリックして、「名前を付けて画像を保存」で保存するべ

ではダウンロードした画像を、ブラウザに表示してみましょう。
gameというフォルダをつくり、その中にindex.htmlファイルとダウンロードしたりこちゃんの画像ファイルを入れてください。

game/
├ index.html
└ rico.png

index.html

<html>
    <head>
        <title>キャラクターの表示</title>
    </head>
    <body>
        <img src="rico.png">
    </body>
</html>

これでブラウザにりこちゃんの画像が表示されます。
キャラクターの表示

パスの書き方を覚えよう!

imgタグを使うとき、パスの書き方を覚えておく必要があります。
ここでパスの書き方を学びましょう!

パスの書き方はいくつかありますが、今回は相対(そうたい)パスのつかいかたを覚えていきたいと思います。
例えば、gameというフォルダに、index.htmlファイルとimg.pngファイルがあるとします。

game/
├ index.html
└ img.png

このindex.htmlとimg.pngは「同じ階層(かいそう)にある」といいます。

index.htmlから、同じ階層のimg.pngを呼び出したい時は「img.png」もしくは「./img.png」と入力すれば、呼び出すことができます。

<img src="img.png">
<img src="./img.png">

では次の場合はどうでしょうか。

game/
├ index.html
└ img/
  └ img.png

gameフォルダに、index.htmlとimgフォルダがあり、imgフォルダの中にimg.pngファイルがあります。
このimg.pngを呼び出したい時は「img/img.png」もしくは「./img/img.png」と入力します。

<img src="img/img.png">
<img src="./img/img.png">

こんな場合もあります。
gameフォルダの中にhtmlフォルダとimg.pngがあります。
htmlフォルダの中には、index.htmlがあります。
この場合、index.htmlから見てimg.pngは「1階層上にある」といいます。

game/
├ html/
│ └ index.html
└ img.png

1階層上のimg.pngを呼び出すには「../img.png」とします。
この「../」というのが、1階層上となります。

<img src="../img.png">

もしも目的のファイルが、2階層上だった場合は次のようにすればOKです。

<img src="../../img.png">

山田

山田

これらを組み合わせて、目的のファイルへのパスを指定(してい)するんだべ


りこ

りこ

ファイルを呼び出すindex.htmlからの場所を指定すればいいんだね


山田

山田

そうだべ。このように、呼び出す場所から見て、目的のファイルの場所を指定するパスを「相対パス」というから、合わせて覚えておくといいべ。
他にも「絶対パス」や「ルート相対パス」があるべ。それらはまた別の機会(きかい)に学んでいくべ

JavaScriptでキャラクターを移動してみよう!

山田

山田

じゃあ次はJavaScriptでキャラクターを動かしてみるべ


りこ

りこ

私が動くの!? すごい!


山田

山田

キャラを動かすために、りこちゃんの画像にIDをつけるべ

まず、りこちゃんの画像(imgタグ)にIDをつけましょう。IDはそのタグにたいしての名前です。
imgタグに「rico」という名前をつけてみました。

<img id="rico" src="rico.png">

山田

山田

ちょっとここでCSSについて学ぶべ。CSSというのはホームページのデザインをするためのものだべ


りこ

りこ

きっとCSSで画像の位置(いち)を決めたりできるのね!

CSSはホームページのデザインをするものです。例えば、画像の位置を決めたり、背景の色を決めたりといったことができます。
今の状態(じょうたい)では、りこちゃんの画像は上から0、左から0の場所にあります。
これをCSSを使って、場所を変更してみましょう。

CSSを使うには、headタグのなかで、styleタグを使います。

<html>
    <head>
        <title>キャラクターの表示</title>
        <style>
            #rico {
                position: absolute;
                top: 64px;
                left: 64px;
            }
        </style>
    </head>
    <body>
        <img id="rico" src="rico.png">
    </body>
</html>

#というのはIDということで、#ricoとすると「ricoというID名」という意味になります。
position: absolute;で、#ricoの位置(いち)を絶対位置にします。
top: 64px;は画像を上から64pxの位置に設定(せってい)します。
left: 64px;は画像を左から64pxの位置に設定します。

キャラクターの表示

このように上から64px、左から64pxの位置にりこちゃんが移動しました。

アル

アル

もしかして、このCSSで位置を指定したのをJavaScriptで動かすの?


山田

山田

お、そうだべ。アルくん、ちょっとプログラミングに慣(な)れてきたべな

では、CSSで指定したものを、JavaScriptで動かしましょう。
りこちゃんの位置はCSSのtop: 0left: 0にしておきます。
これが初期位置(しょきいち)となります。

#rico {
    position: absolute;
    top: 0;
    left: 0;
}

またJavaScriptはこのようにします。

var y = 0;
document.getElementById( 'rico' ).onclick = function() {
    y += 32;
    document.getElementById( 'rico' ).style.top = y + "px";
}

1行目はyという変数(へんすう)の宣言(せんげん)と代入(だいにゅう)です。
yという変数に0という数字を覚えてもらいます。

2行目はりこちゃんの画像が押されたときにという意味で、りこちゃんの画像が押された時にどうしたいのかを{}のなかに書いていきます。

3行目のy += 32;は、変数yが覚えている数に32ずつプラスしていくという意味になります。
新しい書き方なので、覚えておきましょう。

4行目はちょっと複雑(ふくざつ)なのですが、りこちゃんの画像のCSS(#rico)に「top: (y)px」を入れてくれます。
yは最初に0を覚えていますが、りこちゃんの画像がクリックされるたびに32pxずつ増えていきます。

全体(ぜんたい)ではこのようになります。

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;
            document.getElementById( 'rico' ).onclick = function() {
                y += 32;
                document.getElementById( 'rico' ).style.top = y + "px";
            }
        </script>
    </body>
</html>

ブラウザでindex.htmlを開くとこのようになります。
下のりこちゃんをクリックしてみてね。

りこ

りこ

きゃー、私が歩いてる!


山田

山田

今回は前にしかすすまないべけど、もっと作り込めば方向キーで移動させることも可能だべよ

まとめ

今回はキャラクターの表示と移動を学びました。
まだクリックで前にしか進めませんが、今後(こんご)の記事(きじ)でもっと自由に移動できる方法も紹介(しょうかい)していきます。

山田

山田

今回は画像の表示と移動の方法を学んだべよ


アル

アル

やっぱり画像が動くと、ゲームっぽくなって楽しいね


りこ

りこ

私、方向キーで操作(そうさ)できるようにしたい!


山田

山田

それはまた後日の記事で紹介するから、もう少し待つべよ


りこ

りこ

うん! 楽しみ!


アル

アル

うん!

この企画の一覧はこちら

  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|ノベルゲーム風にキー入力で文字を切り替える方法!

スポンサードリンク

関連コンテンツ

オススメ記事

マップ上をキャラが移動できるようにしよう!

小学生からのJavaScript。マップでキャラを動かせるようにしよう!

小学生からのプログラミング講座(こうざ)、第11弾です。 前回は、JavaScriptでのマップの作り方を紹介(しょうかい)しました。 しかし、まだマップを配置(はいち)しただけで、キャラクタ

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 今回はPugでWordPressテーマを作る方法を少し紹介します。 詳しいテーマの作り方はこちらをご覧ください。 WordPressのテーマを自作

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

おみくじゲームを作るべ!

小学生からのプログラミング入門。JavaScriptでおみくじを作ろう!

小学生から始めるプログラミングシリーズです。 この講座ではScratch(スクラッチ)から少しレベルアップして、JavaScriptを使ってプログラミングを行なっていきます。 Scratc

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

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

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

迷路やRPGで使えるマップを作ってみよ!

小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!

小学生からのプログラミング講座(こうざ)、第10弾です。 前回はHTML5とCanvasを使って、キャラクターがキーボードの入力(にゅうりょく)で移動(いどう)するところまで、紹介(しょうかい)

WordPressのテーマを自作してみよう。テーマ開発の方法を徹底解説!

WordPressテーマの自作方法を紹介していきます。 今回はテーマ作成における知識や、ツール、ファイル構成、実際の作り方などを書いていきます。 WordPressのテーマを自作する上

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

コメントをどうぞ!

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