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

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

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

アル

うーん……


りこ

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


アル

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


りこ

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

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. 小学生から始めるプログラミング入門。プログラミングってなぁに?
  2. 小学生から始めるScratch入門。使い方とゲーム開発の基礎知識
  3. 小学生から始めるScratch入門。シューティングゲームを作ろう!
  4. 小学生からのプログラミング入門。JavaScriptでおみくじを作ろう!
  5. 小学生からのJavaScript入門。今月の残り日数を計算してみよう!
  6. 小学生からのJavaScript入門。画像の表示と移動をしてみよう!
  7. 小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!
  8. 小学生からのJavaScript入門。ファイルを分けて管理してみよう!
  9. 小学生からのJavaScript入門。オブジェクトを使ってみよう!
  10. 小学生からのJavaScript入門。ゲームのメインループを作ってみよう!
  11. 小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!
  12. 小学生からのJavaScript。HTML5とCanvasを使ってみよう!
  13. 小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!
  14. 小学生からのJavaScript。マップでキャラを動かせるようにしよう!

スポンサードリンク

関連コンテンツ

オススメ記事

wordpress

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

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

【Bootstrap 4】ボタン(btn)の作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

【Gitの使い方 – その3】Gitで実際にバージョン管理してみよう!

お魚くわえた@It_is_Rです。 Gitの使い方第3回目の今回は、実際にGitを使ってバージョン管理をしてみようと思います。 [serif name="It is R"]りこ師匠

zsh

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

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

HTML5とCanvasを使うべ!

小学生からのJavaScript。HTML5とCanvasを使ってみよう!

小学生からのプログラミング講座(こうざ)、第12弾です。 これまでの講座(こうざ)では、JavScriptの基本(きほん)について学び、キャラクターの操作(そうさ)ができるようになりました。

Swift

【Xcode7】Swift2使ってみた。playgroundで遊びながら覚える。

最近は押入れの中で寝るのが日課の@It_is_Rです。 押入れは寝心地がいいです。部屋も押入れ分だけ広くなるし。 SwiftはAppleが出しているプログラミング言語です。Swiftを使うこと

bootstrap3

Bootstrap3でサイト制作するための、準備と初期設定。

ゲーム制作は順調にすすんでいます。このまま順調にいけば、今月か来月までには完成できそうです。@It_is_Rです。 さて、今回はBootstrap3によるサイト制作の入門講座です。 このBoo

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。 管理画面をカスタマイズする

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

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

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

コメントをどうぞ!

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