飞机大战-1

飞机大战-1

这几天由于在和同学做项目，也没有时间总结其它的，就把前段时间做的飞机大战，思路加部分代码写出来，留作自己或他人观看（分五个阶段）；（今天实现点击开始按钮，主界面上出现飞机）
1、页面分析：
1.开始页面（点击开始游戏时，隐藏开始界面，出现主界面-（js中object.style.display=”block”））下图是开始界面，开始按钮自己添加；

2、主界面，我方飞机（下面是素材）

3、进入今天的正题：
由于敌我双方都是飞机，那是不是该创建一个飞机对象呢？ （这个对象里包括敌我双方都有的属性）//下面是开始的思想，开始考虑飞机的属性（飞机出现在图片中的位置（x,y）,尺寸（sizeX/Y）,图片（srcImage））后面还有很多属性，今天只考虑出现我方飞机并且飞机在正下方；

function commonPlane(x,y,sizeX,sizeY,srcImage){       this.planeX=x;    this.planeY=y;    this.planeSizex=sizeX;    this.planeSizey=sizeY    this.planeSrcImage=srcImage;    this.init=function(){//初始化飞机        this.oImg=document.createElement("img");        this.oImg.style.left=this.planeX+"px";        this.oImg.style.top=this.planeY+"px";        this.oImg.src=srcImage;        main.appendChild(this.oImg);    }    this.init();//调用初始化飞机页面显示    }

1. 创建我方飞机（飞机的移动采用跟随鼠标，event.clientX/Y）；
   
   1. function ourPlane(x,y){
var srcImage="img/plane.gif";
commonPlane.call(this,x,y,66,80,srcImage);
}//this当前的对象ourPlane;
   2. 这里还涉及call的用法可以参考（http://chtq.iteye.com/blog/393064）
      call–冒充对象 A call B—–B继承A的所有属性（避免重复写共同的代码）；
      3.飞机的移动：参数的传递、鼠标坐标的获取（（event/window.event).clientX/Y）

var myPlane=new ourPlane(120,485);//我方飞机的移动；function moveMplane(){    var e=event||window.event;    myPlane.oImg.style.left= e.clientX-533+"px";//改变飞机绝对定位；    myPlane.oImg.style.top= e.clientY-40+"px";}

/规定界限（由于是body的mousemove事件）采用判断移除事件（object.removeEventListener(,,)）/这里没做浏览器兼容的判断/，自己先用，看飞机的移动范围

//好奇的新手可以试着做做；

————-额外：
1.var p=new pro()：p.proto=pro.prototype
3.obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。