1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. 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">

今回は、JavaScriptのdocument.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としておりましたが、りこちゃんの位置は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

<!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. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
  7. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
  8. JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門
  9. JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門
  10. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
  11. 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
  12. 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
  13. 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
  14. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  15. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  17. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  18. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  19. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  20. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  21. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  22. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

【Mac】Gitのダウンロードとインストールの手順

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 前回「GitHubのアカウントを作成する方法」では、GitHubのアカウントを作成する方法を紹介しま

scratch

Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門

さて、今回もプログラミングの勉強(べんきょう)をはじめていきましょう!前回の「小学生からのプログラミング入門。プログラミングってなぁに?」では、プログラミングっていうのが、どういうものなのかを学びま

Gitの使い方。バージョン管理する流れを、実際にやってみよう

こんにちは。@It_is_Rです。 前回「【Mac】Gitのダウンロードとインストールの手順」では、Gitのインストーラを公式サイトからダウンロードしてインストールする方法と、Homebrew

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

【Android Studio】開発したアプリの実機テストを行う方法。

どうも、頭がすっからかんの@It_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テ

小学校プログラミング必修化。どんなことを学べばいいの?

2020年からのプログラミング必修化において、お子さんのいる方は、「いったいどんなことを学べばいいんだろう?」、「プログラミングなんてまったく分からないのに、どうやって教えてあげればいいんだろう……

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

道が覚えられない、@It_is_Rです。 人生さえ彷徨い続けてここにいます。 さて、運用中の WordPress サイトの環境を、ローカル開発環境と同期したい時、 WordMove を使うとと

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

喧嘩するほど仲がいいとは言いますが、喧嘩する相手がいません。友達がいないということでしょうか。@It_is_Rです。 前回、StoryboardでMacのウィンドウに文字を表示しました。しかし、

Dockerでよく使うコマンドとオプション、その使い方を徹底解説!

人生に意味は求めない。それよりもDockerのコマンドの意味を理解する方が重要です。@It_is_Rです。 Dockerにはたくさんのコマンドがありますが、まずはよく使うコマンドを覚えていきまし

wordpress

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

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

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です