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

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

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

アル

うーん……


りこ

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


アル

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


りこ

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

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。文字を表示するクラスを作ってみよう!

スポンサードリンク

関連コンテンツ

オススメ記事

VCCW

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

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

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

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

Android アプリ開発入門! Android Studio のインストール手順。

人の笑顔が大嫌い。 @It_is_R です。 Android アプリ開発では、 Eclipse や Android Studio を使ってアプリを開発するのが一般的です。 一般的に言語は Ja

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

【Mac】ローカルにWebサーバを立ち上げる超簡単な方法!

JavaScriptを使ってWebページなどの開発をしていると、Google ChromeやSafariなどのブラウザでうまく開けない場合が稀にあります。 そんな時、ローカルにWebサーバを立ち上げ

Ameba customize

アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

どうも、@It_is_Rです。 ホームページを作成するには、まずHTMLを使う能力、若しくはソフトが必要になります。 さらにサーバーを借りなくてはなりません。するとお金がかかったりします。 では

HTML CSS

Google Fontsの使い方。サイトをカッコよくしよう。

Webページを作るのは結構好きな@It_is_Rです。 WordPress、もしくは他のホームページやブログをやっていると、フォントを変えたいなと思うことも多いと思います。 そこで、Googl

メインループを作ってみよう!

小学生からのJavaScript入門。ゲームのメインループを作ってみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第7弾です。 突然(とつぜん)ですが、ゲーム開発(かいはつ)の基本として大切なことってなんだったか覚えていますか? そうです。「変

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。 WordPress テーマ自作シリーズ、第2回目です。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていき

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

コメントをどうぞ!

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