首先我们看一看效果图:
看完效果图,接下来就是我们一步一步的实现这个小游戏了
第一步:先写出整个页面所需要的标签的代码,实现点击开始游戏的按钮,跳转到玩游戏的界面
整个页面的结构:
1 <body > 2 <div id="bodyDiv"> 3 <!-- 开始游戏的界面--> 4 <div id="startDiv"> 5 <span class="startSpan" onclick="begin()">开始游戏 </span> 6 </div> 7 <!-- 玩游戏的界面:--> 8 <div id="playDiv" class="play"> 9 <div id="userMessage"> 10 <span id="userMessageA">杀敌:</span> 11 <span id="userMessageB">总分:</span> 12 <span id="userMessageC">血量:</span> 13 <span id="userLeval">Leval:</span> 14 <span id="userBoom">炸弹数量:</span> 15 </div> 16 <!-- 游戏结束的div--> 17 <div id="pause"> 18 <span>游戏结束</span> 19 </div> 20 <!--设置北京图片的Div--> 21 <div id="bgphoto"> 22 <img src="image/stage1Boss.gif"> 23 <img src="image/stage1Boss.gif"> 24 </div> 25 </div> 26 </div> 27 </body>
第二步:我的小飞机出现在游戏屏幕上
1 使用到的知识点:
(1)HTML DOM createElement() 方法:
通过指定名称创建一个元素。
(2)HTML DOM appendChild() 方法:
向节点的子节点列表的末尾添加新的子节点。
(3)JS面向对象的使用。
(4)Window setInterval() 方法:
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
提示: 1000 毫秒= 1 秒。
2 小飞机类的声明:
1 /** 2 * 玩家飞机类 3 * @param imgSrc 图片的路径 4 * @param x 小飞机开始出现在界面上的x轴的值 5 * @param y 小飞机开始出现在界面上的y轴的值 6 * @param speed 小飞机的飞行速度(移动速度) 7 * @param blood 血量 8 */ 9 function createPlayerPlane(imgSrc,x,y,speed,blood){ 10 this.x = x; 11 this.y = y; 12 this.speed = speed; 13 this.blood = blood; 14 this.planeNode = document.createElement("img"); 15 this.imgSrc =imgSrc; 16 this.level =1; 17 this.boom =10; 18 this.bulletArray=new Array(); 19 this.myPlaneShoot=function(){ 20 controllBullet=controllBullet+1; 21 if(controllBullet>10){ 22 controllBullet=0; 23 this.bulletArray.push(new createBullet("image/concentrationBullet1.gif",parseInt(myPlane.planeNode.style.left)+28,parseInt(myPlane.planeNode.style.top),10)); 24 } 25 } 26 //bullet1=new createBullet("image/planeBullet1_Power1.gif",myPlane.x,myPlane.y,10); 27 this.topMove=function(){ 28 if(parseInt(this.planeNode.style.top)<5){ 29 }else{ 30 this.planeNode.style.top=parseInt(this.planeNode.style.top) - this.speed+"px"; 31 } 32 } 33 this.downMove=function(){ 34 if(parseInt(this.planeNode.style.top)>655){ 35 }else{ 36 this.planeNode.style.top=parseInt(this.planeNode.style.top) + this.speed+"px"; 37 } 38 } 39 this.leftMove=function(){ 40 if(parseInt(this.planeNode.style.left)<5){ 41 }else{ 42 this.planeNode.style.left=parseInt(this.planeNode.style.left)-this.speed+"px"; 43 } 44 } 45 this.rightMove=function(){ 46 if(parseInt(this.planeNode.style.left)>460){ 47 }else{ 48 this.planeNode.style.left=parseInt(this.planeNode.style.left)+this.speed+"px"; 49 } 50 } 51 this.create = function(){ 52 this.planeNode.src=this.imgSrc; 53 this.planeNode.style.position="absolute"; 54 this.planeNode.style.left=this.x+"px"; 55 this.planeNode.style.top=this.y+"px"; 56 playDiv.appendChild(this.planeNode); 57 } 58 this.create(); 59 }
3 小飞机出现在屏幕上:
1 new createPlayerPlane("image/plane1.gif",250,450,10,7);
4 控制小飞机的移动
第一步:申明四个控制飞机移动的全局变量:
1 /** 2 * 控制移动的四个变量 3 * @type {boolean} 4 */ 5 var moveTop=false; 6 var moveDown=false; 7 var moveLeft=false; 8 var moveRight=false;
第二步:键盘点击事件的实现
1 /*================== 键盘按下事件=======================*/ 2 document.body.onkeydown = function(event){ 3 var e = event || window.event || arguments.callee.caller.arguments[0]; 4 if(e.keyCode ==87){//上 5 moveTop=true; 6 } if(e.keyCode==83){//下 7 moveDown=true; 8 } if(e.keyCode== 65){//左 9 moveLeft=true; 10 } if(e.keyCode== 68){//右 11 moveRight=true; 12 } 13 } 14 /*================== 键盘松开事件=======================*/ 15 document.body.onkeyup =function(event){ 16 var e = event || window.event || arguments.callee.caller.arguments[0]; 17 if(e.keyCode ==87){//上 18 moveTop=false; 19 } if(e.keyCode==83){//下 20 moveDown=false; 21 } if(e.keyCode== 65){//左 22 moveLeft=false; 23 } if(e.keyCode== 68){//右 24 moveRight=false; 25 } 26 }
第三步:控制飞机移动的方法:
1 /** 2 * 移动飞机的方法 3 */ 4 function movePlane(){ 5 if(moveTop==true){ 6 myPlane.topMove(); 7 } if(moveDown==true){ 8 myPlane.downMove(); 9 } if(moveLeft==true){ 10 myPlane.leftMove(); 11 } if(moveRight==true){ 12 myPlane.rightMove(); 13 } 14 }
第四步:通过setInterval方法不停的改变飞机的位置,达到移动的效果。
1 setMovePlane=setInterval(movePlane,20);//控制自己的飞机移动的定时器
通过这样的几步,就可以实现按下按键飞机移动的动画效果了,整个移动的原理就是setInterval方法不断的调用小飞机对象里面的move方法,不停的改变小飞机的位置,最终达到移动的效果。