使用jQuery配合CSS实现火柴人闯关小程序

今天药忘吃喽~ 2023-06-23 09:52 10阅读 0赞

## 使用jQuery实现的火柴人闯关特效，长按按钮进行蓄力呦！用最简单的代码做最多的事（话不多说上代码） ##

--------------------

> **为了方便观看，老明宇把代码写到了一块。图片的话老明宇就不再提供其实一共也就两张（请大家百度把）**

**效果展示： （长按按钮可以进行上下蓄力呦）**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODYwNTgy_size_16_color_FFFFFF_t_70][]

**代码展示： **

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>火柴人过关</title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            .sss{
                width:100%;
                height:700px;
                background:aqua;
                position:relative;
            }
            .btn-box{
                width:600px;
                height:100px;
                /* background:red; */
                margin:0 auto;
            }
            .btn-main{
                font-size:30px;
                font-weight:bold;
            }
            .btnClick{
                background:url(../img/按钮.png) 0 -2px;
                background-size:100px 50px;
                background-repeat:no-repeat;
                width:100px;
                height:50px;
                /* border:none; */
            }
            .container{
                width:100%;
                height:550px;
                background:green;
                position:relative;
                margin-top:50px;
            }
            /* 柱子 */
            .stick{
                position:absolute;
                bottom:200px;
                left:80px;
                height:5px;
                width:0;
                background:#096;
                /* 逆时针旋转90度 */
                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%;/*IE9*/
                -moz-transform-origin:0 100%;/*Firefox*/
                -webkit-transform-origin:0 100%;/*Ssfari and Chrome*/
                -o-transform-origin:0 100%;/*Opera*/
    
                /* 以0.35s的速度线性增长 */
                transition:transform 0.35s linear; 
                -ms-transition:transform 0.35s linear;/*IE9*/
                -moz-transition:transform 0.35s linear;/*Firefox*/
                -webkit-transition:transform 0.35s linear;/*Ssfari and Chrome*/
                -o-transition:transform 0.35s linear;/*Opera*/
            }
            .stickDown{/* 柱子倒下 */
                /* 旋转 */
                transform:rotate(0deg); 
                -ms-transform:rotate(0deg);/*IE9*/
                -moz-transform:rotate(0deg);/*Firefox*/
                -webkit-transform:rotate(0deg);/*Ssfari and Chrome*/
                -o-transform:rotate(0deg);/*Opera*/
            }
            /* 人 */
            .man{
                position:absolute;
                bottom:200px;
                z-index:2;
            }
            .man>img{
                width:60px;
            }
            /* 台阶 */
            .well-box{
                width:100%;
                height:200px;
                /* background:hotpink; */
                position:absolute;
                bottom:0;
            }
            .well{
                float:left;
                width:80px;
                height:180px;
                background:#000;
                color:#fff;
                padding-top:20px;
            }
            .well>p{
                width:15px;
                margin:0 auto;
            }
            /* 数值 */
            .sum{
                position:absolute;
                top:150px;
                left:0;
                right:0;
                width:200px;
                border:3px solid #000;
                margin:5px auto;
            }
            .sum01{
                /* width:300px; */
                transform:translateX(300px);
                transition:0.5s;
            }
        </style>
    </head>
    <body>
        <div class="sss">
            <div class="btn-box">
                <p class="btn-main">
                    你只有非常努力，才能看起来毫不费力！<br/>
                    <button class="btnClick"></button>
                </p>
            </div>
            <div class="container">
                
                <div class="stick"></div>
                
                <div class="man"><img src="../img/小人.png"/></div>
                
                <div class="well-box">
                    <div class="well"><p>第一根柱子</p></div>
                    <div class="well" style="margin-left:300px;"><p>第二根柱子</p></div>
                </div>
            </div>
            
            <h1 class="sum">数值：</h1>
        </div>
        <script src="../JQpackage/jquery-1.12.4.js"></script>
        <script>
            $(function(){
                let stop = true;//柱子是否停止在增长
                let timer;//定时器
                let index = 1;
                let i = 0;
    
                //按下按钮，柱子增长
                $(".btnClick").mousedown(function(){
                    if(stop){
                        timer = setInterval(run,0);
                    }
                });
                function run(){
                    if (index == 1) {
                        i++;
                    }
                    if (index == -1) {
                        i--;
                    }
                    if (i == 350) {
                        index = -1;
                    }
                    if (i == 0) {
                        index = 1;
                    }
                    $(".stick").css({"width":i+"px"});
                    $(".sum").html("数值："+$(".stick").width());
                }
    
                //松开按钮，柱子停止增长并倒下
                $(".btnClick").mouseup(function(){
                    if(stop){
                        $(".stick").stop();//柱子停止增长，stop()停止动画
                        stop = false;
                        clearInterval(timer);
                        $(".stick").addClass("stickDown");//柱子倒下
                        moveMan();//小人往前走
                    }
                });
    
                //小人往前走
                function moveMan(){
                    var stickW = $(".stick").width();//获取柱子倒下时的长度
                    alert(stickW);
                    setTimeout(function(){
                        $(".man").find("img").attr("src","../img/timg.gif");
                        $(".man").animate({"left":stickW+"px"},1000,function(){
                            var wellL = $(".well").eq(1).offset().left;//柱子距离屏幕左侧的距离
                            var well0 = $(".well").eq(0).offset().left;//柱子距离屏幕左侧的距离
                            var colWidth = $(".well").eq(0).width();
                            var range = wellL-well0-colWidth;//获取两个柱子中间的距离
                            if((stickW < range) || (stickW >wellL)){//判断人物是否落下
                                $(".man").animate({"bottom":"0px"});
                            }else{//如果成功，人物变为初始
                                $(".man").find("img").attr("src","../img/小人.png").hide();
                                $(".man").css({"left":0});
                                $(".stick").removeClass("stickDown").width(0);//棍子变为初始
                                var oldL = $(".well-box").offset().left;
                                $(".well-box").animate({"left":-wellL+oldL},1000,function(){//柱子移动
                                    $(".man").find("img").show();
                                    stop = false;//按钮不可以点击
                                    clearInterval(timer);
                                });
                            }
                        });
                    },600);
                }
            });
        </script>
    </body>
    </html>

--------------------

###  希望看到代码人都有所收获，感谢大家！ ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODYwNTgy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191218135139908.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0ODYwNTgy,size_16,color_FFFFFF,t_70