クリックゲーム＜サンプル版＞

hikarutsukas..

2012-01-21 19:24:19

License: MIT License

Fork: 0

Fav: 1

View: 901

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 315 lines
HTML 25 lines
CSS 144 lines

超速!早触れゲーム(仮称)
スマートフォン用に適当に作成したクリックアクションゲームのサンプル。
とにかく素早い指の動作が要求されるシンプルゲーム。
iphone4で動作検証済。

クリックゲーム＜サンプル版＞
jQuery v1.7.1

/*============================================================
変数
============================================================*/
$.pointDef = 0;
$.point;
$.gameObjShow = 800;
$.gameTimeDef = 20;	//秒
$.gameTime;
$.circleSize = 56;
$.timerBarH = 10;
$.tempTimeCount;

/*============================================================
ページ読込完了
============================================================*/
$(function(){
	$.initBtn();
});

/*============================================================
ボタン処理
============================================================*/
$.initBtn = function() {
	//ゲームスタートボタン処理
	$(".startButton").click(function(){
		$.initGameStart();
	});
}

/*============================================================
ゲーム開始
============================================================*/
$.initGameStart = function() {
	//パラメータ初期化
	$.point = $.pointDef;
	$.gameTime = $.gameTimeDef;
	//画面表示切り替え
	$("header").css("display","none");
	$("#startPanel").css("display","none");
	$("#mainPanel").css("display","block");
	$("#endPanel").css("display","none");
	//タイムバー初期表示
	$(".timerBg .timerBar").width(0);
	//タイマー処理（ゲーム全体）
	$.initTimer();
	//ゲームオブジェクト処理
	$.initGameSetObj();
}

/*============================================================
タイマー処理（ゲーム全体）
============================================================*/
$.initTimer = function() {
	//初期値
	var i = 0;
	var l = 250;
	var max = $.gameTime * 1000;
	//タイムバー表示用タイマー処理
	$(document).everyTime(l, 'barTimerObj', function(){
		i++;
		var timeBarW = i * l / max * $(window).width();
		$(".timerBg .timerBar").width(timeBarW);
		$("#mainPanel .gameArea").height($(window).height() - $.timerBarH);
	});
	//ゲーム時間用タイマー処理
	$(document).oneTime(max, 'endTimerObj', function(){
		//ゲーム終了処理
		$.initEndGame();
	});
}

/*============================================================
ゲームオブジェクト処理
============================================================*/
$.initGameSetObj = function() {
	//オブジェクトセット
	$("#mainPanel .gameArea").append('<div class="circleDot"><p class="getPoint"><p></div>');
	//ランダムなXY座標を設定
	var randX = Math.floor(Math.random() * ($(window).width() - $.circleSize));
	var randY = Math.floor(Math.random() * ($(window).height() - $.circleSize - $.timerBarH) + $.timerBarH);
	//秒の取得
	$.tempTimeCount = +new Date();
	//オブジェクトの表示とクリック処理
	$(".circleDot")
		.css({
			left: randX,
			top: randY
		})
		.click(function(){
			$.initGameObjClick();
		});
	//オブジェクト表示用のタイマー処理
	$(document).oneTime($.gameObjShow, 'objShowTimer', function(){
		$.initGameObjTimeOver();
	});
}
$.initGameObjClick = function() {
	//タイマー削除
	$(document).stopTime('objShowTimer');
	//得点
	var getPoint = $.gameObjShow - (+ new Date() - $.tempTimeCount);
	$.point += getPoint;
	$("#mainPanel .gameArea .pointTxt").html($.point);
	$(".circleDot .getPoint").html(getPoint);
	//表示処理
	$(".circleDot")
		.css("background", "#00c")
		.animate( {
			opacity: '0'
		},{
			'duration': 200,
			'complete': function(){
				$(this).remove();
				$.initGameSetObj();
			}
		});
}
$.initGameObjTimeOver = function() {
	//タイマー削除
	$(document).stopTime('objShowTimer');
	//クリックイベント削除
	$(".circleDot").unbind('click');
	//得点
	$("#mainPanel .gameArea .pointTxt").html($.point);
	//表示処理
	$(".circleDot")
		.css("background", "#c00")
		.animate( {
			opacity: '0'
		},{
			'duration': 200,
			'complete': function(){
				$(this).remove();
				$.initGameSetObj();
			}
		});
}

