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

这是一款非常好玩的

游戏源码如下：

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 css3 3D特效 360度旋转 3D效果 box2d 2D特效 碰撞特效