学习了JS四天有余，想利用现在所学的一点知识写一个简单的打飞机小游戏。
功能：
1 能够通过上下左右键控制小飞机的移动
2 能够通过按空格键 让小飞机发射***
3 敌方飞机能够随机出现在上方（目前敌方飞机随机出现的位置需要刷新一次才能改变。。需后续改进）
4 发射的***击中敌方飞机能够弹出“boom”提示框
首先，定义了小飞机对象，我使用的是工厂的方式
对象中的属性：小飞机的宽度、小飞机的高度、飞机div对象、
对象中的方法函数：初始化小飞机，实现小飞机根据键盘按键而移动以及开火。
function Plane(){
var plane = new Object();
plane.width = 40;
plane.height = 48;
document.write(‘<div id="box"><div id="plane"></div></div>‘);//box是一个大框，在这个大框中实现打飞机游戏
plane.p =document.getElementById(‘plane‘);
plane.box = document.getElementById(‘box‘);
plane.sty = function (){
p = this.p;
p.style.width = this.width;
p.style.height = this.height;
p.style.backgroundImage = "url(./imgs/z5.png)";
p.style.position = ‘absolute‘;
}
plane.move = (window.onkeydown=function (e){//使用onkeydown键盘事件，实现按键小飞机移动以及开火，不建议使用onkeypress
var p = this.p;
var b = this.box;
var e = e ||window.event;
switch(e.keyCode){
case 37://zuo
p.style.left = Math.max(p.offsetLeft-10,0)+‘px‘;//不能超过边界
break;
case 38://shang
p.style.top = Math.max(p.offsetTop-10,0)+‘px‘;
break;
case 39://you
p.style.left = Math.min(p.offsetLeft+10,b.offsetWidth-p.offsetWidth)+‘px‘;
break;
case 40://xia
p.style.top = Math.min(p.offsetTop+10,b.offsetHeight-p.offsetHeight)+‘px‘;
break;
case 32:
bullet.fire(p.offsetLeft+p.offsetWidth/2,p.offsetTop);//调用了Bullet对象中的fire方法，实参是***应该显示的位置
break;
}
})
return plane;
}
然后，定义***对象
***对象的属性：宽、高、边界框内能够同时显示***的个数、边界框内当前显示的***个数，***的位置信息
***对象的方法函数：能够动态控制边框内能够同时显示的***个数，初始化***的样式，发射***，***发射后向边框上部飞出，获取***的位置（offsetLeft,offsetTop）
function Bullet(num){
var bullet = new Object();
bullet.width = 3;
bullet.height =17;
bullet.num = num;//边界框内同时显示***的个数
bullet.j;//边界框内当前显示的***个数
bullet.bs = create();//创建div对象，并且返回***div对象
bullet.info=new Array;//***的位置信息
function create(){
bul = new Array();
for(var i=0;i<num;i++){
var b = document.createElement(‘div‘);
bul[i] = this.box.appendChild(b);
}
//alert(bul);
return bul;
};
bullet.box = document.getElementById(‘box‘);//获取边界框对象
bullet.plane = document.getElementById(‘plane‘);//获取飞机对象
//让***能够飞起来，周期性执行fly方法
bullet.fly = function (){
for(var i=0;i<num;i++){//遍历所有的***div对象
var b = this.bs[i];
if(b.style.display==‘block‘){//如果当前***是已经发射的，那么***的高度自身减10px
b.style.top = (b.offsetTop-10)+‘px‘;
}
if(b.offsetTop<0){//如果***已经超出了边界，则***的display为none
b.style.display = ‘none‘;
}
this.getInfo(b,i);//调用getInfo函数，能够获取***当前的位置信息，实参分别是***对象以及索引
}
}
setInterval(‘bullet.fly()‘,‘100‘);//周期性执行fly，使***飞起来
bullet.sty = function (){//初始化***
for(var i=0;i<num;i++){
var b = this.bs[i];
p = this.plane;
b.style.width = this.width;
b.style.height = this.height;
b.style.backgroundImage = "url(./imgs/bullet.png)";
b.style.position = ‘absolute‘;
b.style.display = ‘none‘;
}
}
var inf = new Array();//声明一个数组，用来存放***位置信息
bullet.getInfo = function (b,i){
if(b.style.display==‘block‘){//如果***在边界框内则把***的位置信息存入数组
inf[i]=[b.offsetLeft,b.offsetTop];
this.info = inf;
//document.title = this.info;
}
}
bullet.j = 0;//初始化边界内显示的当前***个数
bullet.fire = function(x,y){//在小飞机对象中调用了本方法，传进来的参数是***应该显示的位置
//alert(this.bs);
if(this.j>num-1){如果个数超过了最大显示***个数，则从0开始计数
this.j=0;
}
var b = this.bs[this.j];
if(b.style.display==‘none‘){//如果***超出边界框设置为不显示，则能够再次显示，俗称补充弹药
b.style.display = ‘block‘;
}
b.style.left = x+‘px‘;//设置***的位置
b.style.top=y+‘px‘;
this.j++;
}
return bullet;
}
接着，声明一个敌人对象
敌人对象属性：宽、高、边界框内能够显示的最大个数，敌人对象的位置信息，边界框内当前显示的敌人个数
敌人对象方法：能够动态控制边框内能够同时显示的***个数、初始化敌人样式、周期性执行显示敌人，周期性让敌人不停的往下飞，获取敌人的位置信息，周期性判断***有没有打中敌人
function Enemy(num){
var enem = new Object();
enem.width = 40;
enem.height =48;
enem.num = num;//边界框内最多显示敌人个数
enem.k;//当前边界框内显示的敌人个数
enem.boom=0;
enem.es = create();
enem.box = document.getElementById(‘box‘);
enem.info = new Array();
function create(){//动态创建敌人div对象，返回敌人对象
ene = new Array();
for(var i=0;i<num;i++){
var e = document.createElement(‘div‘);
ene[i] = this.box.appendChild(e);
}
//alert(bul);
return ene;
}
enem.styl = function(){
var b = this.box;
for(var i=0;i<num;i++){
var en = this.es[i];
en.style.width = this.width;
en.style.height = this.height;
en.style.backgroundImage = "url(./imgs/enemy.png)";
en.style.position = ‘absolute‘;
en.style.display = ‘none‘;
en.style.left = getRandom(0,b.offsetWidth-this.width);//敌人出现的位置随机，但是不超出边界框
}
}
function getRandom(min,max){//随机
return (max-min)*Math.random()+min;
}
enem.k = 0;//初始化定义当前边界框内显示的敌人个数
setInterval(function(){//周期性执行，如果敌人对象不显示，则重新从边界框上部显示
if(enem.k>num-1){
enem.k=0;
}
var en = enem.es[enem.k];
if(en.style.display==‘none‘){
en.style.top=‘0px‘;
en.style.display = ‘block‘;
}
enem.k++;//统计当前敌人个数
},getRandom(0,1000));
setInterval(function(){//周期性执行让敌人显示，并且向下降 如果敌人一直下降到边界框外部，则不显示
var b = enem.box;
for(var i=0;i<num;i++){
var en = enem.es[i];
if(en.style.display==‘block‘){
//alert(b.offsetTop-10);
en.style.top = (en.offsetTop+10)+‘px‘;
}
if(en.offsetTop>b.offsetHeight-en.offsetHeight){
en.style.display = ‘none‘;
}
enem.getInfo(en,i);
}
},‘100‘)
var infom =new Array();
enem.getInfo = function (en,i){//获取敌人的位置信息
if(en.style.display==‘block‘){
infom[i]=[en.offsetLeft,en.offsetTop];
this.info = infom;
//document.title = this.info;
}
}
//document.title = enem.info;
//周期性判断***有没有打中敌人
setInterval(function(){
var b_num = bullet.num;
var e_num = enem.num;
var e_i = new Array();
var b_i = new Array();
for(var i=0;i<enem.k;i++){//循环遍历所有敌人对象
e_i[i] = enem.info[i];//获取敌人的位置信息
e_b_l = e_i[i][0];//获取敌人的offsetLeft
e_b_r = e_i[i][0]+enem.width;//获取敌人的右侧距离左边界的距离
e_b_h = e_i[i][1];//获取敌人的offsetTop
e_b_t = e_i[i][1]+enem.height;//获取敌人的下部到上边界的距离
for(var j=0;j<bullet.j;j++){//循环遍历所有***信息
b_i[j] = bullet.info[j];//获取***的位置信息
b_b_l = b_i[j][0];//获取***的offsetLeft
b_b_r = b_i[j][0]+bullet.width;//获取***的右部到左边界的距离
b_b_t = b_i[j][1];//获取***的offsetTop
if(e_b_t>b_b_t&&b_b_t>e_b_h){//判断***与敌人有么有相撞
if(e_b_l<b_b_l&&e_b_r>b_b_r){
enem.boom++;
alert(‘boom‘);
}
}
}
}
},‘1‘);
return enem;
}
在三个对象外部，分别调用，然后打飞机小游戏的初步功能就实现了！
刚刚开始学JS，对JS的对象的理解还不是很深刻，有的时候使用的PHP的思维方式，感觉写得不是很完美，心里有点不自在，有些地方在写博客的时候也感觉到了不足，今后会改正。
另外敌方小飞机的只有通过刷新，才会改变位置，这个是后期需要改正的，***碰撞了敌人之后，应该消失，但是本方法中还没有实现，击中敌人后依然能够击中再次出现的敌人。。。这个也需要改进。
写得第一个JS小玩意儿让我感受到了JS的乐趣，但是也感受到了JS的痛苦！！！！
时间： 2024-08-07 03:21:18