JavaScript实现简单的打字游戏

╰半夏微凉° 2022-12-23 00:38 281阅读 0赞

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

演示地址：https://url\_777.gitee.io/typing-games/

效果图：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70

实现代码：

目录结构：

20201120224913592.png

HTML：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>打字游戏</title>
  6.         <link rel="stylesheet" href="css/new_file.css" />
  7.         <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  8.         <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
  9.     </head>
  10.     <body>
  11.         <!-- 背景音乐 -->
  12.         <audio id="mus">
  13.             <source src="music/music_bg.mp3"></source>
  14.         </audio>
  15.         <!-- 主体部分 -->
  16.          <div id="box">
  17.              <div id="">
  19.              </div>
  20.              <!-- 左右的生命和音量图标 -->
  21.             <img src="./img/生命.png" style="float: left; margin: 45px;" width="45" height="38" id="life" />
  22.             <img src="./img/volume.png" style="float: right; margin: 45px;" width="45" height="38" id="volume" />
  23.             <!-- 计分模块 -->
  24.             <div class="score"><font>0</font></div>
  25.             <div id="game"></div>
  26.             <!-- 重新开始界面 -->
  27.             <div class="reload">
  28.              <input type="button" class="btn squick" value="重新开始" />
  29.              <a href="http://www.baidu.com"> <input type="button" class=" btn tu" value="退出游戏" /></a> 
  30.             </div>
  31.             <!-- 按钮 -->
  32.             <input type="button" class=" btn start" value="开 始 游 戏" />
  33.             <input type="button" class=" btn stop" value="暂 停 游 戏" />
  34.             <input type="button" class=" btn quick" value="增 加 难 度" />
  35.     </div>
  36. </html>

CSS

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  6. .btn{
  7.       width: 170px;
  8.       height: 70px;
  9.       border-radius: 20px;
  10.       border: 1px solid greenyellow;
  11.       outline: medium;
  12.       background: url(../img/background.jpg) no-repeat;
  13.       background-size:170px 70px;
  14.       float: left;
  15.       margin-left: 20px;
  16.       margin-top: 300px;
  17.       text-align: center;
  18.       /* cursor: pointer; */
  19.       /* user-select: none; */
  20.       font-weight: bold;
  21.       font-size: 30px;
  22.       color:white;
  23. }
  24. .btn:hover{
  25.     border: 3px solid greenyellow;
  26. }
  28. #box{
  29.      width: 100%;
  30.      height: 100vh;
  31.      background:url(../img/background.jpg) no-repeat;
  32.      background-size:100% 100%;
  33.      overflow: hidden;
  34. }
  35. .score{
  36.      width: 250px;
  37.      height: 355px;
  38.      background: url(../img/score.png) no-repeat;
  39.      background-size:100% 100%;
  40.      position: absolute;
  41.      right:10px;
  42.      /* bottom: -80px; */
  43.      font-size: 60px;
  44.      text-align: center;
  45.      line-height: 280px;
  46.      color: white;
  47.      cursor: pointer;
  48.      user-select: none;
  49.      margin-top: 395px;
  50. }
  51. .startorstop{
  52.      width: 100%;
  53.      height: 50px;
  54.      position: absolute;
  55.      bottom: 20px;
  56. }
  58. .reload{
  59.           width: 500px;
  60.           height: 350px;
  61.         background: url(../img/reload.gif) no-repeat;
  62.           background-size:350px 270px;
  63.           margin: 0 auto;
  64.           position: relative;
  65.           top: -650px;
  66. }
  67. .squick{
  68.     width: 130px;
  69.     height: 50px;
  70.     margin-top: 280px;
  71.     margin-left: 40px;
  72. }
  73. .tu{
  74.     width: 130px;
  75.     height: 50px;
  76.     margin-top: -49px;
  77.     margin-left: 210px;
  78. }         
  80. #game img{
  81.           position: absolute;
  82. }
  83. #music_btn{
  84.           width: 70px;
  85.           height: 70px;
  86.           position: absolute;
  87.           left: 10px;
  88.           top: 20px;
  89.           cursor: pointer;
  90.           user-select: none;    
  91. }
  92. .play-tips{
  93.     width: 500px;
  94.     height: 400px;
  95.     margin: 0 auto;
  96.     margin-top: 150px;
  97.     border:  1px solid red;
  98. }
  100. #buttons1{
  101.     width: 700px;
  102.     height: 200px;
  103.     margin-bottom: 100px;
  104. }

