JavaScript实现简单的打字游戏

完整项目下载 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;

 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 

 //默认游戏的状态

 var flag true;

 //声明刚开始游戏的状态

 var f true;

 //开始游戏的标识

 var speed 

 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 

 $( .score ).html(score);

 flag true;

 f true;

 speed 

 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 top:-100px; / 

 //加载图片

 function downImg(){

 if(flag){

 var imgs $( #game ).children();//获取生成的所有字母

 for(var i 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 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 

 $( .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();

 });

利用JavaScript实现二级联动 利用JavaScript实现二级联动 要实现JavaScript二级联动效果，首先要确定需要哪些技术： 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码： !-- input type= text id= text -- 请选择省份： select name= id= provinces !-- option value= 江苏省 江苏省 /option