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】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門
  23. JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方
  24. webpackを使ってゲームエンジンを作ろう!(JSライブラリの作り方)

スポンサードリンク

関連コンテンツ

オススメ記事

Unityのダウンロードとインストールの方法【Mac】

UnityはUnity Technologiesのゲームエンジンです。2D、3Dゲーム両方に対応しており、大手企業も使用してゲームを開発している、とても高機能なツールです。 Unityにはいく

carousel

【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

Bootstrap4の使い方、第8回目です。 サイトをみていると、画像を横並びにしてくるくると回転するカルーセル機能を実装しているサイトがありますよね。 Bootstrap4には、カルーセルを

zsh

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

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

【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法

前にBootStrap4の記事を書いていましたが、日にちが空いてしまいましたね。@It_is_Rです。 前回は全体的な機能とアラートの使い方を紹介しました。 今回はバッジの使い方を紹介していき

【enchant.js入門】ガンシューティングゲームの作り方を完全解説!

enchant.jsを使ってガンシューティングゲームの開発を行なっていきます。 enchant.jsはゲームを作るのに特化したJavaScriptフレームワークです。 これを使うことで、Jav

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

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

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。 トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。 今回はそんな記事一覧ページを作るのに便利な「カー

【Gulp4】gulpfile.jsを複数ファイルに分割して、作業効率を上げよう!

Gulpを使って開発を進めているいると、だんだんとgulpfile.jsが複雑になり、どこになにが書いてあったか分からなくなることがあります。そんなときは、gulpfile.jsを分割して管理すると

FC2でブログを始めよう!誰でも簡単にできるブログの作り方

FC2ブログは、FC2が運営する無料でブログを開設できるサービスです。(有料版もあります) また、FC2のサービスには、動画、ライブ配信、アフィリエイト、小説など、様々なものがあります。 今回

fish shell

Fish shellの使い方。プラグインなしでもここまで可愛くできる!

先日、Macをフォーマットしたため、今まで構築したきた開発環境が消えました。 といっても、バックアップはとってあるので戻すことはできるのですが、せっかく綺麗に全部消えたので、もう一度作り直そうかな、

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

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