みなさんこんにちは。今日もプログラミングの勉強をはじめていきましょう。
前回、「JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門」では、JavaScriptをつかって、今月の残りの日数を調べる方法を紹介しました。
今回は、ゲーム開発へ、もう一歩踏み込んで、JavaScriptで画像を表示する方法を学んでいきます。
また、画像の移動について知りたい場合は、次回の記事「JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門」をご覧ください。

うーん……

あ、アル。プログラムの勉強は進んだ?

あ、りこちゃん。やっぱりゲームなんだから画像を表示させたいんだけど、やり方が分からないんだ

それなら山田先生にききに行きましょ!
プロローグ

先生! また来たよ!

来ちゃった

おう、アルくん、りこちゃん。よく来たべな

ゲームに画像を使いたいんだって

そうだべか……じゃあ今日は、画像の表示について詳しく教えていくべ
今回使う画像と、その保存場所について
では、まずは、今回使う画像とその保存場所についてです。

もし、表示したい画像が手元にない場合は、こちらを使って欲しいんだべ
りこちゃんのドット絵画像だべ


きゃー! 私がちっちゃくなっちゃった

この画像を右クリックして、「名前を付けて画像を保存」で保存するべ

どこに保存すればいいかな……

今回はシンプルに、次のように保存してほしいんだべ
game/
|-- index.html
`-- rico.png
HTMLで画像を表示してみよう
さて、JavaScriptで画像を表示させていきたいのですが、そのまえに、HTMLでの画像を表示させる方法を学んでおきましょう。
画像を表示させるためのHTMLタグは、<img>です。
画像のファイル名が「rico.png」の場合は、このようにします。
<img src="rico.png">

パスってなぁに?

あれじゃない? バスケとかで……

ああ、ボールを渡すんだ!

てやんでぇ、べらぼうめ! そのパスじゃないべよ!

え、ちがうの?

パスっていうのは、ファイルまでの場所のことだべ
パスの詳しい書き方は「パスの書き方を覚えよう。絶対パス、相対パス、ルート相対パスの違い」を見て欲しいべよ
今回は、index.htmlファイルとrico.pngファイルが同じ場所にあるべから、ただファイル名を入力するだけでOKだべ
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>キャラクターの表示</title>
</head>
<body>
<img src="rico.png">
</body>
</html>
これでブラウザにりこちゃんの画像が表示されます。

わたしが表示されたよ!
JavaScriptで画像を表示してみよう
つづいて、JavaScriptによって画像を表示する方法です。
document.write( '<img src="rico.png">' );

なんだかむずかしいよ……

あれ、でもさっきのimgタグが、かっこの中に書かれてるよ!

へぇ、そうなんだ
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>キャラクターの表示</title>
</head>
<body>
<script>
document.write( '<img src="rico.png">' );
</script>
</body>
</html>
index.htmlをブラウザで確認すると、さきほどと同じようにりこちゃんの画像が表示されます。

まとめ
今回はJavaScriptでの、画像の表示のしかたを学びました。
まだ動いたりはしませんが、今後の記事で自由に移動できる方法も紹介していきます。

今回は画像の表示方法を学んだべよ

やっぱり画像が表示されると楽しいね

私、方向キーで操作できるようにしたい!

それはまた後日の記事で紹介するから、もう少し待つべよ

うん! 楽しみ!

うん!
このシリーズの一覧はこちら
- 小学生からのプログラミング入門。プログラミングってなぁに?
- Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門
- Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門
- Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門
- Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門
- テキストエディタ(Visual Studio Code)をインストールしてみよう! 小学生からのプログラミング入門
- Visual Studio Codeを日本語化してみよう! 小学生からのプログラミング入門
- JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
- JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
- JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門
- JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門
- 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
- 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
- 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
- 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
- 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
- HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
- 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
- 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
- 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
- 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
- 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
- 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
- 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門
- JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方
- webpackを使ってゲームエンジンを作ろう!(JSライブラリの作り方)
- WindowsにPythonをインストールしてみよう!小学生からのPython入門
- MacにPythonをインストールしてみよう!小学生からのPython入門
- Pythonでじゃんけんゲームを作ってみよう!小学生からのPython入門
- Pythonのtkinterを使って、ウィンドウを表示してみよう!
- Pythonのtkinterで、画像つきのおみくじゲームを作ろう!