60行jq代码实现棍子英雄

html:

<div class="wrap">
<div class="gamePage">
<div class="persons">
<img src="img/chook.gif"/>
</div>
<div class="stick">

</div>
<ul class="platform_ul">
<li class="platform_li"></li>
<li class="platform_li"></li>
</ul>
</div>
</div>

css:

.wrap{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.gamePage{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.platform_ul{
width: 100%;
height: 10rem;
position: absolute;
left: 0;
bottom: 0;
}
.platform_ul li{
height: 100%;
position: absolute;
bottom: 0;
background: #000000;
transition: all 1s;
}
.stick{
width: .15rem;
height: 3rem;
position: absolute;
left: 5.85rem;
bottom: 10rem;
background: #8F8F8B;
transition: all .2s;
transform-origin: right bottom;
}
.persons{
width: 2rem;
height: 2.5rem;
position: absolute;
left: 3.9rem;
bottom: 10rem;
transition: all 1s;

}

jQuery:

$(function(){
var longTimer;//变长定时器
var stickHeight; //棍子的长度
//初始化第一个站台和第二个站台的位置
$(".platform_li").eq(0).css("width","4rem").css("left","2rem");
$(".platform_li").eq(1).css("width","3rem").css("left","15rem");

//长按事件
$(".gamePage").on("touchstart",function(){
longTimer = setInterval(function(){
stickHeight = $(".stick").height() + 10;
$(".stick").css("height",stickHeight);
},10)
})
//松开手事件
$(".gamePage").on("touchend",function(){
clearInterval(longTimer); //清除定时器
$(".stick").css("transform","rotate(90deg)").css("transition","all 1s"); //棍子旋转动画
var distanceLeft = removePX($(".persons"));//人物距离最左边的距离
var safeL = removePX($(".platform_ul li").eq(1)) - removePX($(".platform_ul li").eq(0)) - $(".platform_ul li").eq(0).width(); //安全区域左
var safeR = safeL + $(".platform_ul li").eq(1).width(); //安全区域右
var succeedPlace = removePX($(".platform_ul li").eq(1))+$(".platform_ul li").eq(1).width()-$(".persons").width()+2; //成功的位置
var failurePlace = parseInt(distanceLeft+stickHeight+($(".persons").width())/1.5); //失败位置
setTimeout(function(){
if(stickHeight>=safeL&&stickHeight<=safeR){
//成功动画
$(".persons").css("left",succeedPlace); 
setTimeout(function(){
createPlatform();//调用生成新站台
},1000)
}else{
//失败动画
$(".persons").css("left",failurePlace);
setTimeout(function(){
$(".stick").css("transform","rotate(180deg)").css("transition","all 1s");//棍子掉落
$(".persons").css("bottom",0);//人物掉落
console.log("游戏结束")
},800)
}
},1000)
})
//生成新站台
function createPlatform(){
var newPlaceStick = $(".platform_li").eq(1).width() + removePX($(".platform_li").eq(0))-$(".stick").width(); //算出棍子的新位置
var newPlacePersons = newPlaceStick - $(".persons").width(); //算出人物的新位置
$(".platform_li").eq(0).css("left",-removePX($(".platform_li").eq(1))-removePX($(".platform_li").eq(0))); //设置第一个站台的新位置
$(".stick").css("left",newPlaceStick).css("transform","").css("height","");  //设置棍子的新位置
$(".persons").css("left",newPlacePersons);  //设置人物的新位置
$(".platform_li").eq(1).css("left","2rem"); //设置第二个站台的新位置
setTimeout(function(){
$(".platform_li").eq(0).remove(); //删除掉第一个站台
$(".platform_li").eq(0).after("<li class='platform_li'></li>");
var randomWidth = Math.ceil(Math.random()*3) + 1; 
var randomLeft = Math.ceil(Math.random()*4) + 12;
$(".platform_li").eq(1).css("width",randomWidth+"rem").css("left",randomLeft+"rem");
$(".stick").css("transition","all .2s");
},1000)
}
//获取Dom元素的值并去掉px
function removePX(dom){
return parseInt(dom.css("left").substring(0,dom.css("left").length-2));
}
})

纯属个人逻辑，代码可能有点不规范，欢迎来吐槽！