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

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

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

one's wayプロジェクト JQuery

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スタイルを変更することが可能です。
第1引数にプロパティ、第2引数に値を指定します。

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ブラウザからご覧ください");
}

全ソースはこちら

github.com

関連アプリ・書籍

jQuery レッスンブック jQuery2.X/1.X対応

jQuery レッスンブック jQuery2.X/1.X対応

jQuery入門道場

jQuery入門道場