【17：イライラバー】マウスを図形上から離さずにゴールを目指すゲーム

f:id:seintoseiya:20150625185521p:plain
プロジェクトNo.17：イライラバー

JQueryのお勉強。
前回、JQueryのマウスイベントを利用して描画アプリを作成したが、
今回はその応用としてマウスがオブジェクト上から離れたらゲームオーバーになる、
いわゆるイライラ◯◯を作ってみました。

アルゴリズムの解説

初めにdiv要素でゲームコースを作ります。

HTML

<div class="barriers">
	<div id="start">Start</div>
	<div id="barrier1"></div>
	<div id="barrier2"></div>
	<div id="barrier3"></div>
	<div id="barrier4"></div>
	<div id="barrier5"></div>
	<div id="goal">Goal</div>
</div>

JavaScript（一部抜粋）

var isPlaying = false;
var goal = false;
$('#start').mouseover(function() {
    if(goal) return;
    isPlaying = true;
});
$('#goal').mouseover(function() {
    if(isPlaying){
        alert("Goal!");
        isPlaying = false;
        goal = true;
    }
});
$('.barriers').mouseleave(function() {
    if(isPlaying){
        alert("Out!");
        isPlaying = false;
    }
});

全ての要素に対して、マウスが離れた時（mouseleave）にゲームオーバーになる判定をしたいので、
barriersというclassで囲っています。
またstartにマウスオーバーした時（mouseover）にゲーム開始フラグを立てることで、
スタートしてない状態でコース上やgoalの上をマウスオーバーや離れたりした時の処理をしないように制御します。
ちゃんとstartから開始して、goalに辿り着けば、ゲーム開始フラグをリセットするというものになります。

cssメソッド

cssスタイルを変更することが可能です。
第１引数にプロパティ、第２引数に値を指定します。

JavaScript

$('.barriers > div').css('background-color', '#009dff');

htmlメソッド

JavaScriptのinnerHTMLの様に使えます。

JavaScript

$('#message').html("Goalを目指しましょう");

スマホからのアクセス処理

これまで意識せずにやってきましたが、
ブラウザのみ対応のサイトを作成した際の対応として、
スマホからのアクセスを判定する方法があったので紹介します。

JavaScript

if ((navigator.userAgent.indexOf('iPhone') > 0 &&
    navigator.userAgent.indexOf('iPad') == -1) ||
    navigator.userAgent.indexOf('iPod') > 0 ||
    navigator.userAgent.indexOf('Android') > 0) {
    $('#sumaho').html("※PCブラウザからご覧ください");
}