游戏名称：键盘字母游戏
<1> 游戏简介：利用键盘字母游戏来帮助使用者熟悉键盘字母的位置，提高手指的灵活性
<2> 游戏类型：典型的益智游戏
<3> 游戏方式：点击开始时，会有很多带有字母的苹果下落，在苹果下落到底部之前，只要按键盘上相应的字母，苹果便会消失，得分框便会加上10分，当得分达到目标分数时，便会进入下一关并且难度系数加大，随着难度的加大，苹果下落的速度也将加快；当苹果下落到底部时，游戏结束，并弹出本次游戏的最终得分；单击重玩，游戏可以重新开始，得分恢复到0分。
<4> 代码分享：(可下载附件)
<html>
<head>
<title>KeyboardGame</title>
<script>
var time; //接住时间
var score=0; //接住分数
var msec=70; //每个500秒刷新一次
var highest=550; //下落的最高值
varletter=newArray("Q","W","E","R","T","Y","U","I","O","P","A","S","D","F","G","H","J","K","L","Z","X","X","C","V","B","N","M");//数组装在26个字母
var InitTop=40;//初始化高度
var evenAddScroe=10;//每次增加的分数
var num1,num2,num3,num4,num5; //开始
function start(){
score=0;
div2.innerHTML=score;
clearInterval(time);
time=setInterval("move()",msec);
document.οnkeydοwn=keydown;//获取键盘
}
//循环下落和统分
function move(){
num1=parseInt(Math.random()*26); //0-25的随机数
num2=parseInt(Math.random()*26); //0-25的随机数
num3=parseInt(Math.random()*26); //0-25的随机数
num4=parseInt(Math.random()*26); //0-25的随机数
num5=parseInt(Math.random()*26); //0-25的随机数
//下落的div1
if(parseInt(div1.style.top) == InitTop){
div1.innerHTML=letter[num1];
}
if(parseInt(div1.style.top) < highest){
div1.style.top=parseInt(div1.style.top)+2;
}else{
clearInterval(time);
alert("游戏结束！本次得分："+score);
}
//下落的div3
if(parseInt(div3.style.top) == InitTop){
div3.innerHTML=letter[num2];
}
if(parseInt(div3.style.top) < highest){
div3.style.top=parseInt(div3.style.top)+3;
}else{
clearInterval(time);
alert("游戏结束！本次得分："+score);
}
//下落的div4
if(parseInt(div4.style.top) == InitTop){
div4.innerHTML=letter[num3];
}
if(parseInt(div4.style.top) < highest){
div4.style.top=parseInt(div4.style.top)+2;
}else{
clearInterval(time);
alert("游戏结束！本次得分："+score);
}
//下落的div5
if(parseInt(div5.style.top) == InitTop){
div5.innerHTML=letter[num4];
}
if(parseInt(div5.style.top) < highest){
div5.style.top=parseInt(div5.style.top)+3;
}else{
clearInterval(time);
alert("游戏结束！本次得分："+score);
}
//下落的div6
if(parseInt(div6.style.top) == InitTop){
div6.innerHTML=letter[num5];
}
if(parseInt(div6.style.top) < highest){
div6.style.top=parseInt(div6.style.top)+1;
}else{
clearInterval(time);
alert("游戏结束！本次得分："+score);
}
}
//接收键盘
function keydown(e){
var KeyName=String.fromCharCode(e.which);
//键盘输入转字符串
if(div1.innerHTML==KeyName){
div1.style.top=InitTop;
div1.innerHTML=letter[num6];
addScroe();
}
if(div3.innerHTML==KeyName){
div3.style.top=InitTop;
div3.innerHTML=letter[num2];
addScroe();
}
if(div4.innerHTML==KeyName){
div4.style.top=InitTop;
div4.innerHTML=letter[num3];
addScroe();
}
if(div5.innerHTML==KeyName){
div5.style.top=InitTop;
div5.innerHTML=letter[num4];
addScroe();
}
if(div6.innerHTML==KeyName){
div6.style.top=InitTop;
div6.innerHTML=letter[num4];
addScroe();
}
}
//统计分数方法
function addScroe(){
score+=evenAddScroe;
div2.innerHTML=score;
if(parseInt(div2.innerHTML)>=200 && parseInt(divAim.innerHTML)==200){
alert("恭喜你进入下一关！");
divAim.innerHTML=300;
div1.style.top=InitTop;
div3.style.top=InitTop;
div4.style.top=InitTop;
div5.style.top=InitTop;
div6.style.top=InitTop;
msec=40; start();
}
if(parseInt(div2.innerHTML)>=300 && parseInt(divAim.innerHTML)==300){
alert("恭喜你进入下一关！");
divAim.innerHTML=400;
div1.style.top=InitTop;
div3.style.top=InitTop;
div4.style.top=InitTop;
div5.style.top=InitTop;
div6.style.top=InitTop;
msec=30; start();
}
if(parseInt(div2.innerHTML)>=400 && parseInt(divAim.innerHTML)==400){
alert("恭喜你进入下一关！");
divAim.innerHTML=500;
div1.style.top=InitTop;
div3.style.top=InitTop;
div4.style.top=InitTop;
div5.style.top=InitTop;
div6.style.top=InitTop;
msec=20; start();
}
if(parseInt(div2.innerHTML)>=500 && parseInt(divAim.innerHTML)==500){
alert("恭喜你进入下一关！");
divAim.innerHTML=600;
div1.style.top=InitTop;
div3.style.top=InitTop;
div4.style.top=InitTop;
div5.style.top=InitTop;
div6.style.top=InitTop;
msec=10;
start();
}
if(parseInt(div2.innerHTML)>=600 && parseInt(divAim.innerHTML)==600){
alert("恭喜你闯关成功！");
}
}
//重新开始游戏方法
function restart(){
clearInterval(time);
div1.style.top=InitTop;
div3.style.top=InitTop;
div4.style.top=InitTop;
div5.style.top=InitTop;
div6.style.top=InitTop;
msec=70;
divAim.innerHTML=200; start();
}
</script>
</head>
<body>
<div style="width:420px;height:600px;background:yellow;border:solid 1px black" >
<button οnclick="start()">Play</button>
<button οnclick="restart()">RePlay</button>
<div id="div1" style="width:50px;height:50px;position:absolute;top:40;left:20px;text-align:center;font-size:30px;background-image:url(001.png);font-color:red">
</div>
<font color="red">
<!--/下落的div-->
<div id="div3" style="width:50px;height:50px;position:absolute;top:40;left:90px;text-align:center;font-size:30px;background-image:url(001.png)">
</div>
<!--/下落的div-->
<div id="div4" style="width:50px;height:50px;position:absolute;top:40;left:160px;text-align:center;font-size:30px;background-image:url(001.png)">
</div>
<!--/下落的div-->
<div id="div5" style="width:50px;height:50px;position:absolute;top:40;left:230px;text-align:center;font-size:30px;background-image:url(001.png)">
</div>
<!--/下落的div-->
<div id="div6" style="width:50px;height:50px;position:absolute;top:40;left:300px;text-align:center;font-size:30px;background-image:url(001.png)">
</div>
<!--/下落的div-->
</font>
<!--显示得分-->
<span style="position:absolute;top:13;left:150px">得分：</span>
<div id="div2" style="width:60px;height:20px;left:190px;top:10;position:absolute;border:solid 1px red;"></div>
<!--显示目标分数-->
<span style="position:absolute;top:13;left:280px">目标分数：</span>
<div id="divAim" style="width:60px;height:20px;left:350px;top:10;position:absolute;border:solid 1pxred;">200</div>
</div>
</body>
</html >
