【第2回】viewport設定、javascriptにて様々な算術(コインを増やすwebゲーム制作)

コイン集めゲーム、続きを作っていきましょう。

今日の成果物


「投資」ボタンを新しく作りました。
「投資」ボタンの下に書いてある「必要コイン」を消費すると、「コインGET」を1回押す毎にもらえるコインが増加します。

サンプルページ

スマホで見やすくする

開発初期段階なので別にやらなくてもいいのですが、スマホで動作チェックをする時に下記画面のように小さすぎって操作しにくかったので、少しだけ最適化をします。

そのような時は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を暗号のように完全コピペで使っています。

投資モードを搭載

(「投資モード」というのがいいネーミングかどうかは自分でも疑問に思いますが…。)

今までは、ボタンを1回押す毎に1コイン手に入っていました。

コインを押しまくって100万コインとか手に入ったのに、増えるコインが1コインずつでは面白くありません。

世の中、お金を持っている人はさらにお金を増やすことができるので、お金持ちは増えるコインも多くすることができる仕様にしたいと思います。

ということで、ここでは「増えるコイン枚数(初期は1コイン)の10倍のコインを支払えば、増えるコインが倍になる」という機能を搭載してみます。

最終的に「転職」みたいにするのか「株購入」みたいにするのか等、ゲームのストーリーは作りながら考えていきたいと思います。

HTML編集

現在の増加数を表示

文字列1行を追加します。

<p><input type="button" value="コインGET" onclick="CoinGet()"><br>
現在の増加数:<span id="pluscoin"></span></p>

投資ボタンを追加

ボタン1つ文字列1行を追加します。

<p><input type="button" value="投資" onclick="investment()"><br>
必要コイン:<span id="investment_coin"></span></p>

javascriptのプログラミング

全て前回のおさらい応用をすれば問題なく書けるでしょう。

グローバル変数

グローバル変数が全部で3つになります。

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

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

TechAcademy [テックアカデミー]

コメント

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