应用jquery做的js游戏
日期：2014-05-16 浏览次数：20387 次
使用jquery做的js游戏
???? 使用jquery开发的打字练习网页小游戏，用到了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 type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function(){
//浏览器宽度、高度
var cw=document.documentElement.clientWidth;
var ch=document.documentElement.clientHeight;
//字符集
var letters="A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,S,Y,Z";
//随机数
function fRandomBy(under, over){
return parseInt(Math.random()*(over-under+1) + under);
}
//随机字符
function randomLetter(){
var arr=letters.split(",");
return arr[fRandomBy(0,25)];
}
var bombArr=new Array();
var bombObj=function(x){
var letter=randomLetter();
var div=$("<div></div>")
.addClass("bomb")
.css("left",x)
.html(letter)
.appendTo($("body"))
return {
down:function(){
div.animate({"top":ch+"px"},3000,function(){
if(div.css("top")==ch+"px"){
gameOver();
}
});
},
fire:function(){
div.width(100)
.height(100)
.css("background","url(img/explosion.png) no-repeat")
.html("")
.stop();
setTimeout(function(){
div.remove();
},1000);
},
getKey:function(){
return letter;
}
}
}
var planeObj=function(){
var div=$("<div></div>")
.addClass("plane")
.css({
top:"0px",
left:"0px"
})
.appendTo($("body"))
return {
fly:function(){
div.animate({"left":cw+"px"},3000,function(){
$(this).remove();
});
},
dropBomb:function(){
var x=div.css("left");
var left=x.replace("px","");
if(left>0&&cw-left>50){
var bomb=new bombObj(x);
bombArr.push(bomb);
bomb.down();
}
}
}
}
var score=0;
$(document).keydown(function(event){
var arr=letters.split(",");
var str=arr[event.keyCode-65];
for(var i=0;i<bombArr.length;i++){
var bomb=bombArr[i];
if(bomb.getKey()==str){
bomb.fire();
bombArr.splice(i,1);
score++;
$("#scoreBoard").html(score);
}
}
});
function gameOver(){
clearInterval(p1);
clearInterval(p2);
$(".plane").stop().remove();
$(".bomb").stop().remove();
$("#gameBtn").val("重新开始").show();
$("#scoreBoard").html("0");
}
var p1,p2;
$("#gameBtn").click(function(){
$(this).hide();
p1=setInterval(function(){
var plane=new planeObj();
plane.fly();
p2=setInterval(function(){
plane.dropBomb();
}, fRandomBy(700, 1000));
},2000);
});
});
</script>
<title>无标题文档</title>
<style>
body {
overflow:hidden;
width:100%;
background:url(img/qh06-1280.jpg);
}
#scoreBoard {
background:url(img/scorebg.png) no-repeat;
width:100px;
height:100px;
position:absolute;
right:0px;
bottom:0px;
font-size:24px;
font-weight:bold;
text-align:center;
line-height:80px;
}
#gameBtn {
position:absolute;
top:230px;
left:550px;
}
.bomb {
background:url(img/bigbomb.png) no-repeat;
width:56px;
height:81px;
position:absolute;
top:0px;
color:#ffffff;
font-size:20px;
text-align:center;
font-weight:bold;
line-height:110px;
}
.plane {
background:url(img/bomber01.png) no-repeat;
width:200px;
height:50px;
position:absolute;
}
#gameBtn {
background:url(img/btnstart.png) no-repeat;
width:263px;
height:170px;
cursor:pointer;
border:none;
font-size:32px;
text-align:center;
font-weight:bold;
color:#0f0e0c;
line-height:30px;
}
</
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
