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

スポンサードリンク

関連コンテンツ

オススメ記事

JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

プログラミングは奥が深い。。。@It_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、WEB開発で、JavaScriptは必須といっても過言ではありません

Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。 管理画面をカスタマイズする

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

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

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

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

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

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

プログラミングのクラスってなぁに?

【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう! 前回はマップ上をキャラクターが自由に動くことができるようにしました。 今回はES6から使われるようになった「クラス

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

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

Android Studio

【Android Studio】新規プロジェクトを作成する方法

前回、 Android Studio のインストールが完了しました。 その続きから始めていきましょう。 今回は新規プロジェクトを作成する方法です。 新規プロジェクトの作成 それ

GitHubのアカウントを作成する方法

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。まず今回はG

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

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