纯javascript模仿微信打飞机小游戏


Posted in Javascript onAugust 20, 2015

七夕情人节也不要忘了打游戏喔喔~,下面小编为大家准备的情人节礼物之纯javascript模仿微信打飞机小游戏分享给天下的情人们。

首先给大家展示效果图:

纯javascript模仿微信打飞机小游戏

查看演示       源码下载

纯JavaScript模仿微信打飞机游戏,做网页小游戏的借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅。具有分数统计,里面的JS封装类中包括有创建飞机类、飞机移动行为控制,创建子弹类,产生min到max之间的随机数,判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemove事件,为暂停界面的继续按钮添加暂停事件,创建敌方飞机类、碰撞判断、完成界面的初始化,敌方小飞机一个,我方飞机一个。

    //获得主界面

var mainDiv=document.getElementById("maindiv");

   //获得开始界面

var startdiv=document.getElementById("startdiv");

    //获得游戏中分数显示界面

var scorediv=document.getElementById("scorediv");

    //获得分数界面

var scorelabel=document.getElementById("label");

    //获得暂停界面

var suspenddiv=document.getElementById("suspenddiv");

    //获得游戏结束界面

var enddiv=document.getElementById("enddiv");

    //获得游戏结束后分数统计界面

var planscore=document.getElementById("planscore");

    //初始化分数

var scores=;
/*
 创建飞机类
 */
function plan(hp,X,Y,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){
 this.planX=X;
 this.planY=Y;
 this.imagenode=null;
 this.planhp=hp;
 this.planscore=score;
 this.plansizeX=sizeX;
 this.plansizeY=sizeY;
 this.planboomimage=boomimage;
 this.planisdie=false;
 this.plandietimes=;
 this.plandietime=dietime;
 this.plansudu=sudu;

//行为

/*
移动行为
 */
 this.planmove=function(){
 if(scores<=){
 this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+"px";
 }
 else if(scores>&&scores<=){
 this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px";
 }
 else if(scores>&&scores<=){
 this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px";
 }
 else if(scores>&&scores<=){
 this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px";
 }
 else if(scores>&&scores<=){
 this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px";
 }
 else{
 this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px";
 }
 }
 this.init=function(){
 this.imagenode=document.Element("img");
 this.imagenode.style.left=this.planX+"px";
 this.imagenode.style.top=this.planY+"px";
 this.imagenode.src=imagesrc;
 mainDiv.appendChild(this.imagenode);
 }
 this.init();
}
/*
创建子弹类
 */
function bullet(X,Y,sizeX,sizeY,imagesrc){
 this.bulletX=X;
 this.bulletY=Y;
 this.bulletimage=null;
 this.bulletattach=;
 this.bulletsizeX=sizeX;
 this.bulletsizeY=sizeY;


//行为
/*
 移动行为
 */
 this.bulletmove=function(){
 this.bulletimage.style.top=this.bulletimage.offsetTop-+"px";
 }
 this.init=function(){
 this.bulletimage=document.Element("img");
 this.bulletimage.style.left= this.bulletX+"px";
 this.bulletimage.style.top= this.bulletY+"px";
 this.bulletimage.src=imagesrc;
 mainDiv.appendChild(this.bulletimage);
 }
 this.init();
}
/*
 创建单行子弹类
 */
function oddbullet(X,Y){
 bullet.call(this,X,Y,,,"image/bullet.png");
}


/*
创建敌机类
 */


function enemy(hp,a,b,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){
 plan.call(this,hp,random(a,b),-,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc);
}


//产生min到max之间的随机数


function random(min,max){
 return Math.floor(min+Math.random()*(max-min));
}


/*
创建本方飞机类
 */


function ourplan(X,Y){
 var imagesrc="image/我的飞机.gif";
 plan.call(this,,X,Y,,,,,,"image/本方飞机爆炸.gif",imagesrc);
 this.imagenode.setAttribute('id','ourplan');
}


/*
 创建本方飞机
 */


var selfplan=new ourplan(,);


//移动事件


