英雄难过棍子关（课本案例）-蒲公英云

一.主界面静态页面

1.1用HTML标签排版

<div class="set-text">
      <h2 class="play-title">关卡1</h2>
      <a href="index.html">主菜单</a>
</div>
<div class="container">
      <div   class="stick"></div>
      <div class="man"><img src="img/stick_stand.png"/></div>
      <div class="well-box"></div>
</div>

1.2使用css样式设置背景样式，关卡等样式

*{padding:0;margin:0;}
.btn-box{width:500px;margin:50px auto;float: left;}
button{
    margin-right:50px;
    font-size:16px;
    width:80px;
    height:80px;
    text-align:center;
    line-height:80px;
    color:#fff;
    font-weight:bold;
    border-radius:50%;
}
.btnClick{
    display:block;
    width:100px;
    height:105px;
    background:url(../images/btn-bg.png) no-repeat;
    margin-left:60%;
    margin-top:68px;
    cursor: pointer;
}
.btnClick2{
    display:block;
    width:100px;
    height:105px;
    background:url(../images/btn-bg2.png) no-repeat;
    margin-left:60%;
    margin-top:68px;
    cursor: pointer;
}
.bg1{background:url(../images/1.jpg) no-repeat;}
.btn-main{margin-top:20px;}
.container{
    position:fixed;
    bottom:0;
    left:0;
    height:35%;
    width:100%;
}
.stick{
    position:absolute;
    left:40px;
    bottom:100%;
    height:5px;
    width:0;
    background:#096;
    transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);  /*IE9*/
    -moz-transform:rotate(-90deg);  /*Firefox*/
    -webkit-transform:rotate(-90deg);  /*Ssfari  and Chrome*/
    -o-transform:rotate(-90deg);  /*Opera*/
    transform-origin:0 100%;
    -ms-transform-origin:0 100%;
    -moz-transform-origin:0 100%;
    -webkit-transform-origin:0 100%;
    -o-transform-origin:0 100%;
    transition:transform 0.35s linear;
    -moz-transition:transform 0.35s linear;
    -webkit-transition:transform 0.35s linear;
    -o-transition:transform 0.35s linear;
}
.stickDown{
    transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
}
.man{
    position:absolute;
    left:0px;
    bottom:98%;
    width:65px;
    height:97px;
}
.man img{
    position:absolute;
    left:0;
    top:0;
}
.well-box{
    position:absolute;
    height:100%;
    left: 0px;
}
.well{
    position:absolute;
    height:100%;
    background:#000;
    width: 40px;
}
.well-box div:first-of-type{left:0px;}
/*.well-box div:last-of-type{left: 400px;}*/

二.黑色柱子的动态实现
动态创建黑色柱子，每次创建四个，柱子之间的距离随机获取，柱子的宽度固定
2.1定义全局变量：表示关卡，柱子宽度的等等参数

var stop=true;   //按钮是否可以点击
var number=0;    //用于计算 移动到第几个柱子
var leval=1;   //设置关卡
var weWidth=100;     //设置柱子宽度

2.2 使用for循环动态创建4个柱子，柱子宽度，高度一致，两个柱子之间的距离使用random（）随机获取

for(var i=0;i<4;i++){
     var w=parseInt(Math.random()*end)+min; //获取随机值
     if(i==0){
          param+=('<div class="well" style="left:0px;width:'+wh+'px"></div>');//第一个柱子对象
     }else if(i==1){
          second=wh+w;
           param+=('<div class="well" style="left:'+second+'px;width:'+wh+'px"></div>');//第二个柱子对象
     }else if(i==2){
          third=second+wh+w;
          param+=('<div class="well" style="left:'+third+'px;width:'+wh+'px"></div>');//第三个柱子对象
     }else{
          forth=third+wh+w;
          param+=('<div class="well" style="left:'+forth+'px;width:'+wh+'px"></div>');//第四个柱子对象
     }
}

三.制作棍子动画
按下鼠标棍子变长，松开鼠标棍子停止增长，并且棍子垂直倒下

3.1 按下按钮，使用控制元素滑动或自定义动画的效果使棍子变长

