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。プログラム全体をクラスを使って作ってみよう!

小学生からのプログラミング講座(こうざ)、第13弾です。 前回はプログラミングにおける、クラスの使い方を学びました。しかし、まだクラスをどうやって使えばいいのか、ピンときていないかも

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

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

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

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

キーボードで画像を動かすよ!

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

小学生からのJavaScript入門講座(にゅうもんこうざ)、第4弾です。 前回はHTMLでりこちゃんの画像を表示し、クリックすると前に一歩動くというのをJavaScriptで作りました。 J

VCCW

VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

考えすぎて間違った方向へ進む、@It_is_Rです。 WordPress のローカル開発環境を作りたい時、 VCCW を使うと便利です。 今回は、 その方法を紹介します。 VCC

Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!

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

scratch

小学生から始めるScratch入門。シューティングゲームを作ろう!

小学生から始めるScratch入門です。 前回、ゲーム開発に必要な知識を学びました。 第3回目の今回は、これまでに学んだ知識を活用し、実際にシューティングゲームを作ってみようと思います。

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

WordPress

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

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

コメントをどうぞ!

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