@[toc]飞机大战
飞机大战小游戏相关说明
需求说明
- 己方飞机与敌方飞机
- 己方发射子弹，摧毁敌方飞机
- 击毁一辆敌方飞机得分
- 己方飞机碰撞敌方飞机游戏结束统计分数
功能说明
主要功能
- 鼠标移动己方飞机
- 己方飞机发射子弹
- 敌方飞机随机生成，运动方向由上到下
- 模式难度选择：敌机的数量、敌机的移动速度等
次要功能
- 敌方不同类型飞机
- 己方不同类型飞机
技术说明
掌握基本的前端技术，熟练使用CSS、JS代码，完成游戏的布局与动态交互作用
游戏运行流程图
游戏主流程图：
实体功能实现及Javascript代码解释说明
所用的Javascript技术介绍
1、使用window.requestAnimationFrame()实现逐帧动画
2、定义游戏所用到的全局变量
3、使用document.getElementById(id)方法实现访问某个元素
4、.children //获取指定元素的所有后代元素，.offset Top/Left//找距离定位父级上/左边的距离，没有定位则找body
5、.getElementsByTagName返回带有指定标签名的对象集合的方法：
- getElementsByName得到的是标签的数组 。从名字上看，就可以知道，它返回的是复数个对象。它根据name属性（name可以重复），得到所有name属性与参数相同的控件组成的数组，不存在时，返回0长度数组(.length == 0,而不是null)。
- getElementsByTagName()可以根据 标签名 获取一组元素节点对象，该方法所有浏览器均可使用，即使查询到的元素只有一个，也会封装到数组中返回。注意：这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中。
- getElementsByTagName返回给定标签名称的元素HTML集合HTMLCollection。返回的HTML集合是动态的，会随着DOM树的变化自动更新自身。语法：搜索整个文档节点Document.getElementsByTagName(tagname);搜索指定元素的后代，不包括自身，Element.gerElementsByTagName(tagname)。
6、使用onclick属性来绑定点击事件。通过给元素设置onclick属性，可以指定一个JavaScript函数作为事件处理程序，当用户点击该元素时，该函数将被调用。
游戏难度选择以及游戏背景生成
实现主要代码：
//初始选择难度界面的点击事件 function action(){ //难度选择 var aP = oLevel.getElementsByTagName("p"); for (var i = 0,length=aP.length; i < length; i++) { (function(i){ aP[i].onclick = function (e) { e = e || window.event; startGame(i , { x : e.clientX - boxOffsetLeft, y : e.clientY - boxOffsetTop });//第一个实参为序号 ，第二个实参为存储着鼠标距离map边缘距离的json } })(i); }
实现图片：
实现主要代码：
//Map背景选择与运动 function MapBg(level) { oMap.style.backgroundImage = "url('img/bg_"+(level+1)+".jpg')"; (function m(){ oMap.bgPosY = oMap.bgPosY || 0; oMap.bgPosY ++; oMap.style.backgroundPositionY = oMap.bgPosY + 'px'; oMap.bgTimer = requestAnimationFrame(m); })(); }
实现图片：
生成己方飞机及飞机跟随鼠标
实现主要代码：
//创建我军 function plane(level , pos) { //创建我军图片 var oImg = new Image();//document.createElement("img"); oImg.src = "img/myplane.png"; oImg.width = 70; oImg.height = 70; oImg.className = "plane"; oImg.style.left = pos.x - oImg.width/2 + 'px'; oImg.style.top = pos.y - oImg.height/2 + 'px'; oMap.appendChild(oImg); //边界值 var leftMin = -oImg.width/2, leftMax = oMap.clientWidth - oImg.width/2, topMin = 0, topMax = oMap.clientHeight - oImg.height/2;
实现 图片：
创建子弹及调用发射子弹
实现主要代码：
//我军子弹 function fire(oImg , level){ oBox.biuInterval = setInterval(function () { if ( oBox.score >= 500 ){ createBiu(true , -1); createBiu(true , 1); }else{ createBiu(); } } , [100 , 200 , 200 , 15][level]); var audio = document.createElement('audio'); audio.loop = true; audio.autoplay = true; oBox.appendChild(audio) oImg.time = setInterval(function() { for (var i = 0; i <= oImg.count; i++) { Biu({ strong: oImg.strong, count: oImg.count, i: i }) audio.src = plane.count > 0 ? 'music/enemy_in.mp3' : 'music/fire.mp3'; } }, speed) function createBiu(index , d){ //创建子弹 var oBiu = new Image(); oBiu.src = "img/planebullet.png"; oBiu.width = 30; oBiu.height = 30; oBiu.className = "biu"; var left = oImg.offsetLeft + oImg.width/2 - oBiu.width/2; var top = oImg.offsetTop - oBiu.height + 5; if ( index ){ left += oBiu.width*d } oBiu.style.left = left + "px"; oBiu.style.top = top + 'px'; oBiuAll.appendChild(oBiu); //子弹运动 function m() { if ( oBiu.parentNode ){ var top = oBiu.offsetTop - 20; if ( top < -oBiu.height ){ oBiuAll.removeChild(oBiu); }else{ oBiu.style.top = top + 'px'; requestAnimationFrame(m); } } } //将运动执行队列放后面，不然子弹会直接初始就在 top-50 的位置 setTimeout(function(){ requestAnimationFrame(m); },50); } }
实现图片：
小结
主要是绑定元素以及对相关元素进行操作，JS不易发现代码错误，当发现没有实现预期效果时，应在浏览器中进入控制台，进行代码检查。
对于一些数值的操作可以使用软件测试的边界值法来缩短取到想要的数值的时间。
下一篇将进行对敌方飞机的实现以及游戏结束条件与得分的实现。
