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

スポンサードリンク

関連コンテンツ

オススメ記事

gulp

gulpでsassをcssにコンパイル。インストール&便利な使い方。

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回は、gulpを使ってsassをcssに

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。 今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

Ameba customize

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

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

enchant.js

enchant.js でクラスを作る、激分かりやすい方法!

こんばんわ、ちょっと海外へ行っておりました@It_is_Rです。 前回までの enchant.js の記事で、画像の表示やキャラの移動など、ゲーム制作には欠かせない基礎知識が身についたのではない

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

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

zsh

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

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

ブログSEOに絶対的効果!人を惹きつける記事タイトルの考え方のコツ

ブログのSEO対策において、もっとも重要なのは記事の内容、そしてタイトルです。 情報を探している人はまずタイトルを見ます。つまりタイトルによって人がその記事をクリックするかどうかが決まります。

JavaScriptマンガ講座。条件分岐(if文)の真偽値による使い方。(実践編)

生まれも育ちもド田舎、@It_is_Rです。 JavaScriptマンガ講座、第3回目です。 笑いあり、涙あり(?)のマンガで、JavaScriptを覚えようというものです。 今回は条件

コメントをどうぞ!

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