这是一款非常好玩的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 css3 3D特效 360度旋转 3D效果 box2d 2D特效 碰撞特效