読者です 読者をやめる 読者になる 読者になる

転がる先の杖

サラリーマンの傍、自力で食っていけるよう奮闘し、己を磨く日々を綴ります。 スノボの大会出場を目指し、オフトレに精を出してます!

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

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