JavaScript

  1. $(function(){
  2.             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'];
  3.         //积分
  4.             var score = 0;
  5.          //默认游戏的状态
  6.             var flag = true;
  7.          //声明刚开始游戏的状态
  8.             var f = true;
  9.         //开始游戏的标识
  10.             var speed = 1;
  11.             var start = $(".start");
  12.             var createImgInterval;
  13.             var downImgInterval;
  14.         //默认游戏的状态
  16.        //点击开始游戏按钮所执行的函数
  17.         start.click(function(){
  18.             play(speed);
  19.             var music=document.getElementById("mus");
  20.             music.play();
  21.             flag = true;
  22.             if(f){
  23.             f = false;
  24.         }
  25.      });
  26.       //点击暂停按钮所执行的函数
  27.          $(".stop").click(function(){
  29.            if(flag){
  30.              flag = false;
  31.              $(this).val("继 续 游 戏")
  32.              var music=document.getElementById("mus");
  33.              music.pause();
  34.           }else{
  35.              flag = true;
  36.              $(this).val("暂 停 游 戏")
  37.              var music=document.getElementById("mus");
  38.              music.play();
  39.           }
  40.      });
  41.       //增加难度
  42.        $(".quick").click(function(){
  43.           if(!f){
  44.             speed += 0.5;
  45.             play(speed);
  46.        }
  47.      });
  48.      //重新开始游戏
  49.      $(".reload").click(function(){
  50.        $(this).animate({top:"-350px"});
  51.        $("#game").children().remove();
  52.        score = 0;
  53.        $(".score").html(score);
  54.        flag = true;
  55.        f = true;
  56.        speed = 1;
  57.        play(speed);
  58.        console.log(speed)
  59.      });
  60.      //创建图片
  61.     function createImg(){
  62.         if(flag){
  63.         //随机创建
  64.         var random = randomScope(0,25);
  65.         var img = chars[random];
  66.         var Dwidth = $(document).width();//获取浏览器的宽度
  67.         var left = randomScope(Dwidth-100,100);
  68.         $("#game").append("<img src='img/"+img+".png' width='80' height='100' style='left:"+left+"px; top:-100px;' />");
  69.         }
  70.      }
  71.      //加载图片
  72.      function downImg(){
  73.          if(flag){
  74.              var imgs = $("#game").children();//获取生成的所有字母
  75.              for(var i=0;i<imgs.length;i++){
  76.                var img = imgs[i];
  77.                //当前字母
  78.                var Top = parseInt(img.style.top);
  79.                //当前字母距离顶部的值
  80.                var Height = $("#box").height()-200;
  81.                if(Top<=Height){
  82.                  img.style.top=(Top+2)+"px";
  83.                }else{
  84.                  img.remove();
  85. //                   error.play();
  86.                  if(score==0){
  87.                      score=0
  88.                  }else{
  89.                      score -= 10;
  90.                  }
  91.                  $(".score").html(score);
  92.                  if(score <= 0){
  93.                    flag = false;
  94.                    $(".reload").animate({"top":"30px"});
  95. //                     gameOver.play();
  96.                    window.clearInterval(createImgInterval);
  97.                    window.clearInterval(downImgInterval);
  98.                    return  ;
  99.                  }
  100.                }
  102.              }
  103.          }
  104.      }
  105.       $(window).keyup(function(e){
  106.         var eve = window.event || e;//获取事件对象
  107.         var imgs = $("#game").children();//获取所生成的字母
  108.         var code = eve.keyCode;//获取用户按下的键
  109.        if(flag){
  110.          for(var i =0;i<imgs.length;i++){
  111.            var img = imgs[i];
  112.            var imgSrc = img.src.split("/");
  113.            var name = imgSrc[imgSrc.length-1].split(".")[0];
  114.            if(name == chars[code-65]){
  115.              img.remove();
  116.              score+=10;
  117.              $(".score").html(score); 
  118.              if(score <= 0){
  119.                // $(".tupian").animate({"bottom":"0px"});
  120.                window.clearInterval(createImgInterval);
  121.                window.clearInterval(downImgInterval);
  122.              }
  123.              return;
  124.            }
  125.          }
  126.        }
  127.      });
  128.      //定时器
  129.      function play(speed){
  130.         console.log(speed)
  131.         createImgInterval = window.setInterval(createImg,1000-speed*50);
  132.         downImgInterval = window.setInterval(downImg,20-speed/2); 
  133.      }
  134.      //随机范围方法
  135.      function randomScope(minScope,maxScope){
  136.          return Math.floor(Math.random()*(maxScope-minScope+1)+minScope);
  137.      }
  139.      var music=document.getElementById("volume");
  140.      music.onclick = function(){
  141.          var i = true;
  142.          var mus=document.getElementById("mus");
  143.          if (mus.paused) {
  144.              mus.play();
  145.              // 暂停中
  146.          } else {
  147.              // 播放中
  148.              mus.pause();
  149.          }
  150.      }
  151.         });

发表评论

表情：
评论列表 （有 0 条评论，281人围观）

还没有评论，来说两句吧...

相关阅读

    相关 WPF打字游戏

    本文的通过C\利用WPF编辑打字游戏，实现按下指定按键飞机打出一颗子弹并且产生厌恶，击中字母后子弹以及字幕消失，代码如下 编辑器界面对整体的背景以及大小的设定，同时导入按钮

    缺乏、安全感缺乏、安全感/ 0 赞/ 275 阅读

    相关 C语言实现简单打字游戏

    我们实现这样一道编程题，简单的打字游戏，在程序启动后，随机生成一段英文字母，然后用户输入英文字母，输入完毕后，显示用户打字时间和正确率。 代码如下： define

    旧城等待，旧城等待，/ 0 赞/ 608 阅读