JSのIF文【簡単なゲームを作りながらプログラミングを学習】

コイン集めゲームを作っていきながら、プログラミングを覚えていきましょう！

【第1回】jsのイベント発火や足し算など
【第2回】viewport設定、javascriptにて様々な算術
【第3回】JSの条件分岐処理（IF文）
【第4回】乱数を生成して株価を変更

今日の成果物
条件分岐処理を追加
アラートを出す
完成形
1. HTML
2. javascript
次回予告
本気でプログラミングを習得、したい方
1. オススメする理由

今日の成果物

前回、投資ボタンを作りましたが、所持コインが必要コイン枚数に達していなくても投資ボタンが作動する仕組みになっていました（所持コイン枚数はマイナスになる）。
今回は、コインが足りていなければ「コインが足りません」というアラートを表示して、それ以外の処理を何も行わないという機能を付加していきます。

条件分岐処理を追加

これから付加する機能のイメージとしては、

「投資ボタン」を押す
「所持コイン」と「必要コイン」を比較
【所持コインの方が大きい場合】
⇒前回同様処理を進める
【必要コインの方が大きい場合】
⇒「コインが足りません」というアラートを出すのみ

２と３が今回の新たな機能です。

このような場合はIF文を使うといいでしょう。

「IF」は英語で、日本語にすると「もしも…」ですね。

If it is fine tomorrow, I wanna go on a picnic.
（もし明日晴れたら、ピクニックにいきたい。）

JSのIF文もほとんどこのままです。
それでは、実際に書いてみましょう。

function investment(){
	if(MyCoin >= InvestmentCoin){
		PlusCoin *= parseInt(2);
		MyCoin -= parseInt(InvestmentCoin);
		InvestmentCoin = parseInt(PlusCoin * 10);
		document.getElementById('pluscoin').innerHTML = PlusCoin;
		document.getElementById('mycoin').innerHTML = MyCoin;
		document.getElementById('investment_coin').innerHTML = InvestmentCoin;
	}else{
		alert('コインが足りません');
	}
}

２行目にifがありますね。
ifがあってその後の（）の中身が「もし〜だったら」の部分です。

今回の例で言うと
「もし、MyCoinがInvestmentCoinより等しいもしくは大きければ…」
という風に読み取れます。

そして、そのあとの「{」から「}」の中身が、「等しいもしくは大きければ」（所謂、TRUEの時）だった時に処理をしたい内容を記載します。

ここまでは問題ないと思います。

１つ目の「}」の後に「else{」というのが出てきます。

これは、「で、ない場合は」の時に実行したい処理を記述するのです。

具体的に言うと、「MyCoinがInvestmentCoinより等しいもしくは大きいのどちらでもない場合」ということになります（所謂、FALSEの時）。

if(条件式){
	TRUEの場合に実行したい処理
}else{
	FALSEの場合に実行したい処理
}

else以降はなくても構いません。

ifの中にif文を入れたりもできます。

さて、今回はFALSE時の処理として「コインが足りません」というアラートを表示させたいのです。

アラートを出す

アラートは色々な所で目にしているはずです。

例えば、会員登録フォームで未入力の箇所があるにも関わらず「送信」ボタンを押してしまった時、「未入力の項目があります！」と表示されるなど。

アラートの表示はとても簡単です。

alert('コインが足りません');

完成形

というわけで、今日の完成形はこちら。

HTML

home/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
<script type="text/javascript" src="js/main.js"></script>
<title>コイン集め</title>
</head>
<body>
<p>所持コイン枚数：<span id="mycoin"></span>コイン</p>
<p><input type="button" value="コインGET" onclick="CoinGet()"><br>
現在の増加数：<span id="pluscoin"></span></p>
<p><input type="button" value="投資" onclick="investment()"><br>
必要コイン：<span id="investment_coin"></span></p>
</body>
</html>

javascript

home/js/main.js

var MyCoin;
var PlusCoin;
var InvestmentCoin;

window.onload = function(){
	MyCoin = 0;
	PlusCoin = 1;
	InvestmentCoin = 10;
	document.getElementById('pluscoin').innerHTML = PlusCoin;
	document.getElementById('investment_coin').innerHTML = InvestmentCoin;
	document.getElementById('mycoin').innerHTML = MyCoin;
}

function CoinGet(){
	MyCoin += parseInt(PlusCoin);
	document.getElementById('mycoin').innerHTML = MyCoin;
}

function investment(){
	if(MyCoin >= InvestmentCoin){
		PlusCoin *= parseInt(2);
		MyCoin -= parseInt(InvestmentCoin);
		InvestmentCoin = parseInt(PlusCoin * 10);
		document.getElementById('pluscoin').innerHTML = PlusCoin;
		document.getElementById('mycoin').innerHTML = MyCoin;
		document.getElementById('investment_coin').innerHTML = InvestmentCoin;
	}else{
		alert('コインが足りません');
	}
}