纯Javascript模仿微信游戏
首先给你看效果图:
下载下载演示源代码
纯Javascript模仿微信打飞机游戏,做网页小游戏的参考,界面设计的垂直长的形式模仿手机的画面风格,游戏效果流畅,成绩统计,其中包括在JS封装类型,建立平面控制飞机运动的行为,创建一个子弹,最小生成随机数之间的马克斯,飞机是否出了边界的判断,如果从边删除,然后取消MouseMove事件,并与MouseMove事件,暂停界面添加按钮暂停事件,造成敌人的飞机,碰撞,完成接口的初始化,一个小的敌人飞机A,我们的飞机
获取主接口
复制代码代码如下所示:
无功maindiv = document.getelementbyid(maindiv );
获取启动接口
复制代码代码如下所示:
无功startdiv = document.getelementbyid(startdiv );
获取游戏比分显示界面
复制代码代码如下所示:
无功scorediv = document.getelementbyid(scorediv );
分数接口
复制代码代码如下所示:
无功scorelabel = document.getelementbyid(标签);
挂起/接口
复制代码代码如下所示:
无功suspenddiv = document.getelementbyid(suspenddiv );
获取/结束游戏界面
复制代码代码如下所示:
无功enddiv = document.getelementbyid(enddiv );
获取游戏比分统计界面
复制代码代码如下所示:
无功planscore = document.getelementbyid(planscore );
初始化部分
var分数=;
*
创建一类飞机
* /
功能规划(HP,X,Y,尺寸,尺寸Y,得分,dietime,速度,boomimage,imagesrc){
这普兰克斯= x;
这玩= Y;
这imagenode = null;
这planhp =马力;
这planscore =得分;
这plansizex =尺寸;
这plansizey =尺寸Y;
这planboomimage = boomimage;
这planisdie = false;
这plandietimes =;
这plandietime = dietime;
这plansudu =速度;
行为
*
移动的行为
* /
这个planmove =函数(){
如果(分数< =){
这个imagenode。风格。=这。imagenode。offsettop +本。plansudu +PX;
}
否则如果(分数> < =){
这个imagenode。风格。=这。imagenode。offsettop +本。plansudu +PX;
}
否则如果(分数> < =){
这个imagenode。风格。=这。imagenode。offsettop +本。plansudu +PX;
}
否则如果(分数> < =){
这个imagenode。风格。=这。imagenode。offsettop +本。plansudu +PX;
}
否则如果(分数> < =){
这个imagenode。风格。=这。imagenode。offsettop +本。plansudu +PX;
}
别的{
这个imagenode。风格。=这。imagenode。offsettop +本。plansudu +PX;
}
}
此函数=(){
这个imagenode = document.element(IMG);
这个imagenode。风格。左=这。普兰克斯+PX;
这个imagenode。风格。=这。玩+PX;
这个imagenode。src= imagesrc;
maindiv.appendchild(这个。imagenode);
}
This.init();
}
*
创建子弹
* /
函数(x,y,子弹尺寸,尺寸Y,imagesrc){
这bulletx = x;
本。博瑞泰克= Y;
这bulletimage = null;
这bulletattach =;
这bulletsizex =尺寸;
这bulletsizey =尺寸Y;
行为
*
移动的行为
* /
这个bulletmove =函数(){
这个bulletimage。风格。=这。bulletimage。offsettop +PX;
}
此函数=(){
这个bulletimage = document.element(IMG);
这个bulletimage。风格。左为本。bulletx +PX;
这个bulletimage。风格。=这。博瑞泰克+PX;
这个bulletimage。src= imagesrc;
maindiv.appendchild(这个。bulletimage);
}
This.init();
}
*
创建一行子弹
* /
功能oddbullet(x,y){
bullet.call(x,y,,,图像/子弹。png);
}
*
创建敌人类
* /
敌人函数(HP,A,B,尺寸,尺寸Y,得分,dietime,速度,boomimage,imagesrc){
(这plan.call,惠普,随机(A,B),-尺寸,尺寸Y,得分,dietime,速度,boomimage,随机);
}
马克斯之间的随机数
函数随机(最小,最大){
返回math.floor(最小Math.random()* +(max-min));
}
*
创建本地飞机类
* /
函数(x,y){我们的计划
无功imagesrc =图像/我的飞机。gif;
plan.call(X,Y,,,,,,, 图像/这方面爆炸。GIF
this.imagenode.setattribute('id','ourplan);
}
*
创建局部平面
* /
无功selfplan =新的计划(,);
移动/事件
VaR的计划= document.getelementbyid('ourplan);
东=函数(){ var
无功oevent =窗口。事件| |论点{ };
VaR荸荠= oevent。srcelement | | oevent.target;
无功selfplanx = oevent.clientx-;
无功selfplany = oevent.clienty;
我们的计划。风格。左= selfplanx selfplan。plansizex / +PX;
我们的计划。风格。最高selfplany selfplan。plansizey / +PX;
/ / document.getelementsbytagname('img){ }。风格。左= selfplanx selfplan。plansizex / + PX;
/ / document.getelementsbytagname('img){ } ..风格。最高selfplany selfplan。plansizey / + PX;
}
*
暂停
* /
var数字=;
暂停=函数(){ var
如果(数字=){
suspenddiv。风格。显示为块;
如果(文件。removeEventListener){
MainDiv.removeEventListener(MouseMove
Bodyobj.removeEventListener(MouseMove
}
如果(文件。detachevent){
maindiv.detachevent(onmousemove
bodyobj.detachevent(onmousemove
}
ClearInterval(集);
数=;
}
别的{
suspenddiv。风格。显示为无;
如果(文件。addEventListener){
MainDiv.addEventListener(MouseMove
Bodyobj.addEventListener(MouseMove
}
如果(文件。attachevent){
maindiv.attachevent(onmousemove
bodyobj.attachevent(onmousemove
}
设置= setInterval(开始);
数=;
}
}
飞机从 / /判断边界,如果从边删除,然后取消MouseMove事件,与MouseMove事件
边界=函数(){ var
无功oevent =窗口。事件| |论点{ };
无功bodyobjx = oevent.clientx;
无功bodyobjy = oevent.clienty;
如果(bodyobjx | | bodyobjy){
如果(文件。removeEventListener){
MainDiv.removeEventListener(MouseMove
}
如果(文件。detachevent){
maindiv.detachevent(onmousemove
}
}
别的{
如果(文件。addEventListener){
MainDiv.addEventListener(MouseMove
}
如果(文件。attachevent){
maindiv.attachevent(nomousemove
}
}
}
开始/暂停事件接口
/ /功能chongxinkaishi(){
/ / location.reload(真的);
没有 / / startdiv。风格。显示=;
块 / / maindiv。风格。显示=;
/