/*============================================================
ゲーム終了
============================================================*/
$.initEndGame = function() {
	//画面表示切り替え
	$("header").css("display","block");
	$("#mainPanel").css("display","none");
	$("#endPanel").css("display","block");
	$("#endPanel .resultPoint span").html($.point);
	var commntObj = $("#endPanel .commentTxt");
	var divP = 180;
	if ($.point < 0) {
		commntObj.html("全然話になりません。真面目にゲームをして下さい。それとも、もしかしてデバッグ中でしょうか？");
	} else if ($.point >= 0 && $.point < 10*divP) {
		commntObj.html("まぁ…、普通の下、といった感じでしょうか。もうちょっと頑張れると思いますよ。");
	} else if ($.point >= 10*divP && $.point < 20*divP) {
		commntObj.html("まずますですね。でもこの結果に満足してはいけません。常に上を目指して精進が必要です。");
	} else if ($.point >= 20*divP && $.point < 25*divP) {
		commntObj.html("神の領域に一歩近づきましたね。限界を超えて疲れた手をマッサージして上げましょう。");
	} else if ($.point >= 25*divP) {
		commntObj.html("おお・・・、神よ・・・っ！");
	}
}

/*============================================================
jquery.timers.js
============================================================*/
jQuery.fn.extend({
	everyTime: function(interval, label, fn, times, belay) {
		return this.each(function() {
			jQuery.timer.add(this, interval, label, fn, times, belay);
		});
	},
	oneTime: function(interval, label, fn) {
		return this.each(function() {
			jQuery.timer.add(this, interval, label, fn, 1);
		});
	},
	stopTime: function(label, fn) {
		return this.each(function() {
			jQuery.timer.remove(this, label, fn);
		});
	}
});

jQuery.extend({
	timer: {
		guid: 1,
		global: {},
		regex: /^([0-9]+)\s*(.*s)?$/,
		powers: {
			// Yeah this is major overkill...
			'ms': 1,
			'cs': 10,
			'ds': 100,
			's': 1000,
			'das': 10000,
			'hs': 100000,
			'ks': 1000000
		},
		timeParse: function(value) {
			if (value == undefined || value == null)
				return null;
			var result = this.regex.exec(jQuery.trim(value.toString()));
			if (result[2]) {
				var num = parseInt(result[1], 10);
				var mult = this.powers[result[2]] || 1;
				return num * mult;
			} else {
				return value;
			}
		},
		add: function(element, interval, label, fn, times, belay) {
			var counter = 0;
			
			if (jQuery.isFunction(label)) {
				if (!times) 
					times = fn;
				fn = label;
				label = interval;
			}
			
			interval = jQuery.timer.timeParse(interval);

if (typeof interval != 'number' || isNaN(interval) || interval <= 0)
				return;

if (times && times.constructor != Number) {
				belay = !!times;
				times = 0;
			}
			
			times = times || 0;
			belay = belay || false;
			
			if (!element.$timers) 
				element.$timers = {};
			
			if (!element.$timers[label])
				element.$timers[label] = {};
			
			fn.$timerID = fn.$timerID || this.guid++;
			
			var handler = function() {
				if (belay && this.inProgress) 
					return;
				this.inProgress = true;
				if ((++counter > times && times !== 0) || fn.call(element, counter) === false)
					jQuery.timer.remove(element, label, fn);
				this.inProgress = false;
			};
			
			handler.$timerID = fn.$timerID;
			
			if (!element.$timers[label][fn.$timerID]) 
				element.$timers[label][fn.$timerID] = window.setInterval(handler,interval);
			
			if ( !this.global[label] )
				this.global[label] = [];
			this.global[label].push( element );
			
		},
		remove: function(element, label, fn) {
			var timers = element.$timers, ret;
			
			if ( timers ) {
				
				if (!label) {
					for ( label in timers )
						this.remove(element, label, fn);
				} else if ( timers[label] ) {
					if ( fn ) {
						if ( fn.$timerID ) {
							window.clearInterval(timers[label][fn.$timerID]);
							delete timers[label][fn.$timerID];
						}
					} else {
						for ( var fn in timers[label] ) {
							window.clearInterval(timers[label][fn]);
							delete timers[label][fn];
						}
					}
					
					for ( ret in timers[label] ) break;
					if ( !ret ) {
						ret = null;
						delete timers[label];
					}
				}
				
				for ( ret in timers ) break;
				if ( !ret ) 
					element.$timers = null;
			}
		}
	}
});

if (jQuery.browser.msie)
	jQuery(window).one("unload", function() {
		var global = jQuery.timer.global;
		for ( var label in global ) {
			var els = global[label], i = els.length;
			while ( --i )
				jQuery.timer.remove(els[i], label);
		}
	});

