用html简单写了一个小游戏

效果图
点击变长出现棍子,小人跑过去,如果跑不过去看小广告复活

用html简单写了一个小游戏_第1张图片
用html简单写了一个小游戏_第2张图片广告页面
用html简单写了一个小游戏_第3张图片

自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        .one{
            background: blueviolet;
            position: absolute;
            left: 500px;
            height: 10px;
            width: 0px;
            transform: rotate(-90deg);
            bottom: 45%;

            transform-origin: 0 100%;

            transition:transform 0.5s linear;
        }

        .two{
            transform: rotate(0deg);
        }

        .ren{
            position: absolute;
            left: 450px;
            bottom: 45%;

        }
        .well{
            position: absolute;
            left: 450px;
            bottom: 20%;
            background: black;
            height: 200px;
            width: 100px;

        }
        .man img.rotate{
            transform:translate(0px,300px);
            -ms-transform:translate(0px,300px);
            -moz-transform:translate(0px,300px);
            -webkit-transform:translate(0px,300px);
            -o-transform:translate(0px,300px);

            transform-origin:100% 100%;
            -ms-transform-origin:100% 100%;
            -moz-transform-origin:100% 100%;
            -webkit-transform-origin:100% 100%;
            -o-transform-origin:100% 100%;

        }
    </style>
</head>
<body>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<input type="button" value="点我变长">
<h1>您的分数为:<span id="num">0</span></h1>

<div>
    <div class="one"></div>
    <div class="ren"><img src="img/stick_stand.png"></div>
    <div class="well-box"><div class="well"></div><div class="well"></div></div>

</div>
<script type="text/javascript">
    var stop=true;
    var num=0;
    var number = Math.floor(Math.random()*800+100);
    $($(".well").get(1)).css("left",450+number)

    $("input").mousedown(function () {
        if(stop){
            $(".one").animate({"width":"1000px"},1000)
        }
    })
    $("input").mouseup(function () {
        if(stop){
            $(".one").stop();//停止所有执行的函数
            stop=false;
            $(".one").addClass("two");
            moveren();
        }
    })
    
    function moveren() {
        //获取棍子的长度
        var one = $(".one").width();
        //替换我们的图片
        $(".ren img").attr("src","img/stick.gif");
        //
        setTimeout(function () {
            $(".ren").animate({"left":(one+500)+"px"},1000,function() {
                //1.人没有跑过去
                if ((one < number - 50) || (one > number + 50)) {
                    $(".ren").animate({"bottom": "0px"});
                    setTimeout(function () {
                        $(".ren").hide()
                    }, 200);
                  var flag=  confirm("您是否要给观看广告并复活");
                  if(flag){
                      location.href="广告页面.html?_ijt=6dsf612rkvau6kv4qg7fma1tib&num="+num;
                  }else{
                      location.href="自定义动画.html"
                  }
                } else {
                    //2.人跑过去了
                    num+=100;
                    $("#num").text(num);
                    $(".ren").css("left",450);
                    $(".ren img").attr("src","img/stick_stand.png")//小人初始化
                    $(".one").removeClass("two")
                    $(".one").width(0)//棍子初始化
                    number = Math.floor(Math.random()*800+100);
                    $($(".well").get(1)).css("left",450+number)//柱子初始化
                    stop=true;//Ⅹ按钮能够再次点击

                }

            })
        },1000)
    }

        var test=window.location.href;
        var number1 = test.lastIndexOf("?");
        var sub = test.substring(number1+1,test.length);
        if(sub==="flag=false"){
            location.href="自定义动画.html"
        }else{
          var subb=  sub.indexOf("&");

          var  subflag=sub.substring(0,subb);
          if(subflag==="flag=true"){
              var subnum=sub.lastIndexOf("=");
              num=sub.substring(subnum+1,subb.length);
              $("#num").text(num);
              $(".ren").css("left",450);
              $(".ren img").attr("src","img/stick_stand.png")//小人初始化
              $(".one").removeClass("two")
              $(".one").width(0)//棍子初始化
              number = Math.floor(Math.random()*800+100);
              $($(".well").get(1)).css("left",450+number)//柱子初始化
              stop=true;//Ⅹ按钮能够再次点击
          }


        }

</script>

</body>
</html>
广告页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        video{
            position: relative;
            left: 350px;
        }
        #one{
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: #d2d2d2;
            position: relative;
            left: 580px;
            bottom:940px;
            opacity:0.6;
            filter: alpha(opacity=10);

        }
        #two{
            width: 58px;
            height: 58px;
            position: relative;
            left: 1060px;
            bottom:1000px;

        }
        #one span{
            font-size: 25px;
            position: relative;
            left: 25px;
            top: 15px;
         }
        img{
            opacity:0.6;
            filter: alpha(opacity=10);
        }
    </style>
</head>
<body>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
    <div>
        <div><video src="405B24FDCA889E184839F2019DF312D3.mp4" autoplay="autoplay" width="1000px" height="950px"></video></div>
        <div id="one"><span>20</span></div>
        <div id="two"><img src="img/叉叉.PNG" alt=""></div>
    </div>
<script type="text/javascript">
        //载入事件
        $().ready(function () {
            /*当数字变为0之后*/
            var num=$("span").text();
            /*获取定时器对象*/
            var time=null;
            time=setInterval( function f() {
                if(num==1){
                    clearInterval(time);
                }
                num--;
                $("span").text(num);
            },1000);

            $("img").click(function () {
                if(num==0){
                    var nums=window.location.href;
                    var index=nums.lastIndexOf("=")
                    nums= nums.substring(index+1,nums.length);
                    location.href="自定义动画.html?flag=true&num="+nums;
                    alert("观看完毕即将复活")
                }else{
                    location.href="自定义动画.html?flag=false"
                    alert("未观看完将不会复活")
                }
            })

    })
            $("img").hover(function () {
                $("#two").css("background","red")
            },
                function () {
                    $("#two").css("background","")
                }
            )

</script>
</body>
</html>

相关图片 弄一个img存放
stick.gif
在这里插入图片描述stick_stand.png

在这里插入图片描述叉叉.PNG
在这里插入图片描述
记得引入js jar包
有兴趣的小伙伴可以去试试

你可能感兴趣的:(用html简单写了一个小游戏)