jsのイベント発火や足し算など（簡単なゲームを作りながら学習）

今回から何回かに渡って、コインを増やすwebゲームを作りながらプログラミングの勉強をしていきます。

コードも全て公開し、超初心者向けとなりますので、これからjsやphpを覚えたい方に少しは役立つコンテンツになるかと思います。
※ちなみに私はアマチュアプログラマーでjs超初心者です。

ちなみに、恐らくゲームとしては大して面白いものにはなりませんので期待はしないでください（笑）

「プログラミングって簡単で面白いんだよ！」っていうことをお伝えできたら何よりです！

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

今日の成果物
HTMLのベースを作成
javascriptのプログラミング
1. グローバル変数
2. ページを読み込んだ時の処理
ボタンを押した時の処理
完成形
1. HTML
2. javascript
次回予告
本気でプログラミングを習得したい方
1. オススメする理由

今日の成果物

「コインGET」というボタンを１回押す毎に、「所持コイン枚数」が１コインずつ増えます。

サンプルページ

HTMLのベースを作成

現段階では必要最低限にしておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/main.js"></script>
<title>コイン集め</title>
</head>
<body>
<p>所持コイン枚数：<span id="mycoin"></span>コイン</p>
<input type="button" value="コインGET" onclick="CoinGet()">
</body>
</html>

jsはHTMLファイルに書きたくないので、ファイルを別に用意してそれを読み込みます（下記コード５段目）。
<span id=”mycoin”></span>にjsの変数出力にします。
ボタンクリックでCoinGet()関数を動作させます。

javascriptのプログラミング

index.htmlと同じ場所に「js」というフォルダを作り、その中に「main.js」というファイルを作成します。

それでは「main.js」にjavascriptのプログラミングをしていきます。

グローバル変数

コインを集めるゲームですので、今現在何枚のコインを持っているかという情報をどこかに保存しておく必要があります。

そして、そのコインの枚数は変動するので、変数として扱います。

今回は、MyCoinという変数名を所持コイン枚数として定義します。

では、jsファイルの１行目に変数を記載します。

var MyCoin;

ちなみに、これから出てくる関数内に「var MyCoin」と書いてしまうとその変数はローカル変数になってしまい、関数外では使用できない変数になってしまいますので注意が必要です。必ず上に書きます。

私はめっちゃハマりました…。

ページを読み込んだ時の処理

ページを読み込んだ時に「所持コイン枚数：0コイン」と表示させる必要があります。
何もしないと「所持コイン枚数：コイン」となってしまいます。

こんな時は「window.onload」を使います。

window.onload = function(){
	MyCoin = 0;
	CoinIndicate();
}

function CoinIndicate(){
	document.getElementById('mycoin').innerHTML = MyCoin;
}

仕組みとしては、

ページを開く
MyCoinという変数（先ほど定義済み）に「0」を代入
「CoinIndicate」という変数を起動
HTMLファイルの<span id=”mycoin”></span>という部分にMyCoin変数の値を表示する

となります。

document.getElementById(‘mycoin‘).innerHTML = MyCoin;

この部分は難しいので、ここでは解説はしません。

ボタンを押した時の処理

それでは最後です。
ボタンを押したら１コイン増える仕組みを作りましょう。

これも関数を作ります。
関数の作り方は先ほどのCoinIndicateと同じです。

先ほどのHTMLファイルにて、ボタンをこのように作ってあります。

「onclick」のイコールの先がクリックした時に呼び出したい関数名になります。

ここでは、クリックするとjsファイル内のCoinGetという変数が起動します。

イベント発火って呼んだりもします。

というわけで、jsに戻りプログラミングをしてきましょう。

function CoinGet(){
	var plus = 1;
	MyCoin += parseInt(plus);
	CoinIndicate();
}

var plusという変数に1を設定
MyCoin変数にplus変数の値を加算
CoinIndicateを起動（以降、省略）

となります。

javascriptは足し算とかがわかりにくいです。
phpであれば、

MyCoin = MyCoin + MyCoin;

としてしまえば動くのですが、jsはそう簡単にはいかないみたいです。

一番重要なポイントとしては、変数を数値として認識させる必要があります。

そのやり方は、

parseInt(変数名)

となります。

完成形

HTML

home/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/main.js"></script>
<title>コイン集め</title>
</head>
<body>
<p>所持コイン枚数：<span id="mycoin"></span>コイン</p>
<input type="button" value="コインGET" onclick="CoinGet()">
</body>
</html>

javascript

home/js/main.js

var MyCoin;

window.onload = function(){
	MyCoin = 0;
	CoinIndicate();
}

function CoinIndicate(){
	document.getElementById('mycoin').innerHTML = MyCoin;
}

function CoinGet(){
	var plus = 1;
	MyCoin += parseInt(plus);
	CoinIndicate();
}