[知了堂学习笔记]_JS小游戏之打飞机（1）-点击开始到出现我的小飞机

首先我们看一看效果图：

 

 

 

看完效果图，接下来就是我们一步一步的实现这个小游戏了

第一步：先写出整个页面所需要的标签的代码，实现点击开始游戏的按钮，跳转到玩游戏的界面

整个页面的结构：

 

 

 

 

 

 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方法，不停的改变小飞机的位置，最终达到移动的效果。

 

posted @ 2017-08-21 17:42  咫尺▪天涯  阅读(740)  评论(0)  编辑  收藏  举报