ゲームを作ってみたい今日この頃。
ただ、アプリにすると配信するために月額料金がかかったり、審査があったり…
まずは動くものを作ってみたいだけなのに。
ということで、はじめの一歩としてブラウザ上（chromeなど）で動くようなゲームを作ろうと思いました。
言語としてはJavaScriptなるものを使うそうですので、さっそく基礎を知っておきましょう。
JavaScriptとは
プログラミング言語のひとつで、HTMLという、Webの見た目などを作る簡単な言語と掛け合わせて動かすことができます。
下から滑り込むようにして表示される広告や、時間の経過で切り替わる画像などは、裏でこのJavaScriptが動作しているからこその動きです。
そんなHTMLは、記事執筆現在、HTML5が主流となっています。
ということは、HTML4などもあったということです。バージョンアップを重ねてきているわけです。
そんなHTML5ですが、実はこのバージョンからJavaScriptによって画像や動画、音楽などのあらゆるコンテンツが柔軟な形で扱えるようになっています。なんてタイミングのいいこと。
そのため、JavaScriptを使えば、ブラウザ上で動作する（スマホでもパソコンでも遊べる）ゲームが作成できるというわけです。
HTMLファイルとの連結
以前HTMLについての記事を書きました。その中から一部抜粋したものが下記です。
JavaScriptはHTML内にある「body」の中にプログラムを記述していきます。場合によっては「head」の中に書くこともあります。
また、JavaScriptとHTMLのファイルを分けて記述することも可能です。この場合にはHTMLに
<script src="読み込むファイル名.js"></script>
と記述することで読み込めます。
<!DOCTYPE html> <!--HTML5形式で記述しますよという宣言-->
<html lang="ja"> <!--日本語ファイルですよという宣言-->
<head>
<!-- ファイルをHTMLで保存⇒最初の行に「！」を打つ⇒Enter⇒雛形が記述される-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ホームページのタグに表示されるタイトル-->
<title>ページタイトル</title>
</head>
<body>
<!--ここに後述するプログラムを記載していく-->
<script>
//ここにJavaScriptのプログラムを記述
</script>
</body>
</html>
JavaScriptでの変数
変数名のつけ方
使える文字 ＞ アルファベット・アンダーバー（_）・数字
使える文字の例外 ＞ 数字から始めるのはNG・予約語を使うのはNG
※予約語とは、あらかじめ決められた if・break・true・function などのこと
変数の宣言
var a = 10; var b = "good morning";
上記のプログラムでは、「var」で、変数を今から作りますよ、と宣言をして、「a」という関数に「10」を、「b」という関数に文字である「good morning」を入れています。
条件分岐（if）
if文はJavaScriptに限らず、大体のプログラム言語が同じなので覚えておきましょう。
if(条件式1) {
条件式1に当てはまる場合
}else if(条件式2) {
条件式1に当てはまらず、条件式２に当てはまる場合
}else {
どの条件式にも当てはまらない場合
}
また、条件式の書き方は下記のとおりです。
a == b 値が同じ場合True a != b 値が違う場合True a > b 値がbよりaのほうが大きい場合True a <= b 値がaと同じかaよりbのほうが大きい場合True
また、条件を複数指定したい場合には下記のようにします。
if(x == 0 && y == 0) {
xは0であり、かつ、yは０である場合の処理
}else if(x == 0 || y == 0) {
xは0である、もしくは、yは０である場合の処理
}else {
xもyも0出ない場合の処理
}
条件分岐（switch case）
ケースバイケースという言葉があるように、この関数を使うことで、比較条件によって処理を変えることができます。
switch(調べる変数) {
case 1:
変数の値が1の時の処理
break;
case 2:
変数の値が2の時の処理
break;
case 3:
変数の値が3の時の処理
break;
:
}
繰り返し処理（for）
forを使うことによって複数回反復して処理を行わせることができます。
for(var i=0; i<5; i++) {
毎回実行したい処理
}
上記では「var」を使って、「i」という変数を定義し、同時に「0」という値を代入しました。
次に、変数「i」が５未満になるまで処理を繰り返すと宣言し、
最後に、1回処理を終えるごとに「i」の値が1ずつ増えていくように宣言しています
※「i++」は、「i=i+1」と同じ処理です。
つまりこのプログラムでは0から4に増えるまでの5回処理が繰り返されることになります。
繰り返し処理（while）
こちらは、forと違い、すでに変数が宣言されているときに利用します。
var i=0;
while(i<5) {
実行したい処理
}
このプログラムでも先ほどと同じように5回処理が繰り返されることになります。
【余談】doを利用した繰り返し処理
実行したい処理を先に書きたい場合には「do」を使うことで実行できます
do {
実行したい処理
} while(i<5);
結果は先ほどのものと同じです。
関数の作成
今までの「if」などはすべて関数です。関数とは特定の処理を行ってくれる便利なものです。これは自分でも作成することができます。
function 関数名(受け取る引数の指定、省略可) {
実行したい処理;
}
上記のように記述することで関数を作ることができます。実際の活用例は下記のとおりです
var a=10;
var b=3;
function keisan(a, b) {
return a-b;
}
上記関数を実行すると10-3で、7という値が返ってきます
このように値を返す場合には「return」を利用します。
function morning() {
console.log("good morning");
}
上記関数では「good morning」という文字がコンソールログに表示されます。
配列・二次元配列
配列
配列は下記のように1つの変数に複数の値を設定することを指します。
var option = ["セーブ", "スタート", "終了"];
配列は左から順に0，1，2，3，4，5・・・というように番号が振られています。1から番号が振られているわけではないので間違えないように注意しましょう。よって、
option[1] ;
とすることで、「スタート」を指し示すことになります。
二次元配列
言葉のとおり、平面に二次元的に値を設定する方法です。
値の指定の仕方は下記画像のとおりです
var kuku = [
[1, 2, 3, 4, 5]
[2, 4, 6, 8, 10]
[3, 6, 9, 12, 15]
[4, 8, 12, 16, 20]
];
上記の配列で上から2番目、左から4番の「8」という数字を指定したい場合には、画像の表を参照してわかる通り、 [1][3] と指定すればいいわけです。よって、
kuku[1][3];
とすることで、「8」を指し示すことになります。
さいごに
ひとまずはひと段落・・・
JavaScriptの座学的な基礎知識はここまででいったんおしまいです。
次回の記事では実際にゲーム制作をしてみたいと思います。
では、また次回の記事で。
コメント