//鼠标按下棍子变长
    $(".btnClick").mousedown(function(){
        $(".stick").animate({"width":"500px"},2500);//棍子变长
    });

3.2松开鼠标，棍子停止变长，并用CSS的效果使棍子倒下，倒下后英雄开始奔跑过关

$(".btnClick").mouseup(function(){
      if(stop){
            $(".stick").stop();//停止棍子正在变长的动画，棍子停止变长
            stop = false;
            $(".stick").addClass("stickDown");//棍子倒下
            moveMan();
      }
    });

四. 制作英雄过关
技术分析

计算棍子长度，英雄沿着棍子开始奔跑，使用attr()设置图像，使用animate（）设置英雄奔跑效果
如果棍子长度小于两个柱子之间的距离或者大于两个柱子之间的距离与柱子宽度之和，过关失败，否则过关成功。
过关失败，直接调用过关失败的函数

过关成功，柱子移动完毕调用过关成功的函数

function moveMan() {

var stickW = $(".stick").width();//获取倒下棍子的长度
setTimeout(function () {
    $(".man").find("img").attr("src", "../images/stick.gif");
    $(".man").find("img").animate({"left": stickW + "px"}, 1000, function () {
        var wellL = $(".well").eq(1).offset().left;//柱子距离屏幕左侧的距离
        var wellO = $(".well").eq(0).offset().left;//柱子距离屏幕左侧的距离
        colWidth = $(".well").eq(0).width();
        var range = wellL - wellO - colWidth;//获取两个柱子之间的距离
        if ((stickW < range) || (stickW > wellL)) {//判断人物是否落下
            $(".man").animate({"bottom": "0px"});
        } else {//如果成功；人物变为初始
            $(".man").find("img").attr("src", "../images/stick_stand.png").css({"left": 0}).hide();
            $(".stick").removeClass("stickDown").width(0);//棍子变为初始值
            var oldL = $(".well-box").offset().left;
            $(".well-box").animate({"left": -wellL + oldL}, 500, function () {//柱子移动
                $(".man").find("img").show();
                stop = false;//按钮不可单击
            });
        }
    });
}, 600);

}

五.制作英雄过关成败的提示框
技术分析

5.1定义过关成功显示的文本数组和过关失败显示的文本数组

var success = [
    '勇敢坚毅真正之才智乃刚毅之志向。 —— 拿破仑',
    '志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚',
    '骏马是跑出来的，强兵是打出来的。',
    '平时没有跑发卫千米，占时就难以进行一百米的冲刺。'
];
var fail = [
    '志在峰巅的攀登者，不会陶醉在沿途的某个脚印之中。',
    '海浪为劈风斩浪的航船饯行，为随波逐流的轻舟送葬。',
    '努力和效果之间，永远有这样一段距离。成功和失败的唯一区别是，你能不能坚持挺过这段无法估计的距离。'
];

5.2过关成功，用随机函数获取成功数组中显示的文本，传递给显示提示框函数

function successEvent(){
    var num=parseInt(Math.random()*5);  //获取随机数0到5
    dialog(success[num],true); //调用弹框函数
    }

5.3过关失败，用随机函数获取失败数组中显示的文本，传递给显示提示框函数，并用CSS的动画使英雄掉下来。

//判断人物是否落下
var wellL=$(".well").eq(num+1).offset().left;   //柱子距离屏幕左侧的距离
var range=wellL-play.wellW;   //获取两个柱子之间的距离
if((stickW<range)||(stickW>wellL)){
       play.faildEvent();  //如果落下，调用失败数组
       }else{
       //成功
       }

六.重新玩本关游戏

$(".play-agin").live("click",function(){
      play.initWell(weWidth);
      var num=parseInt(Math.random()*19+1);
      $("body").removeAttr("class");
      $("body").addClass("bg"+num);
});

七.继续下一关的实现

当前提示框隐藏，英雄和棍子都变为初始状态
背景图片改变

关卡加一

$(“.go-next”).live(“click”,function(){

 ...
 $(".play-title").text("关卡"+leval);  
 var num=parseInt(Math.random()*19+1);// 随机获取背景图片
 $("body").removeAttr("class");
 $("body").addClass("bg"+num);  //改变背景样式