热门关键字:
jquery > jquery插件 > html5 > jquery+html5小游戏(智商超过130的人才能玩到第40关哦)

jquery+html5小游戏(智商超过130的人才能玩到第40关哦)

81338
所属分类:html5
发布时间:2015/5/8 22:50:53
下载量:2554
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=474

这是一款非常好玩的jquery+html5小游戏,据说智商超过130的人才能玩到第40关哦,虽然很简单,但确识很好玩和很有挑战性,对网友们学习html5小游戏也很有帮助,所以整理分享给大家,如果要玩的话就用移动设备打开才可以玩。。。


游戏源码如下:


var longStick;
var shortStick;
var screenWidth = document.documentElement.clientWidth;
var point = 0;
var speed = "5%";
function touchSatrtFunc(evt) {
	if(point>=2){
		$(".tips").hide();
	}
	evt.preventDefault();
	document.addEventListener('touchend', touchEndFunc, false);
	initStick();
	//longStick = setInterval(function(){
	//    $('.stick').css({width:'+='+speed});
	//},30);
	getLong();
	document.removeEventListener('touchstart', touchSatrtFunc, false);
}
function getLong() {
	if(point>5){
			//alert(point);
			speed="5%";	
		}
	longStick = setInterval(function() {
		
		var stickWidth = getWidthNumber($('.stick').css('width'));
		if(stickWidth<=screenWidth){
			$('.stick').css({width:'+='+speed});
		}else{
			clearInterval(longStick);
			getShort();
		}
	},30);
}
function getShort() {
	if(point>5){
		//alert(point);
		speed="10%";	
	}
	shortStick = setInterval(function() {
		
		var stickWidth = getWidthNumber($('.stick').css('width'));
		if(stickWidth>0){
			$('.stick').css({width:'-='+speed});
		}else{
			clearInterval(shortStick);
			getLong();
		}
	},30);
}
function getWidthNumber(ele){
	if (ele) {
		var WidthNumber = ele.substr(0,ele.length-2);
		WidthNumber = Number(WidthNumber);
		return WidthNumber;
	}
}
function touchEndFunc(evt) {
	clearBind();
	evt.preventDefault();
	clearInterval(longStick);
	clearInterval(shortStick);
	setTimeout(function(){
		$('.stick').css('transition','.6s');
		$('.stick').css('transform','rotate(0deg)');
		setTimeout('checkStickLong.check()',600);
	},200);
}
function touchMoveFunc(evt){
	evt.preventDefault();
}
function initStick() {
	$(".stick").css({'transition':'0','transform':'rotate(-90deg)','width':'0','left':'20%'});
}
		
function init(){
	$(".stick").css({'transform-origin':'0 0','transform':'rotate(-90deg)'});
	addBind();
	document.addEventListener('touchmove', touchMoveFunc, false);
	$(".again").click(function(){
		$(".gameOver").css('display','none');
		addBind();
		$(".point,.tips").css('display','block');
		point = 0;
		speed="5%";
		$(".point").html(point);
		$(".wall").eq(0).css({'left':'0','width':'20%'});
		$(".new").css({'left':'50%','width':'20%'});
		$(".stick").css('transition','0')
		$(".stick").css('width','0');
		$(".stickMan").css({'left':'15.5%','bottom':'66.5%'});
		$("body").css('background-position-x', '0');
		$(".stickMan img").attr({'src':'images/stick_stand.png'});
		$(".shouji").css({"left":"0%"});
	});
	$(".share").click(function(){
		$("#mask").css('display','block');
	});
	$("#mask").click(function(){
		$("#mask").css('display','none');
	});
	
}
function addBind() {
	document.addEventListener('touchstart', touchSatrtFunc, false);  
}
function clearBind() {
	document.removeEventListener('touchstart', touchSatrtFunc, false);
	document.removeEventListener('touchend', touchEndFunc, false);
}

function orientationChange() {
switch(window.orientation) {

  case 0: 
		addBind();
		$("body").css('transform','');
		break;

  case -90: 
		clearBind();
		alert("游戏要竖屏玩哟!!!");
		$("body").css('transform','rotate(90deg)');

		break;

  case 90:   
		clearBind();
		alert("游戏要竖屏玩哟!!!");
		$("body").css('transform','rotate(-90deg)');
		break;

  case 180:   
		addBind();
		$("body").css('transform','rotate(0deg)');
	  break;

}
}


$(document).ready(function(){
	init();
	 orientationChange();
	 window.onorientationchange = orientationChange;
	 shareToWeixin();
})
效果如下:


html5小游戏(智商超过130的人才能玩到第40关哦)





如果您觉得本作品对您的学习有所帮助:支付鼓励



关键字:html5 css3 3D特效 360度旋转 3D效果 box2d 2D特效 碰撞特效
  • jquery+html5小游戏(智商超过130的人才能玩到第40关哦)如果你喜欢学院的资源就下载吧,亲,谢谢!
  • jquery+html5小游戏(智商超过130的人才能玩到第40关哦)
  • jquery+html5小游戏(智商超过130的人才能玩到第40关哦)
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐temdy@qq.com,一旦发现造成侵权行为,后果自负。。

友荐云推荐