クリックゲーム＜サンプル版＞
html5doctor.com Reset Stylesheet

/*============================================================
初期表示
============================================================*/
#mainPanel,
#endPanel{
	display: none;
}

/*============================================================
body
============================================================*/
body {
	line-height: 1.231;
	font-family:"Hiragino Kaku Gothic Pro";
}

/*============================================================
header
============================================================*/
header {
	text-align: center;
	padding:5px;
	background-color: #9daaa4;
	color: #FFF;
}

/*============================================================
#startPanel
============================================================*/
#startPanel{
	text-align: center;
	margin: 0 auto;
}
#startPanel .startTxt01 {
	margin: 20px 20px;
	text-align: left;
	line-height: 1.5;
	font-size: 85%;
}
.startButton {
	margin: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #ffffff;
	padding: 9px 50px;
	background: -moz-linear-gradient(
		top,
		#26236b 0%,
		#03041a);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#26236b),
		to(#03041a));
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border: 1px solid #011140;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.4),
		0px 1px 0px rgba(255,255,255,0.3);
}

/*============================================================
#mainPanel
============================================================*/
.timerBg {
	height:10px;
	background: #999;
}
.timerBg .timerBar {
	height:10px;
	background: #FF6;
}
#mainPanel {
	position: relative;
}
#mainPanel .gameArea {

}
#mainPanel .gameArea p{
	text-align: right;
	padding:5px 10px;
	font-size: 80%;
	color: #666;
}
#mainPanel .gameArea .circleDot {
	width: 56px;
	height: 56px;
	background: #666;
	-moz-border-radius: 28px;
	-webkit-border-radius: 28px;
	border-radius: 28px;
	position: absolute;
}
#mainPanel .gameArea .circleDot .getPoint{
	text-align: center;
	padding:22px 0 0;
	font-size:80%;
	color: #fff;
}

/*============================================================
#endPanel
============================================================*/
#endPanel {
	text-align: center;
}
#endPanel .endTxt01 {
	font-size: 130%;
	margin: 20px 0;
}
#endPanel .endTxt02 {
	color: #555;
	margin: 10px 0;
}
#endPanel .resultPoint {
	color: #c00;
	margin: 30px 20px;
	padding:10px 20px;
	border: 2px solid #eee;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	background: -moz-linear-gradient(top, #eee, #fff);　/* Firefox用 */  
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff));
}
#endPanel .resultPoint span{
	font-size: 200%;
	font-weight: bold;
}
#endPanel .commentTxt {
	margin: 20px 20px 0;
	text-align: left;
	line-height: 1.6;
}

