飞机大战-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();//调用初始化飞机页面显示
}
- 创建我方飞机(飞机的移动采用跟随鼠标,event.clientX/Y);
function ourPlane(x,y){
//this当前的对象ourPlane;
var srcImage="img/plane.gif";
commonPlane.call(this,x,y,66,80,srcImage);
}- 这里还涉及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 控件自身的高度,整型,单位像素。