みなさんこんにちは。今日もプログラミングの勉強をはじめていきましょう。
前回、「JavaScriptで今月の残り日数を計算してみよう！ 小学生からのプログラミング入門」では、JavaScriptをつかって、今月の残りの日数を調べる方法を紹介しました。
今回は、ゲーム開発へ、もう一歩踏み込んで、JavaScriptで画像を表示する方法を学んでいきます。
また、画像の移動について知りたい場合は、次回の記事「JavaScriptで画像を移動してみよう！ 小学生からのプログラミング入門」をご覧ください。
うーん……
あ、アル。プログラムの勉強は進んだ？
あ、りこちゃん。やっぱりゲームなんだから画像を表示させたいんだけど、やり方が分からないんだ
それなら山田先生にききに行きましょ！
プロローグ
先生！ また来たよ！
来ちゃった
おう、アルくん、りこちゃん。よく来たべな
ゲームに画像を使いたいんだって
そうだべか……じゃあ今日は、画像の表示について詳しく教えていくべ
今回使う画像と、その保存場所について
では、まずは、今回使う画像とその保存場所についてです。
もし、表示したい画像が手元にない場合は、こちらを使って欲しいんだべ
りこちゃんのドット絵画像だべ
きゃー！ 私がちっちゃくなっちゃった
この画像を右クリックして、「名前を付けて画像を保存」で保存するべ
どこに保存すればいいかな……
今回はシンプルに、次のように保存してほしいんだべ
game/
|-- index.html
`-- rico.pngHTMLで画像を表示してみよう
さて、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で、画像つきのおみくじゲームを作ろう！