var ourPlan=document.getElementById('ourplan');
var yidong=function(){
 var oevent=window.event||arguments[];
 var chufa=oevent.srcElement||oevent.target;
 var selfplanX=oevent.clientX-;
 var selfplanY=oevent.clientY;
 ourPlan.style.left=selfplanX-selfplan.plansizeX/+"px";
 ourPlan.style.top=selfplanY-selfplan.plansizeY/+"px";


// document.getElementsByTagName('img')[].style.left=selfplanX-selfplan.plansizeX/+"px";


// document.getElementsByTagName('img')[]..style.top=selfplanY-selfplan.plansizeY/+"px";


}


/*
暂停事件
 */
var number=;
var zanting=function(){
 if(number==){
 suspenddiv.style.display="block";
 if(document.removeEventListener){
 mainDiv.removeEventListener("mousemove",yidong,true);
 bodyobj.removeEventListener("mousemove",bianjie,true);
 }
 else if(document.detachEvent){
 mainDiv.detachEvent("onmousemove",yidong);
 bodyobj.detachEvent("onmousemove",bianjie);
 }
 clearInterval(set);
 number=;
 }
 else{
 suspenddiv.style.display="none";
 if(document.addEventListener){
 mainDiv.addEventListener("mousemove",yidong,true);
 bodyobj.addEventListener("mousemove",bianjie,true);
 }
 else if(document.attachEvent){
 mainDiv.attachEvent("onmousemove",yidong);
 bodyobj.attachEvent("onmousemove",bianjie);
 }
 set=setInterval(start,);
 number=;
 }
}
//判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemove事件
var bianjie=function(){
 var oevent=window.event||arguments[];
 var bodyobjX=oevent.clientX;
 var bodyobjY=oevent.clientY;
 if(bodyobjX<||bodyobjX>||bodyobjY<||bodyobjY>){
 if(document.removeEventListener){
 mainDiv.removeEventListener("mousemove",yidong,true);
 }
 else if(document.detachEvent){
 mainDiv.detachEvent("onmousemove",yidong);
 }
 }
 else{
 if(document.addEventListener){
 mainDiv.addEventListener("mousemove",yidong,true);
 }
 else if(document.attachEvent){
 mainDiv.attachEvent("nomousemove",yidong);
 }
 }
}

//暂停界面重新开始事件

//function chongxinkaishi(){
// location.reload(true);
// startdiv.style.display="none";
// maindiv.style.display="block";
//}

var bodyobj=document.getElementsByTagName("body")[];
if(document.addEventListener){
 //为本方飞机添加移动和暂停
 mainDiv.addEventListener("mousemove",yidong,true);
 //为本方飞机添加暂停事件
 selfplan.imagenode.addEventListener("click",zanting,true);
 //为body添加判断本方飞机移出边界事件
 bodyobj.addEventListener("mousemove",bianjie,true);
 //为暂停界面的继续按钮添加暂停事件
 suspenddiv.getElementsByTagName("button")[].addEventListener("click",zanting,true);
// suspenddiv.getElementsByTagName("button")[].addEventListener("click",chongxinkaishi,true);
 //为暂停界面的返回主页按钮添加事件
 suspenddiv.getElementsByTagName("button")[].addEventListener("click",jixu,true);
}
else if(document.attachEvent){
 //为本方飞机添加移动
 mainDiv.attachEvent("onmousemove",yidong);
 //为本方飞机添加暂停事件
 selfplan.imagenode.attachEvent("onclick",zanting);
  //为body添加判断本方飞机移出边界事件
 bodyobj.attachEvent("onmousemove",bianjie);
 //为暂停界面的继续按钮添加暂停事件
 suspenddiv.getElementsByTagName("button")[].attachEvent("onclick",zanting);
// suspenddiv.getElementsByTagName("button")[].attachEvent("click",chongxinkaishi,true);
 //为暂停界面的返回主页按钮添加事件
 suspenddiv.getElementsByTagName("button")[].attachEvent("click",jixu,true);
}
//初始化隐藏本方飞机
selfplan.imagenode.style.display="none";
/*
敌机对象数组
 */
var enemys=[];
/*
子弹对象数组
 */
var bullets=[];
var mark=;
var mark=;
var backgroundPositionY=;
/*
开始函数
 */
