【第3回】JSの条件分岐処理(IF文)(コインを増やすwebゲーム制作)

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

今日の成果物

サンプルページ

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

条件分岐処理を追加

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

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

2と3が今回の新たな機能です。

このような場合は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('コインが足りません');
	}
}

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

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

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

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

1つ目の「}」の後に「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('コインが足りません');
	}
}

次回予告

ゲーム性を向上させます。

ざっくりですみません…。

本気でプログラミングを習得、したい方

遊びながらでもいいとは思いますが、右も左もわからない方オンラインスクールをオススメします。

TechAcademyというサービスは、最短4週間で未経験からプロを育てるオンライン完結のスクールとなっています。

オススメする理由

  1. 自宅にいながらオンライン完結で勉強できる
  2. 受講生に1人ずつ現役のプロのパーソナルメンターがつく
  3. チャットで質問すればすぐに回答が返ってくる
  4. オリジナルサービスやオリジナルアプリなどの開発までサポート

教材以外のこともサポートしてくれるとはなんとっ!!
無料体験もできますので、要チェック

TechAcademy [テックアカデミー]

コメント

タイトルとURLをコピーしました