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

JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門

みなさんこんにちは。
今回も、プログラミング勉強べんきょうをはじめていきましょう!

前回、「JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門」では、JavaScriptジャバスクリプト画像がぞう表示ひょうじしてみました。
今回は、その画像を動かしてみましょう!

山田

JavaScriptを使うと、前回表示した画像を動かすこともできるんだべ

りこ

わたしが動くってことね。わくわく

アル

画像が動けば、ゲーム作りにまた一歩近づけた気がするよね

目次
  1. HTMLエイチティーエムエルタグにIDをつけよう!
  2. CSSを使ってみよう!
  3. まとめ

HTMLエイチティーエムエルタグにIDをつけよう!

山田

じゃあ、JavaScriptジャバスクリプトでキャラクターをうごかすために、りこちゃんの画像がぞうIDアイディーをつけるべ

アル

IDってなに?

りこ

きっとあれよ。ドコモの電子マネー

山田

ちがうべ。よけいにむずかしい話になってるべよ
笑いのセンスがなってないべ
わたすは、笑いにかんしてだけはうるさいべ……

りこ

プログラミングじゃなくて、笑いなんだ……

山田

IDっていうのは、出席番号しゅっせきばんごうのようなものだべ
りこちゃん、アルくん。ふたりの出席番号はなんばんだべな?

りこ

わたしは7ばん

アル

12ばん

山田

それは、りこちゃんたちのクラスで、りこちゃんと、アルくんだけの数字だべ
7ばんはりこちゃんのID、12ばんはアルくんのIDってことだべ

つまり、12ばんと7ばんは、それぞれアルくんとりこちゃんのことを表すんだべ

りこ

じゃあ、タグにIDをつければ、そのタグをIDで表すことができるってこと?

山田

そういうことだべ
でもHTMLでのIDは、数字じゃなくてもいいんだべ。分かりやすい名前をつけるといいべよ

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

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

今回は、JavaScriptdocument.write()を使って、画像を表示しているので、実際じっさいにはこのようになります。

document.write( '<img id="rico" src="rico.png">' );
山田

このIDは、一つのページに一つのものだべ
同じIDを別のタグにつけてはいけないべよ

りこ

そっか。同じ名前のIDがあったら、どのタグを表しているのか分からないもんね

CSSを使ってみよう!

山田

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

りこ

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

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>キャラクターの表示</title>
	<style>
		#rico {
			position: absolute;
			top: 64px;
			left: 64px;
		}
	</style>
</head>
<body>
	<script>

		//画面に画像を表示する
		document.write( '<img id="rico" src="rico.png">' );

	</script>
</body>
</html>

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

キャラクターの表示

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

アル

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

山田

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

では、CSSで指定したものを、JavaScriptで動かしましょう。
さきほどは、64pxとしておりましたが、りこちゃんの位置はCSStop: 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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>キャラクターの表示</title>
	<style>
		#rico {
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>
<body>
	<script>

		//画面に画像を表示する
		document.write( '<img id="rico" src="rico.png">' );

		//キャラクターを動かす
		var y = 0;
		document.getElementById( 'rico' ).onclick = function() {
			y += 32;
			document.getElementById( 'rico' ).style.top = y + "px";
		}

	</script>
</body>
</html>

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

りこ

きゃー、私が歩いてる!

山田

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

まとめ

今回はJavaScriptジャバスクリプト画像がぞうを動かす方法を学びました。

山田

どうだべか?
ちゃんと画像が動いたべか?

りこ

うん、動いたよ!

アル

ぼくも動いた!

山田

それはよかったべ

りこ

先生、教えてくれたおれいに、っこしてあげる

山田

てやんでぇ、べらぼうめ!
ねこあつかいしないでほしいべ……まぁ、あたまでるぐらいならゆるしてあげるべ

アル

今日の給食の魚、あげようか?

山田

さかな!?

りこ

じゃあ、私のお魚も……

山田

おさかな!?

りこ

うん

山田

しかたないべ。今日は特別とくべつにわたすを抱っこするといいべ……

このシリーズの一覧はこちら

  1. 小学生からのプログラミング入門。プログラミングってなぁに?
  2. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門
  3. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門
  4. Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門
  5. Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門
  6. テキストエディタ(Visual Studio Code)をインストールしてみよう! 小学生からのプログラミング入門
  7. Visual Studio Codeを日本語化してみよう! 小学生からのプログラミング入門
  8. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
  9. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
  10. JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門
  11. JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門
  12. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
  13. 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
  14. 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
  15. 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  17. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  18. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  19. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  20. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  21. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  22. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  23. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  24. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門
  25. JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方
  26. webpackを使ってゲームエンジンを作ろう!(JSライブラリの作り方)
  27. WindowsにPythonをインストールしてみよう!小学生からのPython入門
  28. MacにPythonをインストールしてみよう!小学生からのPython入門
  29. Pythonでじゃんけんゲームを作ってみよう!小学生からのPython入門
  30. Pythonのtkinterを使って、ウィンドウを表示してみよう!
  31. Pythonのtkinterで、画像つきのおみくじゲームを作ろう!
オリジナルゲーム.com