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

数字合わせパネル


id=”パネルの数字合わせゲームを作ってみたのでソースコードなど公開してみるJQuery編”>パネルの数字合わせゲームを作ってみたので、ソースコードなど公開してみる(JQuery編)

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

www.ktg6.com

JQueryのコード

$(document).ready(function() {
  var canvas = $("#gameCanvas");
  var context = canvas.get(0).getContext("2d");
  var canvasWidth = canvas.width();
  var canvasHeight = canvas.height();
  var playGame;
  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");
  function startGame() {
   uiScore.html("0");
   uiStats.show();
   playgame = false;
   animate();
  };
  function init() {
    uiStats.hide();
    uiTable.hide();
    uiTime.hide();
    uiBack.hide();
    uiStart.hide();
    uiClear.hide();
    example.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();
    });
    uiComplete.click(function(e) {
      uiBack.hide();
      uiStart.hide();
      uiTable.hide();
      uiTime.hide();
      uiClear.show();
    });
  };
  function animate() {
    context.clearRect(0,0 canvasWidth, canvasHeight);
    if (playGame) {
      setTimeout(animate, 33);
    };
   };
  init();
  });

解説

ゲームの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ブラウザで行うものですが、いづれはスマホ対応させて実機にアップしたいと考えています。

時間はかかりそうですが、コツコツ進めますよ〜。