パネルの数字合わせゲームを作ってみた(JQuery編)

こんにちは、ktgです!

前回の記事に引き続いて、JQueryのソースコードを公開します。

HTML , JavaScriptに関して解説のある記事はこちら ↓

https://ktg6.com/entry/2017/01/25/204042

JQueryのコード

それでは個別に解説していきますね!

ゲームのUI

　　var ui = $("#gameUI");
　　var uiIntro = $("gameIntro");
　　var uiStats = $("gamestats");
　　var uiComplete = $("#gameComplete");
　　var uiPlay = $("#gamePlay");
　　var uiReset = $(".gameReset");
　　var uiScore = $(".gameScore");
　　var uiTable = $("#table");
　　var uiTime = $("#showtime");
　　var uiBack = $("#gameBack");
　　var uiStart = $("#start");
　　var uiClear = $("#clearmain");
　　var example = $("#example");

ゲームのUIです。

この部分がhtmlと紐づいて、ボタンや画像を表示したり、非表示にしたりする事ができるようになります。

ゲームの初期化

function init() {
uiStats.hide();
uiTable.hide();
uiTime.hide();
uiBack.hide();
uiStart.hide();
uiClear.hide();
example.hide();

関数+hide で、非表示にしています。

プレイボタンのクリックイベント

uiPlay.click(function(e) {
e.preventDefault();
uiIntro.hide();
example.show();
uiBack.show();
uiStart.show();
});

プレイボタンをクリックした時に起こす変化です。

イントロを非表示にし、参考例の画面を表示させています。

スタートボタンのクリックイベント

uiStart.click(function(e) {
example.hide();
uiTable.show();
uiTime.show();
});

スタートボタンを押した時の変化です。

バックボタンのクリックイベント

uiBack.click(function(e) {
location.reload();
});

バックボタンを押した時、「location.reload();」で最初に戻るようにしています。

ゲームクリア時の処理

uiComplete.click(function(e) {
uiBack.hide();
uiStart.hide();
uiTable.hide();
uiTime.hide();
uiClear.show();
});

クリアした時に現れる画面です。

以上のように、JQueryを用いて制御してみました。

調べながらの活用だったので、正直理解はいまひとつですが、勘所というか使い方の感覚はなんとなく磨かれた気がしますw

このゲームはWebブラウザで行うものですが、いづれはスマホ対応させて実機にアップしてみたいと考えています。

またサンプルゲーム作る機会あったら、名刺がわりに頑張って作ります!