JavaScript实现简单的打字游戏
阅读原文时间:2023年07月09日阅读:3

完整项目下载:https://download.csdn.net/download/weixin_44893902/13131694

演示地址:https://url_777.gitee.io/typing-games/

目录结构:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>打字游戏</title>
        <link rel="stylesheet" href="css/new_file.css" />
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
        <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!-- 背景音乐 -->
        <audio id="mus">
            <source src="music/music_bg.mp3"></source>
        </audio>
        <!-- 主体部分 -->
         <div id="box">
             <div id="">

             </div>
             <!-- 左右的生命和音量图标 -->
            <img src="./img/生命.png" style="float: left; margin: 45px;" width="45" height="38" id="life" />
            <img src="./img/volume.png" style="float: right; margin: 45px;" width="45" height="38" id="volume" />
            <!-- 计分模块 -->
            <div class="score"><font>0</font></div>
            <div id="game"></div>
            <!-- 重新开始界面 -->
            <div class="reload">
             <input type="button" class="btn squick" value="重新开始" />
             <a href="http://www.baidu.com"> <input type="button" class=" btn tu" value="退出游戏" /></a>
            </div>
            <!-- 按钮 -->
            <input type="button" class=" btn start" value="开 始 游 戏" />
            <input type="button" class=" btn stop" value="暂 停 游 戏" />
            <input type="button" class=" btn quick" value="增 加 难 度" />
    </div>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}

.btn{
      width: 170px;
      height: 70px;
      border-radius: 20px;
      border: 1px solid greenyellow;
      outline: medium;
      background: url(../img/background.jpg) no-repeat;
      background-size:170px 70px;
      float: left;
      margin-left: 20px;
      margin-top: 300px;
      text-align: center;
      /* cursor: pointer; */
      /* user-select: none; */
      font-weight: bold;
      font-size: 30px;
      color:white;
}
.btn:hover{
    border: 3px solid greenyellow;
}

#box{
     width: 100%;
     height: 100vh;
     background:url(../img/background.jpg) no-repeat;
     background-size:100% 100%;
     overflow: hidden;
}
.score{
     width: 250px;
     height: 355px;
     background: url(../img/score.png) no-repeat;
     background-size:100% 100%;
     position: absolute;
     right:10px;
     /* bottom: -80px; */
     font-size: 60px;
     text-align: center;
     line-height: 280px;
     color: white;
     cursor: pointer;
     user-select: none;
     margin-top: 395px;
}
.startorstop{
     width: 100%;
     height: 50px;
     position: absolute;
     bottom: 20px;
}

.reload{
          width: 500px;
          height: 350px;
        background: url(../img/reload.gif) no-repeat;
          background-size:350px 270px;
          margin: 0 auto;
          position: relative;
          top: -650px;
}
.squick{
    width: 130px;
    height: 50px;
    margin-top: 280px;
    margin-left: 40px;
}
.tu{
    width: 130px;
    height: 50px;
    margin-top: -49px;
    margin-left: 210px;
}         

#game img{
          position: absolute;
}
#music_btn{
          width: 70px;
          height: 70px;
          position: absolute;
          left: 10px;
          top: 20px;
          cursor: pointer;
          user-select: none;
}
.play-tips{
    width: 500px;
    height: 400px;
    margin: 0 auto;
    margin-top: 150px;
    border:  1px solid red;
}

#buttons1{
    width: 700px;
    height: 200px;
    margin-bottom: 100px;
}

JavaScript

$(function(){
            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 f = true;
        //开始游戏的标识
            var speed = 1;
            var start = $(".start");
            var createImgInterval;
            var downImgInterval;
        //默认游戏的状态

       //点击开始游戏按钮所执行的函数
        start.click(function(){
            play(speed);
            var music=document.getElementById("mus");
            music.play();
            flag = true;
            if(f){
            f = false;
        }
     });
      //点击暂停按钮所执行的函数
         $(".stop").click(function(){

           if(flag){
             flag = false;
             $(this).val("继 续 游 戏")
             var music=document.getElementById("mus");
             music.pause();
          }else{
             flag = true;
             $(this).val("暂 停 游 戏")
             var music=document.getElementById("mus");
             music.play();
          }
     });
      //增加难度
       $(".quick").click(function(){
          if(!f){
            speed += 0.5;
            play(speed);
       }
     });
     //重新开始游戏
     $(".reload").click(function(){
       $(this).animate({top:"-350px"});
       $("#game").children().remove();
       score = 0;
       $(".score").html(score);
       flag = true;
       f = true;
       speed = 1;
       play(speed);
       console.log(speed)
     });
     //创建图片
    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();
                 if(score==0){
                     score=0
                 }else{
                     score -= 10;
                 }
                 $(".score").html(score);
                 if(score <= 0){
                   flag = false;
                   $(".reload").animate({"top":"30px"});
//                     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);
             if(score <= 0){
               // $(".tupian").animate({"bottom":"0px"});
               window.clearInterval(createImgInterval);
               window.clearInterval(downImgInterval);
             }
             return;
           }
         }
       }
     });
     //定时器
     function play(speed){
        console.log(speed)
        createImgInterval = window.setInterval(createImg,1000-speed*50);
        downImgInterval = window.setInterval(downImg,20-speed/2);
     }
     //随机范围方法
     function randomScope(minScope,maxScope){
         return Math.floor(Math.random()*(maxScope-minScope+1)+minScope);
     }

     var music=document.getElementById("volume");
     music.onclick = function(){
         var i = true;
         var mus=document.getElementById("mus");
         if (mus.paused) {
             mus.play();
             // 暂停中
         } else {
             // 播放中
             mus.pause();
         }
     }
        });