超速!早触れゲーム(仮称) スマートフォン用に適当に作成したクリックアクションゲームのサンプル。とにかく素早い指の動作が要求されるシンプルゲーム。 iphone4で動作検証済。/*============================================================ 変数 ============================================================*/ $.pointDef = 0; $.point; $.gameObjShow = 800; $.gameTimeDef = 20; //秒 $.gameTime; $.circleSize = 56; $.timerBarH = 10; $.tempTimeCount; /*============================================================ ページ読込完了 ============================================================*/ $(function(){ $.initBtn(); }); /*============================================================ ボタン処理 ============================================================*/ $.initBtn = function() { //ゲームスタートボタン処理 $(".startButton").click(function(){ $.initGameStart(); }); } /*============================================================ ゲーム開始 ============================================================*/ $.initGameStart = function() { //パラメータ初期化 $.point = $.pointDef; $.gameTime = $.gameTimeDef; //画面表示切り替え $("header").css("display","none"); $("#startPanel").css("display","none"); $("#mainPanel").css("display","block"); $("#endPanel").css("display","none"); //タイムバー初期表示 $(".timerBg .timerBar").width(0); //タイマー処理（ゲーム全体） $.initTimer(); //ゲームオブジェクト処理 $.initGameSetObj(); } /*============================================================ タイマー処理（ゲーム全体） ============================================================*/ $.initTimer = function() { //初期値 var i = 0; var l = 250; var max = $.gameTime * 1000; //タイムバー表示用タイマー処理 $(document).everyTime(l, 'barTimerObj', function(){ i++; var timeBarW = i * l / max * $(window).width(); $(".timerBg .timerBar").width(timeBarW); $("#mainPanel .gameArea").height($(window).height() - $.timerBarH); }); //ゲーム時間用タイマー処理 $(document).oneTime(max, 'endTimerObj', function(){ //ゲーム終了処理 $.initEndGame(); }); } /*============================================================ ゲームオブジェクト処理 ============================================================*/ $.initGameSetObj = function() { //オブジェクトセット $("#mainPanel .gameArea").append('<div class="circleDot"><p class="getPoint"><p></div>'); //ランダムなXY座標を設定 var randX = Math.floor(Math.random() * ($(window).width() - $.circleSize)); var randY = Math.floor(Math.random() * ($(window).height() - $.circleSize - $.timerBarH) + $.timerBarH); //秒の取得 $.tempTimeCount = +new Date(); //オブジェクトの表示とクリック処理 $(".circleDot") .css({ left: randX, top: randY }) .click(function(){ $.initGameObjClick(); }); //オブジェクト表示用のタイマー処理 $(document).oneTime($.gameObjShow, 'objShowTimer', function(){ $.initGameObjTimeOver(); }); } $.initGameObjClick = function() { //タイマー削除 $(document).stopTime('objShowTimer'); //得点 var getPoint = $.gameObjShow - (+ new Date() - $.tempTimeCount); $.point += getPoint; $("#mainPanel .gameArea .pointTxt").html($.point); $(".circleDot .getPoint").html(getPoint); //表示処理 $(".circleDot") .css("background", "#00c") .animate( { opacity: '0' },{ 'duration': 200, 'complete': function(){ $(this).remove(); $.initGameSetObj(); } }); } $.initGameObjTimeOver = function() { //タイマー削除 $(document).stopTime('objShowTimer'); //クリックイベント削除 $(".circleDot").unbind('click'); //得点 $("#mainPanel .gameArea .pointTxt").html($.point); //表示処理 $(".circleDot") .css("background", "#c00") .animate( { opacity: '0' },{ 'duration': 200, 'complete': function(){ $(this).remove(); $.initGameSetObj(); } }); } /*============================================================ ゲーム終了 ============================================================*/ $.initEndGame = function() { //画面表示切り替え $("header").css("display","block"); $("#mainPanel").css("display","none"); $("#endPanel").css("display","block"); $("#endPanel .resultPoint span").html($.point); var commntObj = $("#endPanel .commentTxt"); var divP = 180; if ($.point < 0) { commntObj.html("全然話になりません。真面目にゲームをして下さい。それとも、もしかしてデバッグ中でしょうか？"); } else if ($.point >= 0 && $.point < 10*divP) { commntObj.html("まぁ…、普通の下、といった感じでしょうか。もうちょっと頑張れると思いますよ。"); } else if ($.point >= 10*divP && $.point < 20*divP) { commntObj.html("まずますですね。でもこの結果に満足してはいけません。常に上を目指して精進が必要です。"); } else if ($.point >= 20*divP && $.point < 25*divP) { commntObj.html("神の領域に一歩近づきましたね。限界を超えて疲れた手をマッサージして上げましょう。"); } else if ($.point >= 25*divP) { commntObj.html("おお・・・、神よ・・・っ！"); } } /*============================================================ jquery.timers.js ============================================================*/ jQuery.fn.extend({ everyTime: function(interval, label, fn, times, belay) { return this.each(function() { jQuery.timer.add(this, interval, label, fn, times, belay); }); }, oneTime: function(interval, label, fn) { return this.each(function() { jQuery.timer.add(this, interval, label, fn, 1); }); }, stopTime: function(label, fn) { return this.each(function() { jQuery.timer.remove(this, label, fn); }); } }); jQuery.extend({ timer: { guid: 1, global: {}, regex: /^([0-9]+)\s*(.*s)?$/, powers: { // Yeah this is major overkill... 'ms': 1, 'cs': 10, 'ds': 100, 's': 1000, 'das': 10000, 'hs': 100000, 'ks': 1000000 }, timeParse: function(value) { if (value == undefined || value == null) return null; var result = this.regex.exec(jQuery.trim(value.toString())); if (result[2]) { var num = parseInt(result[1], 10); var mult = this.powers[result[2]] || 1; return num * mult; } else { return value; } }, add: function(element, interval, label, fn, times, belay) { var counter = 0; if (jQuery.isFunction(label)) { if (!times) times = fn; fn = label; label = interval; } interval = jQuery.timer.timeParse(interval); if (typeof interval != 'number' || isNaN(interval) || interval <= 0) return; if (times && times.constructor != Number) { belay = !!times; times = 0; } times = times || 0; belay = belay || false; if (!element.$timers) element.$timers = {}; if (!element.$timers[label]) element.$timers[label] = {}; fn.$timerID = fn.$timerID || this.guid++; var handler = function() { if (belay && this.inProgress) return; this.inProgress = true; if ((++counter > times && times !== 0) || fn.call(element, counter) === false) jQuery.timer.remove(element, label, fn); this.inProgress = false; }; handler.$timerID = fn.$timerID; if (!element.$timers[label][fn.$timerID]) element.$timers[label][fn.$timerID] = window.setInterval(handler,interval); if ( !this.global[label] ) this.global[label] = []; this.global[label].push( element ); }, remove: function(element, label, fn) { var timers = element.$timers, ret; if ( timers ) { if (!label) { for ( label in timers ) this.remove(element, label, fn); } else if ( timers[label] ) { if ( fn ) { if ( fn.$timerID ) { window.clearInterval(timers[label][fn.$timerID]); delete timers[label][fn.$timerID]; } } else { for ( var fn in timers[label] ) { window.clearInterval(timers[label][fn]); delete timers[label][fn]; } } for ( ret in timers[label] ) break; if ( !ret ) { ret = null; delete timers[label]; } } for ( ret in timers ) break; if ( !ret ) element.$timers = null; } } } }); if (jQuery.browser.msie) jQuery(window).one("unload", function() { var global = jQuery.timer.global; for ( var label in global ) { var els = global[label], i = els.length; while ( --i ) jQuery.timer.remove(els[i], label); } }); <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1, initial-scale=1, maximum-scale=1"> <header> <h1>超速!早触れゲーム</h1> </header> <div id="startPanel"> <p class="startTxt01">画面上に円がランダムに出現します。瞬時に円にタッチしましょう。制限時間内に素早く数多くの円にタッチできると高得点となります。</p> <p class="startTxt01">円にタッチできれば青く光り得点が加算されますが、一定時間経つと赤色になって消滅します。この場合は得点が減点されてしまうので要注意。</p> <p><button class="startButton" type="button">GAME START</a></p> </div> <div id="mainPanel"> <section class="timerBg"><div class="timerBar"></div></section> <section class="gameArea"> <p class="pointTxt">0</p> </section> </div> <div id="endPanel"> <p class="endTxt01">ゲーム終了</p> <p class="endTxt02">あなたの得点は…</p> <p class="resultPoint"><span></span>点</p> <p class="commentTxt"></p> </div>/*============================================================ 初期表示 ============================================================*/ #mainPanel, #endPanel{ display: none; } /*============================================================ body ============================================================*/ body { line-height: 1.231; font-family:"Hiragino Kaku Gothic Pro"; } /*============================================================ header ============================================================*/ header { text-align: center; padding:5px; background-color: #9daaa4; color: #FFF; } /*============================================================ #startPanel ============================================================*/ #startPanel{ text-align: center; margin: 0 auto; } #startPanel .startTxt01 { margin: 20px 20px; text-align: left; line-height: 1.5; font-size: 85%; } .startButton { margin: 20px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #ffffff; padding: 9px 50px; background: -moz-linear-gradient( top, #26236b 0%, #03041a); background: -webkit-gradient( linear, left top, left bottom, from(#26236b), to(#03041a)); border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border: 1px solid #011140; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); text-shadow: 0px -1px 0px rgba(000,000,000,0.4), 0px 1px 0px rgba(255,255,255,0.3); } /*============================================================ #mainPanel ============================================================*/ .timerBg { height:10px; background: #999; } .timerBg .timerBar { height:10px; background: #FF6; } #mainPanel { position: relative; } #mainPanel .gameArea { } #mainPanel .gameArea p{ text-align: right; padding:5px 10px; font-size: 80%; color: #666; } #mainPanel .gameArea .circleDot { width: 56px; height: 56px; background: #666; -moz-border-radius: 28px; -webkit-border-radius: 28px; border-radius: 28px; position: absolute; } #mainPanel .gameArea .circleDot .getPoint{ text-align: center; padding:22px 0 0; font-size:80%; color: #fff; } /*============================================================ #endPanel ============================================================*/ #endPanel { text-align: center; } #endPanel .endTxt01 { font-size: 130%; margin: 20px 0; } #endPanel .endTxt02 { color: #555; margin: 10px 0; } #endPanel .resultPoint { color: #c00; margin: 30px 20px; padding:10px 20px; border: 2px solid #eee; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; background: -moz-linear-gradient(top, #eee, #fff);　/* Firefox用 */ background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff)); } #endPanel .resultPoint span{ font-size: 200%; font-weight: bold; } #endPanel .commentTxt { margin: 20px 20px 0; text-align: left; line-height: 1.6; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/xHoV/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/hikarutsukasa/xHoV" title="クリックゲーム＜サンプル版＞">クリックゲーム＜サンプル版＞ - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code