美文网首页
jQuery-植物大战僵尸

jQuery-植物大战僵尸

作者: 薛定谔的程序 | 来源:发表于2020-01-16 20:52 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../jquery-3.4.1.min.js"></script>
        <link rel="stylesheet" href="../css/植物大战僵尸.css">
    </head>
    <body>
    <div id="container">
        <button >stop</button>
        <button>begin</button>
        <button>加速</button>
        <div id="bg1" class="bg"></div>
        <div id="bg2" class="bg"></div>
        <div id="name" onselectstart="return false">植物大战僵尸2.0</div>
        <div id="begin"><span>开始游戏</span></div>
        <div id="plane"></div>
        <div id="img"></div>
        <div id="imga"></div>
    <!--    <div class="boss"></div>-->
    </div>
    
    <script src="../js/植物大战僵尸.js"></script>
    </body>
    </html>
    
    //生成随机数
    function randomNum(min, max) {
       let num = parseInt(Math.random() * (max - min) + min);
       return num;
    }
    
    let T = -50;
    (function ($) {
       $.fn.extend({
           //背景循环
           bgCycle: function () {
               setInterval(function () {
                   $('#bg1,#bg2').css({top: '+=1'});
                   if (parseInt($('#bg1').css('top')) > 600) {
                       $('#bg1').css('top', '0')
                   }
                   if (parseInt($('#bg2').css('top')) > 0) {
                       let count = -600;
                       $('#bg2').css({top: count})
                   }
               }, 20)
           },
           //小蜜蜂移动
           move: function () {
               $(this).on('mousedown', function (e) {
                   let Left = Math.round($("#container").offset().left);//container距离页面left的值
                   let W = Math.round($('#container').width());
                   let H = Math.round($('#container').height());
                   let w = Math.round($('#plane').width());
                   let h = Math.round($('#plane').height());
                   let l = parseInt($(this).css("left"));
                   let t = parseInt($(this).css("top"));
                   //鼠标和div的间距
                   let disX = e.pageX - Left - l;
                   let disY = e.pageY - t;
                   $(document).on('mousemove', function (e) {
                       let x = e.pageX - disX - Left;
                       let y = e.pageY - disY;
                       if (x < -10) {
                           x = -10
                       }
                       if (x > W - w + 10) {
                           x = W - w + 10
                       }
                       if (y < 0) {
                           y = 0
                       }
                       if (y > H - h) {
                           y = H - h
                       }
                       $('#plane').css({left: x, top: y});
                   });
                   $(document).on('mouseup', function () {
                       $(document).off('mousemove');
                   })
               })
           },
           //生成子弹
           shoot: function () {
               let creat_time = setInterval(function () {
                   let newel = $('<div class="shoot"></div>');
                   let x = parseInt($("#plane").css("left")) + 25;
                   let y = parseInt($("#plane").css("top"));
                   newel.css({left: x, top: y});
                   newel.appendTo($('#container'));
               }, 200)
           },
           //子弹运动
           shoot_move: function () {
               let s_timer = setInterval(function () {
                   $('.shoot').css({top: '-=10'});
                   let allShoot = document.querySelectorAll('.shoot');
                   for (let i = 0; i < allShoot.length; i++) {
                       if (allShoot[i].offsetTop < 0) {
                           allShoot[i].parentNode.removeChild(allShoot[i]);
                       }
                   }
               }, 30);
           },
           //点击stop
           stop: function () {
               $(this).on('click', function () {
                   for (let i = 0; i < 100; i++) {
                       clearInterval(i);
                   }
                   let audio = document.getElementById('audio');
                   if (audio.played) {
                       audio.pause();
                   }
               });
           },
           //生成敌方
           bad: function () {
               setInterval(() => {
                   let bad = $('<div class="bad"></div>');
                   bad.appendTo($('#container'));
                   bad.css({left: randomNum(0, 350), top: T});
               }, 900)
           },
           //敌方移动
           bad_move: function () {
               setInterval(() => {
                   $('.bad').css({top: '+=1'});
                   if (parseInt($('.bad').css('top')) > 550) {
                       let over_window = $('<div class="over_window">Game over</div>');
                       over_window.appendTo($('#container'));
                       for (let i = 0; i < 100; i++) {
                           clearInterval(i);
                       }
                       let audio = document.getElementById('audio');
                       if (audio.play) {
                           audio.pause();
                       }
                       $('button').hide();
                       $('<button class="restart">Try again</button>').appendTo($('#container'));
                       $(".restart").animate({borderRadius: 30, left: 25, width: 350}, 1000);
                       $('.restart').on('mouseup', function () {
                           location.reload();
                       })
                   }
               }, 10)
           },
           //boss生成
           boss: function () {
               setTimeout(() => {
                   setInterval(() => {
                       let B = $('<div class="boss"></div>');
                       B.appendTo($("#container"));
                       //必须设置B添加到container中,下行用B来设置样式,用$('.boss')设置存在问题
                       B.css({left: randomNum(0, 250), top: T});
                   }, 2000);
               }, 2000);
    
           },
           //boss移动
           boss_move: function () {
               setInterval(() => {
                   $('.boss').css({top: '+=1'});
                   //到达下方
                   if (parseInt($(".boss").css('top')) > 450) {
                       $('<div class="over_window">Game over</div>').appendTo($('#container'));
                       for (let i = 0; i < 100; i++) {
                           clearInterval(i);
                       }
                       let audio = document.getElementById('audio');
                       if (audio.play) {
                           audio.pause();
                       }
                       $('button').hide();
                       $('<button class="restart">Try again</button>').appendTo($('#container'));
                       $(".restart").animate({borderRadius: 30, left: 25, width: 350}, 1000);
                       $('.restart').on('mouseup', function () {
                           location.reload();
                       })
                   }
               }, 10)
           },
           //boss碰撞检测
           boss_check: function () {
               function check(obj1, obj2) {
                   let obj1Left = obj1.offsetLeft;
                   let obj1Width = obj1.offsetWidth + obj1Left;
                   let obj1Top = obj1.offsetTop;
                   let obj1Height = obj1Top + obj1.offsetHeight;
    
                   let obj2Left = obj2.offsetLeft;
                   let obj2Width = obj2.offsetWidth + obj2Left;
                   let obj2Top = obj2.offsetTop;
                   let obj2Height = obj2Top + obj2.offsetHeight;
    
                   if (!(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top)) {
                       return true;
                   } else {
                       return false;
                   }
               }
    
                   setInterval(() => {
                       let shoot = document.getElementsByClassName('shoot');
                       let con = document.getElementById('container');
                       let boss = document.getElementsByClassName('boss');
                       for (let i=0;i<shoot.length;i++){
                           for (let j=0;j<boss.length;j++){
                               let a = shoot[i];
                               let b = boss[j];
                               if (check(a,b)){
                                   console.log(parseInt($('.boss').css('fontSize')));
                                   con.removeChild(a);
                                  $('.boss').css({fontSize:'-=20'});
                               }
                               if (parseInt($('.boss').css('fontSize'))<=0){
                                   con.removeChild(b);
                               }
                           }
                       }
                   }, 10)
           },
           //碰撞检测+计分
           check_block_collision: function () {
               function check(obj1, obj2) {
                   let obj1Left = obj1.offsetLeft;
                   let obj1Width = obj1.offsetWidth + obj1Left;
                   let obj1Top = obj1.offsetTop;
                   let obj1Height = obj1Top + obj1.offsetHeight;
    
                   let obj2Left = obj2.offsetLeft;
                   let obj2Width = obj2.offsetWidth + obj2Left;
                   let obj2Top = obj2.offsetTop;
                   let obj2Height = obj2Top + obj2.offsetHeight;
    
                   if (!(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top)) {
                       return true;
                   } else {
                       return false;
                   }
               }
    
               setInterval(() => {
                   let shoot = document.getElementsByClassName('shoot');
                   let bad = document.getElementsByClassName('bad');
                   let con = document.getElementById('container');
                   for (let i = 0; i < shoot.length; i++) {
                       for (let j = 0; j < bad.length; j++) {
                           let a = shoot[i];
                           let b = bad[j];
    
                           if (check(a, b)) {
                               con.removeChild(a);
                               con.removeChild(b);
                           }
                       }
                   }
    
               }, 10)
           },
           //小蜜蜂变身
           changebg: function () {
               setInterval(function () {
                   $('#plane').css({
                       background: 'url("../img/mifeng1.png") no-repeat 5px',
                       backgroundSize: '100% 100%'
                   })
               }, 500)
           },
           //背景音乐
           mucis: function () {
    
           },
           //stop/begin切换
           begin: function () {
               $('button:first').on('click', function () {
                   $(this).hide();
                   $("button:eq(2)").hide();
                   $('button:eq(1)').css({display: 'block'}).animate({
                       width: 400,
                       height: 100,
                       opacity: 0.8,
                       fontSize: 50,
                       top: 200
                   })
               });
               $('button:eq(1)').on('click', function () {
                   $('button:first').show();
                   $("button:eq(2)").show();
                   $(this).animate({width: 50, height: 30, top: 0, left: 0, fontSize: 1, opacity: 0});
                   setTimeout(function () {
                       for (let i = 0; i < 100; i++) {
                           clearInterval(i);
                       }
                       $('#container').bgCycle();
                       $('#plane').move();
                       $('#plane').shoot();
                       $('#plane').shoot_move();
                       $('#img').bad();
                       $('#container').bad_move();
                       $('#container').check_block_collision();
                       // $("#plane").changebg();
                       $('button:first').stop();
                       $("#button:eq(1)").begin();
                       let audio = document.getElementById('audio');
                       if (audio.pause) {
                           audio.play();
                       }
                   }, 0)
               });
           },
           //加速
           speed: function () {
               $('button:eq(2)').on('mousedown', function () {
                   $('#container').bgCycle();
                   $('#plane').move();
                   $('#plane').shoot();
                   $('#plane').shoot_move();
                   $('#img').bad();
                   $('#container').bad_move();
                   $('#container').check_block_collision();
                   // $("#plane").changebg();
                   $('button:first').stop();
                   $("#button:eq(1)").begin();
               })
           }
       })
    })(jQuery);
    //开始游戏
    $('#begin').on('mouseup', function () {
       $(this).animate({opacity: 0, top: 800}, 500);
       $("#img").animate({opacity: 0}, 1000);
       $('#plane').show();
       $('#container').bgCycle();
       $('#plane').move();
       $('#plane').shoot();
       $('#plane').shoot_move();
       $('#img').bad();
       $('#container').bad_move();
       $('#container').check_block_collision();
       // $("#plane").changebg();
       $('button:first').stop();
       $("#button:eq(1)").begin();
       $('<audio id="audio" src="../img/植物大战僵尸bgm.mp3" autoplay></audio>').appendTo($('#container'))
       $('#name').animate({left: -400}, 1000);
       $('button:eq(2)').speed();
       $('#imga').animate({top: 600}, 1000);
       $('#container').boss();
       $("#container").boss_move();
       $("#container").boss_check();
    });
    
    * {
        margin: 0;
        padding: 0
    }
    
    #container {
        position: relative;
        width: 400px;
        height: 600px;
        margin: 0 auto;
        background: #a3a3a3;
        overflow: hidden;
        box-shadow: 0 0 2px 2px rgba(100,100,100,0.5);
    }
    
    .bg {
        width: 400px;
        height: 600px;
        position: absolute;
        /*background: url("../img/bgthree.jpg");*/
        background: url("../img/gamebg_03.png");
        /*transform: rotate(90deg);*/
        /*background-size: 100% 100%;*/
    }
    
    #bg2 {
        top: -600px;
    }
    
    button:first-child {
        width: 50px;
        height: 30px;
        position: absolute;
        z-index: 2;
        filter: opacity(50%);
        border-radius: 10px;
        color: white;
        background-color: #11213b;
        font-size: 1rem;
    }
    
    button:nth-child(2) {
        width: 400px;
        height: 100px;
        position: absolute;
        z-index: 1;
        filter: opacity(80%);
        border-radius: 10px;
        color: white;
        background-color: #11213b;
        font-size: 4rem;
        font-weight: bold;
        display: none;
        top: 200px;
        /*background: url("../img/zhiwuda.jpg");*/
        /*background-size: 100% 100%;*/
    }
    button:nth-child(2):hover{
        color: #46ffff;
    }
    button:nth-child(3){
        position:absolute;
        top: 0;
        left: 55px;
        width: 50px;
        height: 30px;
        z-index: 1;
        filter: opacity(50%);
        border-radius: 10px;
        color: white;
        background-color: #11213b;
    }
    
    #plane {
        width: 100px;
        height: 80px;
        position: absolute;
        background: url("../img/豌豆.png") no-repeat;
        transform: rotate(-90deg);
        background-size: 100% 100%;
        top: 400px;
        left: 150px;
        display: none;
    }
    
    .shoot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: radial-gradient(farthest-side at 60% 10%, greenyellow, black);
        position: absolute;
        /*border-top-left-radius: 5px;*/
        /*border-top-right-radius: 5px;*/
    }
    
    .bad {
        width: 50px;
        height: 80px;
        background: url("../img/bad.png") no-repeat;
        background-size: 100%;
        position: absolute;
    }
    
    .over_window {
        position: absolute;
        top: 30%;
        left: -50px;
        width: 500px;
        height: 100px;
        background: linear-gradient(white 10%, greenyellow 10%, #46ffff);
        font-weight: bold;
        font-size: 50px;
        color: #a3a3a3;
        text-align: center;
        transform: rotate(-20deg);
    }
    
    body {
    
        background: url("../img/gamebg_03.png");
    }
    
    #begin {
        position: absolute;
        top: 300px;
        left: -5px;
        width: 410px;
        height: 100px;
        text-align: center;
        font-size: 60px;
        cursor: pointer;
        font-family: 方正粗黑宋简体, serif;
        background: linear-gradient(200deg, orange, orchid, wheat, #f4511e, blue);
        text-shadow: 0 0 0 #cccccc, 1px 1px 0 #3e8e41, 2px 2px 0 #92bde7, 3px 3px 0 #cccccc, 4px 4px 0
    #cccccc, 5px 5px 0 #cccccc;
        text-decoration: none;
        outline: none;
        color: #fff;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
    }
    
    #begin:hover {
        background: linear-gradient(90deg, #727d8f, wheat, black);
    }
    
    #begin:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
    }
    #begin span{
    
    }
    #name{
        color: yellow;
        font-size: 30px;
        font-family: "Adobe Arabic";
        position: absolute;
        top: 20px;
        width: 400px;
        text-align: center;
        font-weight: bold;
    }
    #img{
        position: absolute;
        top: 80px;
        width: 400px;
        height: 220px;
        background: url("../img/zhiwuda.jpg");
        background-size: 100% 100%;
    }
    
    #imga{
        position: absolute;
        top: 400px;
        width: 400px;
        height: 200px;
        background: url("../img/zhiwuda2.jpg");
        background-size: 100% 100%;
    }
    
    .restart{
        position: absolute;
        top: 400px;
        width: 250px;
        height: 100px;
        /*box-shadow: 0 0 1px 1px rgba(000,100,255,0.6);*/
        left: 50px;
        background: linear-gradient(60deg,darkslateblue 10%,green 50%,darkmagenta);
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        color: #d7ddde;
        filter: hue-rotate(200deg);
        outline: none;
    }
    .restart:hover{
        filter: none;
    }
    .boss{
        position: absolute;
        width: 150px;
        height: 150px;
        background: url("../img/僵尸.png") -10px -50px;
        background-size: 135% 130%;
        font-size: 100px;
    }
    
    
    image.png image.png image.png
    image.png bandicam-2020-01-16-20-55-33-22.gif

    相关文章

      网友评论

          本文标题:jQuery-植物大战僵尸

          本文链接:https://www.haomeiwen.com/subject/jqdqzctx.html