function start(){
 mainDiv.style.backgroundPositionY=backgroundPositionY+"px";
 backgroundPositionY+=.;
 if(backgroundPositionY==){
 backgroundPositionY=;
 }
 mark++;
 /*
 创建敌方飞机
 */
 if(mark==){
 mark++;
  //中飞机
 if(mark%==){
 enemys.push(new enemy(,,,,,,,random(,),"image/中飞机爆炸.gif","image/enemy_fly_.png"));
 }
  //大飞机
 if(mark==){
 enemys.push(new enemy(,,,,,,,,"image/大飞机爆炸.gif","image/enemy_fly_.png"));
 mark=;
 }
 //小飞机
 else{
 enemys.push(new enemy(,,,,,,,random(,),"image/小飞机爆炸.gif","image/enemy_fly_.png"));
 }
 mark=;
 }
/*
移动敌方飞机
 */
 var enemyslen=enemys.length;
 for(var i=;i<enemyslen;i++){
 if(enemys[i].planisdie!=true){
 enemys[i].planmove();
 }
/*
 如果敌机超出边界,删除敌机
 */
 if(enemys[i].imagenode.offsetTop>){
 mainDiv.removeChild(enemys[i].imagenode);
 enemys.splice(i,);
 enemyslen--;
 }
 //当敌机死亡标记为true时,经过一段时间后清除敌机
 if(enemys[i].planisdie==true){
 enemys[i].plandietimes+=;
 if(enemys[i].plandietimes==enemys[i].plandietime){
 mainDiv.removeChild(enemys[i].imagenode);
 enemys.splice(i,);
 enemyslen--;
 }
 }
 }
/*
创建子弹
*/
 if(mark%==){
 bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+,parseInt(selfplan.imagenode.style.top)-));
 }
/*
移动子弹
*/
 var bulletslen=bullets.length;
 for(var i=;i<bulletslen;i++){
 bullets[i].bulletmove();
/*
如果子弹超出边界,删除子弹
*/
 if(bullets[i].bulletimage.offsetTop<){
 mainDiv.removeChild(bullets[i].bulletimage);
 bullets.splice(i,);
 bulletslen--;
 }
 }
/*
碰撞判断
*/
 for(var k=;k<bulletslen;k++){
 for(var j=;j<enemyslen;j++){
 //判断碰撞本方飞机
 if(enemys[j].planisdie==false){
 if(enemys[j].imagenode.offsetLeft+enemys[j].plansizeX>=selfplan.imagenode.offsetLeft&&enemys[j].imagenode.offsetLeft<=selfplan.imagenode.offsetLeft+selfplan.plansizeX){
  if(enemys[j].imagenode.offsetTop+enemys[j].plansizeY>=selfplan.imagenode.offsetTop+&&enemys[j].imagenode.offsetTop<=selfplan.imagenode.offsetTop-+selfplan.plansizeY){
  //碰撞本方飞机,游戏结束,统计分数
  selfplan.imagenode.src="image/本方飞机爆炸.gif";
  enddiv.style.display="block";
  planscore.innerHTML=scores;
  if(document.removeEventListener){
  mainDiv.removeEventListener("mousemove",yidong,true);
  bodyobj.removeEventListener("mousemove",bianjie,true);
  }
  else if(document.detachEvent){

以上代码简单吧,使用纯javascript模仿微信打飞机小游戏,当时方法还有很多种,欢迎大家一起来分享。

Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
jQuery 动态酷效果实现总结
Dec 27 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
详解JavaScript中的this指向问题
Feb 05 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 #Javascript
js图片翻书效果代码分享
Aug 20 #Javascript
JS给Textarea文本框添加行号的方法
Aug 20 #Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 #Javascript
javascript如何操作HTML下拉列表标签
Aug 20 #Javascript
七夕情人节丘比特射箭小游戏
Aug 20 #Javascript
js脚本分页代码分享(7种样式)
Aug 19 #Javascript
You might like
PHP初学者头疼问题总结
2006/07/08 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
python2与python3的print及字符串格式化小结
2018/11/30 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
python实现用户名密码校验
2020/03/18 Python
pandas分批读取大数据集教程
2020/06/06 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
什么是规则表达式
2012/05/03 面试题
护士上岗前培训自我鉴定
2014/04/20 职场文书
纪律教育学习心得体会
2014/09/02 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
食品安全主题班会
2015/08/13 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
详解vue中v-for的key唯一性
2021/05/15 Vue.js
Python selenium的这三种等待方式一定要会!
2021/06/10 Python