【第1回】jsのイベント発火や足し算など(コインを増やすwebゲーム制作)

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

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

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

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

今日の成果物


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

サンプルページ

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

javascriptのプログラミング

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

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

グローバル変数

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

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

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

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

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

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

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

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

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

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

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

仕組みとしては、

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

となります。

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

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

ボタンを押した時の処理

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

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

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

<input type=”button” value=”コインGET” onclick=”CoinGet()”>

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

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

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

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

function CoinGet(){
	var plus = 1;
	MyCoin += parseInt(plus);
	CoinIndicate();
}
  1. var plusという変数に1を設定
  2. MyCoin変数にplus変数の値を加算
  3. 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();
}

次回予告

今は、ボタンを押す毎に1コインしか増えませんが、一定のコインを消費すれば、1クリック毎に貰えるコインを倍にできる機能を付けたいと思います。

所謂、投資っぽい感じです。

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

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

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

オススメする理由

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

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

TechAcademy [テックアカデミー]

コメント

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