jQuery实现打字小游戏

最新推荐文章于 2022-11-09 12:47:36 发布

张总地小跟班

最新推荐文章于 2022-11-09 12:47:36 发布

阅读量1.2k

点赞数 2

分类专栏：知识点文章标签： jquery 游戏

本文链接：https://blog.csdn.net/weixin_40429071/article/details/78575741

版权

知识点专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<HTML>
 <HEAD><!--vh是能看见高度的100%-->
  <TITLE>jQuery实现打字小游戏t </TITLE>
  <meta charset="utf-8"/> 
  <style type="text/css">
      *{margin: 0;padding: 0;}
      #box{width: 100%;height: 100vh;background:url(img/bg11.jpg)no-repeat;background-size:100% 100%;overflow: hidden;}
      .score{width: 150px;height: 190px;background:url(img/fs.png)no-repeat;background-size:150px 190px;
      position: absolute;right: 10px;bottom: 20px;font-size: 40px;text-align: center;line-height: 150px;color: green;cursor: pointer;user-select: none;}
      .startorstop{width: 100%;height: 50px;position: absolute;bottom: 20px;}
      .btn{width: 130px;height: 50px;background: url(img/stop.png)no-repeat;background-size:130px 50px;float: left;text-align: center;line-height: 50px;cursor: pointer;user-select: none;font-weight: bold;color: green;}
      .start{margin: 0 20px;}

      .reload{width: 500px;height: 274px;background:url(img/sp1.png)no-repeat;background-size:500px 274px;margin: 0 auto;position: relative;top: -350px;cursor: pointer;user-select: none;}

      #game img{position: absolute;}
      #music_btn{width: 70px;height: 70px;position: absolute;left: 10px;top: 20px;cursor: pointer;user-select: none;}
      .tupian{width: 600px;height: 350px;background:url(img/lay.png)no-repeat;backgroung-size:600px 350px;position: relative;bottom: -400px;cursor: pointer;user-select: none;}
  </style>
 </HEAD>

 <BODY>
 <!--浏览器中的内容都是写在body中的-->
     <div id="box">
         <div id="game"></div>
         <div class="score">0</div>
         <div class="reload"></div>
         <div class="startorstop">
             <div class="btn stop">暂停游戏</div>
             <div class="btn start">开始游戏</div>
             <div class="btn quick">增加难度</div>
         </div>
         <div class="tupian"></div>
         <div id="btn"><img src="img/no.png" id="music_btn" /></div>
         <audio id="boss" src="music/Boss.mp3" loop="loop"></audio>
         <audio id="ok" src="music/ok.wav"></audio>
         <audio id="error" src="music/error.wav"></audio>
         <audio id="gameOver" src="music/gameOver.mp3"></audio>
         <audio id="yixing" src="http://sxyd.sc.chinaz.com/Files/DownLoad/sound1/201705/8738.wav"></audio>
     </div>

     <script type="text/javascript" src="js/jquery.js"></script>
     <script type="text/javascript">
         var chars =['A','B','C','D','E','F','G','H','T','J','K','L','M','N','O','P','Q','R','S','G','U','V','W','X','Y','Z'];
         //积分
         var score = 0;
         //默认游戏的状态
         var flag = true;
         //音乐
         var yixing = document.getElementById("yixing");
         var boss = document.getElementById("boss");
         var ok =  document.getElementById("ok");
         var error = document.getElementById("error");
         var gameOver = document.getElementById("gameOver");
         var start = $(".start");
         var f = true;//开始游戏的标识
         var speed = 1;
         var createImgInterval;
         var downImgInterval;
         //点击开始游戏按钮所执行的函数
         start.click(function(){
             flag = true;
             if(f){
               play(speed);
               f = false;
             }
         });
         //点击暂停按钮所执行的函数
         $(".stop").click(function(){
             if(flag){
               flag = false;
             }else{
               flag = true;
             }
         });
          //重新开始游戏
         $(".reload").click(function(){
           $(this).animate({top:"-350px"});
           $("#game").children().remove();
           score=0;
           $(".score").html(score);
           flag = true;
           f = true;
           speed = 1;
           play(speed);
         });
         //开始
         $(".tupian").click(function(){
             $(this).animate({bottom:"-400px"});
             play(speed);
         });
         //增加难度
         $(".quick").click(function(){
           if(!f){
             speed++;
             play(speed);
           }
         });
         //音乐
         $("#btn").click(function(){
             if(boss.paused){
                 boss.play();
                 $("#music_btn").attr("src","img/no.png");
             }else{
                 boss.pause();
                 $("#music_btn").attr("src","img/off.png");
             }
         });
         //createImg();
         function createImg(){
             if(flag){
               //随机创建
               var random = randomScope(0,25);
               var img = chars[random];
               var Dwidth = $(document).width();//获取浏览器的宽度
               var left = randomScope(Dwidth-100,100);
               $("#game").append("<img src='img/"+img+".png' width='80' height='100' style='left:"+left+"px; top:-100px;' />");
             }
         }

         function downImg(){
             if(flag){
                 var imgs = $("#game").children();//获取生成的所有字母
                 for(var i=0;i<imgs.length;i++){
                   var img = imgs[i];//当前字母
                   var Top = parseInt(img.style.top);//当前字母距离顶部的值
                   var Height = $("#box").height()-200;
                   if(Top<=Height){
                     img.style.top=(Top+2)+"px";
                   }else{
                     img.remove();
                     error.play();
                     score -= 10;
                     $(".score").html(score);
                     if(score == -100){
                       flag = false;
                       $(".reload").animate({"top":"-50px"});
                       gameOver.play();
                       window.clearInterval(createImgInterval);
                       window.clearInterval(downImgInterval);
                       return;
                     }

                   }

                 }
             }
         }

         $(window).keyup(function(e){
           var eve = window.event || e;//获取事件对象
           var imgs = $("#game").children();//获取所生成的字母
           var code = eve.keyCode;//获取用户按下的键值

           if(flag){
             for(var i =0;i<imgs.length;i++){
               var img = imgs[i];
               var imgSrc = img.src.split("/");
               var name = imgSrc[imgSrc.length-1].split(".")[0];
               if(name == chars[code-65]){
                 img.remove();
                 score+=10;
                 $(".score").html(score);
                 ok.play();
                 if(score == 200){
                   $(".tupian").animate({"bottom":"0px"});
                   yixing.play();
                   window.clearInterval(createImgInterval);
                   window.clearInterval(downImgInterval);
                 }
                 return;
               }
             }
           }
         });
         //play();
         //定时器
         function play(speed){
              createImgInterval = window.setInterval(createImg,1500-speed*50);
              downImgInterval = window.setInterval(downImg,50-speed/2); 
         }

         //随机范围方法
         function randomScope(minScope,maxScope){
             return Math.floor(Math.random()*(maxScope-minScope+1)+minScope);
         }
     </script>

 </BODY>
</HTML>