概要　この記事はプログラミング初心者を対象にした記事です。JavaScript でゲームをつくりながら，プログラミングの基礎を学ぶとともに，プログラミングをする際に必要となる数学的な知識についても理解を深めていきます。

潜水艦を海に戻そう

教材のダウンロード

下のリンクからhtmlファイルと画像ファイルをダウンロードしましょう。

ダウンロードした html ファイルをブラウザにドラッグします。すると，次の画面が表示されるでしょう。

右から左に潜水艦が動いています。

潜水艦が空をとんでいたら，変なので，まずは海に戻しましょう。

画像の定義

前回，学んだように画像をどこに表示するかは xy 座標を使ってコンピュータに教えないといけません。

まず，JavaScript ではどういうふうに画像を表示させているのか確認しておきます。詳細は後ほど説明することになります。まずは，おおまかに概略をつかんでください。

教材の３５行目をみてください。

// 潜水艦の画像を読み込む
// submarine.src で画像ファイルを指定しています
// 画像ファイルがこの html フィアルと同じディレクトリにない場合は
// パスを追加して，どこにあるのか指定します
const submarine = new Image();
submarine.src = 'submarine.png';　// 32x32の潜水艦の画像ファイル

const submarine = new Image();　の部分は，画像を使えるようにする準備です。これから submarine という画像を使いますよという意味です。

submarine.src = 'submarine.png'; の部分は，使う画像ファイルを指定しています。

画像の表示

教材の59行目をみてください。

// 潜水艦の画像を表示
ctx.drawImage(submarine, submarineX, submarineY, 32, 32);

drawImage の引数をみましょう。一つ目は submarine となっています。35行目で使う準備をした submarine です。次のsubmarineX, submarineY は submarine を表示させる位置です。xy 座標ですね。次の 32, 32 というのは表示する画像の幅と高さです。32 x 32 で表示させてほしいということです。

潜水艦の位置の指定

潜水艦の位置は29行目で指定しています。

// 潜水艦の初期位置
// submarineX は x 座標
// submarineY は y 座標
//
let submarineX = 750;
let submarineY = 250;

submarineX に750を代入，submarineY に250を代入するという意味です。

ctx.drawImage(submarine, submarineX, submarineY, 32, 32);

とすると，先のdrawImage は直接，数値で書くとこうなります。

ctx.drawImage(submarine, 750, 250, 32, 32);

プログラミングでは，直接，数値を書くのではなく，中学で学ぶ文字式のように文字に数値を代入して，その文字を使うことが多いです。

数値を代入する文字のことを，プログラミングでは変数といいます。

変数

変数は変わる数と書きます。

その名のとおり，数を変えることができます。

もう一度，教材の29行目をみましょう。

// 潜水艦の初期位置
// submarineX は x 座標
// submarineY は y 座標
//
let submarineX = 750;
let submarineY = 250;

ここでは変数を宣言しています。宣言するというのは，これから，submarineX と submarineYという変数を使いますとコンピュータに言っているということです。

その後にイコール (=) が続きます。この記号は注意が必要です。数学であれば，これは等号を表します。

プログラミングでは代入を表します。代入というのはsubmarineXという変数に例えば750という数値を入れますよという意味です。

そして，この数値は今後変えることもありますよとコンピュータに let をつかって教えています。

let submarineX = 750;

このコードの意味は次のとおりです。

数値を変えることができるとはどういうことか？

試しに，教材の31行目に次のように書いて，上書き保存し，ブラウザにドラッグしてください。

submarineY = 0;

潜水艦の位置が変わりましたね。変数については，また演習をしながら，詳しく学んでいきましょう。

演習

潜水艦が空をとんでいたら，変ですね。海に戻してください。

これまでの説明を読んで，教材の31行目の数値を書き換えて潜水艦の位置を修正してください。

教材を保存したら，ブラウザにドラッグしましょう。

潜水艦は海のなかに表示されていますか？

関係するサイト

これからの記事では，ドッタウンさんが作られた潜水艦と UFO の画像を使います。ドッタウンさんの作られるドット絵はとてもすてきだと思います。

おすすめの書籍

遊んでみたくなるゲームがたくさん紹介されています。解説も丁寧にされているので，ひとりでも勉強を進めることができるでしょう。