用jq制作疯狂打字母游戏
游戏特点：有点类似于金山打字里的捡苹果，不同点就是我写了个虚拟小键盘，这个键盘会根据你电脑上的键盘按键输入而产生相应捕捉，就是你在键盘上按下任意一个字母，这个虚拟键盘就根据按下的任意字母键背景颜色会变化，同时屏幕上向下飘落出现的字母如果跟按下的字母相等就会消失得分！
按回车背景音乐暂停
按空格播放背景音乐
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>打字</title>
<style>
*{padding: 0px;margin: 0;list-style-type: none}
#letterul li{
border: solid 1px #18ff0e;
float: left; width:40px;;height:35px;
margin:30px;padding-top:7px;
text-align: center;
font-size: 22px;
color: #ffffff;
position:absolute;
}
/*键盘字母*/
#ul li{
float: left;
border: solid 1px #41ff0b;
margin: 14px;
color: #ffffff;
font-size: 37px;
width: 60px;height: 55px;
text-align: center;
}
/* #ul li:nth-of-type(14){margin-left: 65px;}
#ul li:nth-of-type(26){margin-left: 30px;}*/
/*左边进度条框*/
#correct{
border: solid #18ff0e 5px;
width: 100px;height: 860px;
float: left;
transform:rotate(180deg);/*旋转180度*/
}
/*左边进度条*/
#correctColor{
background-color: yellow; width: 100px;
}
#feiShu{
text-align: center;
color: #ffffff;transform:rotate(180deg);
}
/*右边进度条框*/
#error{
border: solid #18ff0e 5px;
width: 100px;height: 860px;
float: right;
transform:rotate(180deg);/*旋转180度*/
}
/*右边进度条*/
#errorColor{
background-color: #fff713; width: 100px;height: 860px;
}
#time{
text-align: center;
color: #ffffff;transform:rotate(180deg);
}
.zhezhao {
display: none; /* 修改这里可以让遮罩层消失*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.7;
filter: alpha(opacity=70);
overflow: hidden;
}
.remove{
display: none; /* 修改这里可以让删除框消失*/
width: 400px;
height:220px;
position: absolute;
top: 200px;
left:670px;
background: #fff;
border-radius: 4px;
}
.removerChid{
margin: 4px;
border: 1px solid #ccc;
}
.removerChid h2{
text-align: center;
}
.removeMain{
margin-top: 38px;
text-align: center;
margin-bottom: 30px;
border-radius: 4px;
}
.removeMain a{
padding: 0 20px;
display: inline-block;
height: 30px;
line-height: 30px;
border-radius: 4px;
border: 1px solid #5e8809;
margin-top: 30px;
background: #99cc33;
color: #fff;
}
</style>
</head>
<body style="background-color: #000000">
<div id="correct" ><div id="correctColor"></div><p id="feiShu">分数：0</p></div>
<div id="error"><div id="errorColor"></div><p id="time"></p></div>
<div id="letter" style="border: solid 5px #18ff0e;height:450px;width:1580px;margin: auto">
<ul id="letterul">
</ul>
</div>
<div style="border: solid 5px #36e101;height:405px;width:1350px;;margin: auto;">
<ul id="ul">
<li>`</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
<li>-</li>
<li>=</li>
<li style="font-size:20px;width: 110px;height:45px;padding-top: 10px">backspace</li>
<li style="font-size:20px;width: 110px;height:45px;padding-top: 10px">tab</li>
<li>Q</li>
<li>W</li>
<li>E</li>
<li>R</li>
<li>T</li>
<li>Y</li>
<li>U</li>
<li>I</li>
<li>O</li>
<li>P</li>
<li>[</li>
<li>]</li>
<li>\</li>
<li style="font-size:20px;width: 145px;height:45px;padding-top: 10px">caps lock</li>
<li>A</li>
<li>S</li>
<li>D</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>;</li>
<li>'</li>
<li style="font-size:20px;width: 145px;height:45px;padding-top: 10px">enter</li>
<li style="font-size:20px;width: 175px;height:45px;padding-top: 10px">shift</li>
<li>Z</li>
<li>X</li>
<li>C</li>
<li>V</li>
<li>B</li>
<li>N</li>
<li>M</li>
<li>,</li>
<li>.</li>
<li>/</li>
<li style="font-size:20px;width: 175px;height:45px;padding-top: 10px">shift</li>
<li style="font-size:20px;width: 80px;height:45px;padding-top: 10px ; margin-top: 5px;">ctrl</li>
<li style="font-size:20px;width: 80px;height:45px;padding-top: 10px ; margin-top: 5px;">fn</li>
<li style="font-size:20px;width: 80px;height:45px;padding-top: 10px ; margin-top: 5px;">田</li>
<li style="font-size:20px;width: 80px;height:45px;padding-top: 10px ; margin-top: 5px;">alt</li>
<li style="border: 1px #18ff0e solid;width: 550px;height:55px;margin-top: 5px;text-align: center;font-size: 35px;">空格</li>
<li style="font-size:20px;width: 80px;height:45px;padding-top: 10px ; margin-top: 5px;">alt</li>
<li style="font-size:20px;width: 80px;height:45px;padding-top: 10px ; margin-top: 5px;">目</li>
<li style="font-size:20px;width: 80px;height:45px;padding-top: 10px ; margin-top: 5px;">ctrl</li>
</ul>
</div>
<div style="display: none">
<audio id="1mp3">
<source src="lettermap3/1.mp3" type="audio/mpeg" />
</audio>
<audio id="2mp3">
<source src="lettermap3/2.mp3" type="audio/mpeg" />
</audio>
<audio id="bjMp3" autoplay loop="loop">
<source src="lettermap3/bj.mp3" type="audio/mpeg" />
</audio>
<audio id="dieMp3">
<source src="lettermap3/die.mp3" type="audio/mpeg" />
</audio>
<audio id="victoryMp3">
<source src="lettermap3/victory.mp3" type="audio/mpeg" />
</audio>
</div>
<div class="zhezhao"></div>
<div class="remove">
<div class="removerChid">
<h2>游戏结束</h2>
<div class="removeMain">
<p></p>
<a href="#" id="yes">再来一把！</a>
<a href="#" >算了！</a>
</div>
</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
var isTrue=false;//判断游戏是否结束：true为结束
var bjMp3=document.getElementById("bjMp3");//背景音乐
var dieMp3=document.getElementById("dieMp3");//游戏结束音效
var victoryMp3=document.getElementById("victoryMp3");//游戏胜利音效
//'q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n','m',
//字母26数组
var letter=[ 'Q','W','E','R','T','Y','U','I','O','P','A','S','D','F','G','H','J','K','L','Z','X','C','V','B','N','M',];
letterNumSize(11);//初始化生成11个字母
//生成字母数量
function letterNumSize(num){
for(var i=0;i<num;i++){
var random=Math.floor(Math.random()*30);//生成1到30之间的随机数
var letterIndex =letter[Math.floor(Math.random()*26)]; //随机生成1到26下标
var $letter = $("#letterul");//那到ul标签
var li=document.createElement("li");//创建一个li标签
li.append(letterIndex);//将字母添加到li
li.style.left=8*(i+1)+"%";//设置每个li的left值
li.style.top=-random+"%";//设置每个li的top值
$letter.append(li);//将li添加到ul
}
}
//字母向下移动
function liDown(){
var child=$('#letterul li');
//循环每一个字母动画
for(var i=0;i<child.length;i++){
if(isTrue==false){//判断游戏是否结束
$("#letterul li").eq(i).animate({
top:"+=1px"
},20);
var div=$("#letter");//外层div
if(child.eq(i).offset().top+child.eq(i).height()>=div.height()){//超出外层的div就删掉
child.eq(i).remove();
progressReduce();//扣除生命值，每次扣一分
}
}else{
//游戏结束删除屏幕上所有字母
child.eq(i).remove();
}
}
}
setInterval(liDown,20);//定时每20毫秒调用字母向下移动方法
setInterval("letterNumSize(11)",7500);//定时每7.5秒调用生成字母方法
//查询落下的随机字母方法
function letterLi(letterContent){
var li=$("#letterul li");//取出落下的随机字母
for(var i=0;i<li.length;i++){
if(li.eq(i).text()==letterContent){//判断传进来的字母跟随机的字母是否相等
li.eq(i).remove();//删除
progress();//调用增加分数进度条方法
var onemp2=document.getElementById("2mp3");
onemp2.play();//得分声效
break;//删除一个字母就跳出循环
}
}
}
//控制虚拟字母键盘的背景颜色
function backgroundColor( index){
var li = $("#ul li");
for(var i=0;i<li.length;i++){
if(index==i){//判断传进的index下标是否跟循环的li的下标相等
li.eq(i).css("background-color","orange");
letterLi(li.eq(i).text());//调用查询落下的随机字母方法，参数传进：当前点击的字母文本
}else{
li.eq(i).css("background-color","#000000");//黑色
}
}
}
//分数
var sizeNum=0;
//分数进度条方法
function progress(){
if(isTrue==false){//判断游戏是否结束
var elem=document.getElementById("correctColor");//取出左边分数div的id
var correct=document.getElementById("correct");//父级div
var feiShu=$("#feiShu");//p标签显示的文本
sizeNum+=2;
elem.style.height=parseInt(sizeNum)+'px';//重新计算分数的背景颜色高度
feiShu.text("分数："+sizeNum);//写入分数
backgroundFadeIn(sizeNum);
if(sizeNum>=correct.offsetHeight){
isTrue=true;//游戏结束
bjMp3.pause();//停止背景音乐
victoryMp3.play();//播放游戏胜利音效
changeDLGContent("世间难得的天才,恭喜你成功打破世界纪录！你的分数是："+sizeNum);//游戏结束显示分数
}
}
}
var timeNum=document.getElementById("errorColor").offsetHeight;//获取到生命进度条的高度
//右边生命进度条减少
function progressReduce(){
var elem=document.getElementById("errorColor");//获取到生命进度条
var time=$("#time");//显示文本的p标签
if(timeNum>=30){
timeNum-=30;
elem.style.height=parseInt(timeNum)+'px';
time.text("剩余："+parseInt(timeNum/30+1)+"点生命值");
backgroundGlint(timeNum);//调用生命值闪烁方法
}else{
elem.style.height=parseInt(0)+'px';
time.text("游戏结束！");
isTrue=true;//游戏结束
bjMp3.pause();//停止背景音乐
dieMp3.play();//播放游戏结束音乐
changeDLGContent("你的分数是："+sizeNum);//游戏结束显示分数
}
}
//生命进度条闪烁方法
function backgroundGlint(timeNum){
$("#errorColor").fadeOut(300).fadeIn(500)//生命条闪烁效果
if(timeNum<300){//判断生命值是否少于10
$("#errorColor").css("background-color","red");//少于10点生命值背景变红色
}
}
//控制分数进度条背景颜色
function backgroundFadeIn(sizeNum){
if(sizeNum>100){//判断分数是否大于300分
$("#correctColor").css("background-color","lightpink");//大于100点分数背景变淡粉色
}
if(sizeNum>200){
$("#correctColor").css("background-color","#5FFFD3");//大于200点分数背景变蓝色
}
if(parseInt(sizeNum)>300){
$("#correctColor").css("background-color","#F527FF");//大于300点分数背景变紫色
}
if(parseInt(sizeNum)>400){
$("#correctColor").css("background-color","#41FF0B");//大于400点分数背景变绿色
}
}
function openYesOrNoDLG(){ //显示遮罩
$('.zhezhao').css('display', 'block');
$('.remove').fadeIn();
}
function cancleBtn(){//关闭遮罩
$('.zhezhao').css('display', 'none');
$('.remove').fadeOut();
}
function changeDLGContent(contentStr){//显示内容
openYesOrNoDLG();//调用显示遮罩
var p = $(".removeMain").find("p");
p.html(contentStr);
}
$(function () {
$('#yes').click(function () {
window.location.reload();//重新加载页面
});
})
onkeypress=function(e){
var keynum=window.event ? e.keyCode : e.which; //获取键盘码
var keychar = String.fromCharCode(keynum);//获取键盘吗对应的字符
var onemp3=document.getElementById("1mp3");
bjMp3.play();//播放背景音乐
onemp3.play();//播放打字声效
switch (keynum){
case 13:
backgroundColor(40);//回车键
bjMp3.pause();//停止背景音乐
break;
case 32:
backgroundColor(57);//空格键
bjMp3.play();//播放背景音乐
break;
}
switch (keychar){
case'`':
backgroundColor(0);
break;
case'1':
backgroundColor(1);
break;
case'2':
backgroundColor(2);
break;
case'3':
backgroundColor(3);
break;
case'4':
backgroundColor(4);
break;
case'5':
backgroundColor(5);
break;
case'6':
backgroundColor(6);
break;
case'7':
backgroundColor(7);
break;
case'8':
backgroundColor(8);
break;
case'9':
backgroundColor(9);
break;
case'0':
backgroundColor(10);
break;
case'-':
backgroundColor(11);
break;
case'=':
backgroundColor(12);
break;
case 'q':
backgroundColor(15);
break;
case 'w':
backgroundColor(16);
break;
case 'e':
backgroundColor(17);
break;
case 'r':
backgroundColor(18);
break;
case 't':
backgroundColor(19);
break;
case 'y':
backgroundColor(20);
break;
case 'u':
backgroundColor(21);
break;
case 'i':
backgroundColor(22);
break;
case 'o':
backgroundColor(23);
break;
case 'p':
backgroundColor(24);
break;
case '[':
backgroundColor(25);
break;
case ']':
backgroundColor(26);
break;
case '\\':
backgroundColor(27);
break;
case 'a':
backgroundColor(29);
break;
case 's':
backgroundColor(30);
break;
case 'd':
backgroundColor(31);
break;
case 'f':
backgroundColor(32);
break;
case 'g':
backgroundColor(33);
break;
case 'h':
backgroundColor(34);
break;
case 'j':
backgroundColor(35);
break;
case 'k':
backgroundColor(36);
break;
case 'l':
backgroundColor(37);
break;
case ';':
backgroundColor(38);
break;
case '\'':
backgroundColor(39);
break;
case 'z':
backgroundColor(42);
break;
case 'x':
backgroundColor(43);
break;
case 'c':
backgroundColor(44);
break;
case 'v':
backgroundColor(45);
break;
case 'b':
backgroundColor(46);
break;
case 'n':
backgroundColor(47);
break;
case 'm':
backgroundColor(48);
break;
case ',':
backgroundColor(49);
break;
case '.':
backgroundColor(50);
break;
case '/':
backgroundColor(51);
break;
/*大写字母*/
case 'Q':
backgroundColor(15);
break;
case 'W':
backgroundColor(16);
break;
case 'E':
backgroundColor(17);
break;
case 'R':
backgroundColor(18);
break;
case 'T':
backgroundColor(19);
break;
case 'Y':
backgroundColor(20);
break;
case 'U':
backgroundColor(21);
break;
case 'I':
backgroundColor(22);
break;
case 'O':
backgroundColor(23);
break;
case 'P':
backgroundColor(24);
break;
case 'A':
backgroundColor(29);
break;
case 'S':
backgroundColor(30);
break;
case 'D':
backgroundColor(31);
break;
case 'F':
backgroundColor(32);
break;
case 'G':
backgroundColor(33);
break;
case 'H':
backgroundColor(34);
break;
case 'J':
backgroundColor(35);
break;
case 'K':
backgroundColor(36);
break;
case 'L':
backgroundColor(37);
break;
case 'Z':
backgroundColor(42);
break;
case 'X':
backgroundColor(43);
break;
case 'C':
backgroundColor(44);
break;
case 'V':
backgroundColor(45);
break;
case 'B':
backgroundColor(46);
break;
case 'N':
backgroundColor(47);
break;
case 'M':
backgroundColor(48);
break;
}
}
</script>
</html>