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ライブラリの作り方)

スポンサードリンク

関連コンテンツ

オススメ記事

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

webpackを使ってゲームエンジンを作ろう!(JSライブラリの作り方)

みなさんこんにちは。今回もたのしくプログラミングを学んでいきましょう! 前回の「JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方」では、JavaScriptでゲームエンジ

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

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

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

Windows10にPythonをインストールする方法

みなさんこんにちは。@It_is_Rです。今回はWindows10にPythonをインストールする方法を紹介します。 Pythonのインストーラをダウンロード では、Python

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

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

WordPressのテーマを自作してみよう。テーマ開発の方法を徹底解説!

WordPressテーマの自作方法を紹介していきます。 今回はテーマ作成における知識や、ツール、ファイル構成、実際の作り方などを書いていきます。 WordPressのテーマを自作する上

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

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

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。 前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボ

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

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

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