コイン集めゲーム、続きを作っていきましょう。
今日の成果物
「投資」ボタンを新しく作りました。
「投資」ボタンの下に書いてある「必要コイン」を消費すると、「コインGET」を１回押す毎にもらえるコインが増加します。
スマホで見やすくする
開発初期段階なので別にやらなくてもいいのですが、スマホで動作チェックをする時に下記画面のように小さすぎって操作しにくかったので、少しだけ最適化をします。
そのような時はviewportの設定を行います。
下記メタタグをHTMLファイルのhead内に記載してあげればOKです。
<meta id="viewport" name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
そうすると…
モバイルでもちょうど良いサイズになります。
CSSはそのうち書きますが、現段階ではviewportの設定のみとします。
私はいつもこのviewportを暗号のように完全コピペで使っています。
投資モードを搭載
（「投資モード」というのがいいネーミングかどうかは自分でも疑問に思いますが…。）
今までは、ボタンを１回押す毎に１コイン手に入っていました。
コインを押しまくって１００万コインとか手に入ったのに、増えるコインが１コインずつでは面白くありません。
世の中、お金を持っている人はさらにお金を増やすことができるので、お金持ちは増えるコインも多くすることができる仕様にしたいと思います。
ということで、ここでは「増えるコイン枚数（初期は１コイン）の１０倍のコインを支払えば、増えるコインが倍になる」という機能を搭載してみます。
HTML編集
現在の増加数を表示
文字列１行を追加します。
<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>
javascriptのプログラミング
全て前回のおさらいと応用をすれば問題なく書けるでしょう。
グローバル変数
グローバル変数が全部で３つになります。
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;
}
変数の初期値を設定し、HTMLへの反映をしています。
※「所持コイン枚数」を表示する関数はやめました。
投資ボタンを押下
さて、今日のメインです。
とは言っても、前回の足し算の応用で、「+」を「-」にしたり「*」にしてあげたりすればOKです。
function investment(){
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;
}
完成形
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(){
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;
}
次回予告
投資ボタンを設置したものの、コインが足らない状態でもボタンを押すことができてしまいます。
コインが足らない場合は投資ボタン押下を無効にしたいので、次回は条件分岐（if）をメインにやっていきます。
本気でプログラミングを習得したい方
遊びながらでもいいとは思いますが、右も左もわからない方はオンラインスクールをオススメします。
TechAcademyというサービスは、最短4週間で未経験からプロを育てるオンライン完結のスクールとなっています。
オススメする理由
- 自宅にいながらオンライン完結で勉強できる
- 受講生に1人ずつ現役のプロのパーソナルメンターがつく
- チャットで質問すればすぐに回答が返ってくる
- オリジナルサービスやオリジナルアプリなどの開発までサポート
教材以外のこともサポートしてくれるとはなんとっ！！
無料体験もできますので、要チェック♪
コメント