js实现简单游戏-键盘字母游戏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="js/jquery-1.8.2.min.js"></script>
<title>页面分页</title>
<style>
body{
}
.panle{
width: 1000px;
height: 500px;
margin: 0 auto;
border: 1px solid red;
margin-top: 20px;
}
.content{
text-align: center;
}
.menu{
text-align: center;
}
button{
width: 80px;
height: 30px;
margin-top: 20px;
}
.panle span{
font-size: 24px;
color: #00a;
border: 1px solid ;
}
</style>
</head>
<body>
<div style="text-align:center">消灭<span id="score" style="color:red">0</span>字母</div>
<div class="panle">
</div>
<div class="menu">
<button id="start" flag="flag">开始</button>
<button id="pause">暂停</button>
</div>
</body>
<script>
$(function(){
var time1,time2;
var score=0;
$("#start").click(function(){
//增加flag是防止无限点击开始，让定时器字母的下落和出现增快
if($("#start").attr("flag")=="flag"){
time1= window.setInterval("myInterval()",1000);//1000为1秒钟
time2 = window.setInterval("down()",500);//1000为1秒钟
$("#start").attr("flag","");
}
document.onkeydown = keydown;
});
$("#pause").click(function(){
clearInterval(time1);
clearInterval(time2);
$("#start").attr("flag","flag");
// 阻止事件冒泡（防止暂停之后抵消字母）
document.onkeydown = function (e) {
e.returnValue = false;
return false;
}
});
//随机出现字母
myInterval=function()
{ var arry=new Array("a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z");
var index=Math.round(Math.random()*25);
var widthran=Math.round(Math.random()*1000);
$(".panle").append('<span style="position:absolute;margin-left:'+widthran+'px">'+arry[index]+'</span>')
}
//字母下落
down=function(){
var heigh=Math.round(Math.random());
var length=$(".panle span").length;
for (var i = 0; i <length ; i++) {
$(".panle span:eq("+i+")").css("margin-top",$(".panle span:eq("+i+")").offset().top+heigh);
if($(".panle span:eq("+i+")").offset().top>=500){
//字母落地
$(".panle span:eq("+i+")").remove();
}
}
// $(".panle span").css("margin-top",$(".panle span").offset().top+heigh);
}
//键盘与字母匹配
function keydown(){
var keycode = event.keyCode;
var length=$(".panle span").length;
for (var i = 0; i <length ; i++) {
//alert($(".panle span:eq("+i+")").html().charCodeAt())
if((keycode+32)== $(".panle span:eq("+i+")").html().charCodeAt()){
$(".panle span:eq("+i+")").remove();
score=score+1;
$("#score").html(score);
return;
}
}
}
})
</script>
</html>
