英雄難過棍子關（課本案例）

一.主界面靜态頁面

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);  //改變背景樣式
});

本代碼為《jQuery前端開發之網頁特效》英雄難過棍子關所有，僅有關鍵代碼，僅供參考。

英雄難過棍子關（課本案例）

繼續閱讀

CSS的僞類與僞元素的差別

css中僞類與僞元素的差別

談談css的僞類和僞元素

僞類與僞元素的差別僞類與僞元素的差別

web前端布局練手項目

CSS----對字号的控制:Points, ems, pixels, 及其它機關,關鍵字,比例參數

HDU 4609 3-idiots

趕工心得（一）

兩種清除浮動的方法

HDU 1402 A * B Problem Plus

如何成為一名.net 工程師?

tabpanel 使用問題

CSS之折疊菜單

數組和類數組

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”