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>
<title>Print Game</title>
<script type="text/javascript" src="jquery-1.6.js"></script>
<script type="text/javascript">
$(function(){
//全局变量
var chars=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","1","2","3","4","5","6","7","8","9"); //字符数组
var char_num=chars.length; //随机的字符数字
var mainpanel_width=400; //主区域宽度
var mainpanel_height=500; //主区域高度
var totalNum=25; //字符总数
var hitCount=0; //击中数
var leftCount=0; //页面剩余数
//设置主区域的边界
$("#mainpanel").width(mainpanel_width).height(mainpanel_height);
//产生一个随机数 从开始覆盖上边界
function randNum(under, over){
switch(arguments.length){
case 1: return parseInt(Math.random()*under+1)-1;
case 2: return parseInt(Math.random()*(over-under+1) + under)-1;
default: return 0;
}
}
//产生一个随机的颜色
function randColor(){
var colors=new Array("1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
var color="#";
for(var i=0;i<6;i++)
{
color+=colors[randNum(colors.length)];
}
return color;
}
//生产一个字符
function productChar(){
leftCount++;
$("#leftCount").text(leftCount);
return $("<div class='char'>"+chars[randNum(char_num)]+"</div>").css({"margin-top":randNum(0,mainpanel_height-30),"margin-left":randNum(0,mainpanel_width-30),"background":randColor(),"color":"black"});
}
//定时产生字符
var tidck;
function startGame(){
tidck=window.setInterval(function(){
//game success
if(leftCount+hitCount==totalNum){
alert("game over,your score is "+hitCount*(100/totalNum));
stopGame();
return false;
}
$("#mainpanel").append(productChar());
},randNum(300,600));
}
function stopGame()
{
clearInterval(tidck);
$(".char").each(function(){
$(this).remove();
});
hitCount=0;
leftCount=0;
$("#hitCount").text("+0")
$("#leftCount").text("0");
}
$("#btnStart").click(function(){
startGame();
});
//监听键盘事件
$(document).keydown(function(event){
var target=String.fromCharCode(event.keyCode);
$(".char").each(function(){
if(target==$(this).text())
{
$(this).hide(300,function(){
$(this).remove();});
hitCount++;
leftCount--;
$("#hitCount").text("+"+hitCount).animate({fontSize:"3em"},"fast").animate({fontSize:"1em"});
$("#leftCount").text(leftCount);
return false;
}
});
});
});
</script>
<style type="text/css">
body{
font-family:cursive;
}
input{
font-family:cursive;
}
.char{
position:absolute;
width:30px;
height:30px;
font-size:20p;
text-align:center;
}
</style>
</head>
<body>
<div id="mainpanel" style="border:solid 2px gray;float:left;">
</div>
<div id="rightpanel" style="border:solid 2px gray;width:200px;height:500px;float:left;margin-left:20px;">
<input id="btnStart" type="button" value="Start" />
<br/>
hit：
<div id="hitCount" style=" height:40px;">
+0
</div>
<br/>
left：
<div id="leftCount">
0
</div>
</div>
</body>
</html>
截图：
