【第4回】乱数を生成して株価を変更(コインを増やすwebゲーム制作)

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

前回と比較し、軽くリニューアルをしました(少し方向転換をして別物します)。

今日の成果物

サンプルページ

前回までは「投資」ボタンにより、「コインGET」押下時に増えるコインが倍増していくというものになっていましたが、それを廃止して株を買えるようにしました。

詳細は後ほど説明しますが、株価は「コインGET」を1回押す毎に1増える1減るかの変化が起こります。

HTML部分をリニューアル

解説は不要だと思うので省略しますが、ボタンjavascriptで使う変数の反映場所の変更を行っていますのでHTMLのbody部分を変更しています。

<body>
<p>所持コイン枚数:<span id="mycoin"></span></p>
<p><input type="button" value="コインGET" onclick="CoinGet()"></p>
<p><input type="button" value="株を買う" onclick="BuyStock()"><br>
現在の株価:<span id="stock_price"></span>コイン/株</p>
<p>所持数:<span id="stock_hold"></span>
</body>

javascript部分の変更

さて、本題(?)のjavascript部分についてです。
jsファイルの中身は、大きく分けて

  • 変数定義
  • ページを開いたとき
  • 「コインGET」を押したとき
  • 「株を買う」を押したとき

に分かれます。

それぞれのパートに分けて解説していきます。

変数定義

var MyCoin;
var StockPrice;
var StockHold;

このアプリで変数は3つになります。

変更内容として、現在の株価を「StockPrice」、持っている株数を「StockHold」と定義しました。

※もちろん名付けは自分の好きで構いません。

ページを開いたとき

window.onload = function(){
	MyCoin = 0;
	StockPrice = 10;
	StockHold = 0;
	document.getElementById('stock_price').innerHTML = StockPrice;
	document.getElementById('stock_hold').innerHTML = StockHold;
	document.getElementById('mycoin').innerHTML = MyCoin;
}

ここでも、特に新しい技は使っていません。

現在の株価の初期は10、株式所持数はもちろん0。

「コインGET」を押したとき

function CoinGet(){
	MyCoin += 1;
	document.getElementById('mycoin').innerHTML = MyCoin;
	
	var StockRandam = Math.floor( Math.random() * 100 );
	if(StockRandam < 50){
		StockPrice += 1;
	}else{
		StockPrice -= 1;
	}
	document.getElementById('stock_price').innerHTML = StockPrice;
}

はい、今日の本題です。

「コインGET」を押したときにしたいことは下記の2つ。

  1. 所持コインを1枚増加させる
  2. 現在の株価を変更(1増or1減)する

1は変更なしなので2について解説です。

株価をどういう風に変更させるかはゲーム製作者の好きでいいとは思いますが、ここでは下記の仕組みで株価の上下をさせます。

「コインGET」ボタンを押すごとに、コンピュータが0〜99の数字のいずれかを払い出します。
そして、その数字が50未満であれば(0〜49)であれば株価を1増やす。
逆に50未満でなければ(50〜99)株価を1減らす風にします。

さて、「0〜99」のランダムな数字(乱数)で出現させる方法の解説です。

この関数内で「StockRandam」という変数を登場させています。
そして、この変数の中身は「Math.floor( Math.random() * 100 )」によって決定されます。
「100」という部分以外は常に一定でいいでしょう。
「100」を指定しているので「0〜99」のどれかの数字が出現します。
これが「10」の指定であれば「0〜9」のどれかが出現することになります。

乱数は指定数から「1」少ない数が上限になるので注意!

どんなゲームにも多少の運要素は必要でしょう。
その場合は乱数生成を使うことになるはずです。

あとは前回やった「if文」を使ってあげればできるでしょう。

「株を買う」を押したとき

function BuyStock(){
	if(MyCoin >= StockPrice){
		MyCoin -= parseInt(StockPrice);
		StockHold += 1;
		document.getElementById('mycoin').innerHTML = MyCoin;
		document.getElementById('stock_hold').innerHTML = StockHold;
	}else{
		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()"></p>
<p><input type="button" value="株を買う" onclick="BuyStock()"><br>
現在の株価:<span id="stock_price"></span>コイン/株</p>
<p>所持数:<span id="stock_hold"></span>
</body>
</html>

javascript

home/js/main.js

var MyCoin;
var StockPrice;
var StockHold;

window.onload = function(){
	MyCoin = 0;
	StockPrice = 10;
	StockHold = 0;
	document.getElementById('stock_price').innerHTML = StockPrice;
	document.getElementById('stock_hold').innerHTML = StockHold;
	document.getElementById('mycoin').innerHTML = MyCoin;
}

function CoinGet(){
	MyCoin += 1;
	document.getElementById('mycoin').innerHTML = MyCoin;
	
	var StockRandam = Math.floor( Math.random() * 100 );
	if(StockRandam < 50){
		StockPrice += 1;
	}else{
		StockPrice -= 1;
	}
	document.getElementById('stock_price').innerHTML = StockPrice;
}

function BuyStock(){
	if(MyCoin >= StockPrice){
		MyCoin -= parseInt(StockPrice);
		StockHold += 1;
		document.getElementById('mycoin').innerHTML = MyCoin;
		document.getElementById('stock_hold').innerHTML = StockHold;
	}else{
		alert('コインが足りません');
	}
}

次回予告

株を売ってキャピタルゲインを得られるように改良していきたいと思います。

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

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

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

オススメする理由

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

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

TechAcademy [テックアカデミー]

コメント

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