今回から何回かに渡って、コインを増やすwebゲームを作りながらプログラミングの勉強をしていきます。
コードも全て公開し、超初心者向けとなりますので、これからjsやphpを覚えたい方に少しは役立つコンテンツになるかと思います。
※ちなみに私はアマチュアプログラマーでjs超初心者です。
ちなみに、恐らくゲームとしては大して面白いものにはなりませんので期待はしないでください（笑）
「プログラミングって簡単で面白いんだよ！」っていうことをお伝えできたら何よりです！
今日の成果物
「コイン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;
私はめっちゃハマりました…。
ページを読み込んだ時の処理
ページを読み込んだ時に「所持コイン枚数：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変数の値を表示する
となります。
この部分は難しいので、ここでは解説はしません。
ボタンを押した時の処理
それでは最後です。
ボタンを押したら１コイン増える仕組みを作りましょう。
これも関数を作ります。
関数の作り方は先ほどの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();
}
次回予告
今は、ボタンを押す毎に１コインしか増えませんが、一定のコインを消費すれば、１クリック毎に貰えるコインを倍にできる機能を付けたいと思います。
所謂、投資っぽい感じです。
本気でプログラミングを習得したい方
遊びながらでもいいとは思いますが、右も左もわからない方はオンラインスクールをオススメします。
TechAcademyというサービスは、最短4週間で未経験からプロを育てるオンライン完結のスクールとなっています。
オススメする理由
- 自宅にいながらオンライン完結で勉強できる
- 受講生に1人ずつ現役のプロのパーソナルメンターがつく
- チャットで質問すればすぐに回答が返ってくる
- オリジナルサービスやオリジナルアプリなどの開発までサポート
教材以外のこともサポートしてくれるとはなんとっ！！
無料体験もできますので、要チェック♪
コメント