完整项目下载：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(); } } });
