本文实例为大家分享了JS面向对象实现飞机大战的具体代码，供大家参考，具体内容如下
主页面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .bg{ width: 530px; height: 600px; position: relative; margin: 100px auto; background: url("bg.png") no-repeat 0 -9399px; } .plane{ width: 60px; height: 53px; position: absolute; left: 235px; bottom: 10px; background: url("my_air.gif") no-repeat; } .enemy{ position: absolute; } .buttle{ width: 9px; height: 37px; position: absolute; background: url("my_ari_1.gif") no-repeat; } .bomp{ width: 160px; height: 160px; position: absolute; background: url("0.gif") no-repeat; } </style></head><body><div class="bg" id="bg"> <div class="plane" id="plane"></div></div></body><script type="text/javascript" src="buttle.js"></script><script type="text/javascript" src="enemies.js"></script><script src="jquery-3.0.0.min.js"></script><script> //bg移动begin var bg_height=-9399; function bg_move(){ var bg=document.getElementById("bg"); bg_height+=3; if (bg_height>0){ bg_height=-9399; } bg.setAttribute("style","background: url('bg.png') no-repeat 0 "+bg_height+"px"); } setInterval(bg_move,30); //bg移动over //通过获取键盘的key值来控制飞机的方向begin document.onkeydown = function(){ var key=event.keyCode; var plane =document.getElementById("plane"); switch (key){ case 37: plane_Left(); break; case 38: plane_Top(); break; case 39: plane_Right(); break; case 40: plane_Bottom(); break; case 32: fire(); break; } }; //通过获取键盘的key值来控制飞机的方向over //飞机的方向begin var planeLeft=235; var planeBottom=10; //声明全局变量planeBottom、planeLeft用来让飞机移动 function plane_Left(){ if(planeLeft>0){ planeLeft-=8; document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px"); } } function plane_Right(){ if(planeLeft<470){ planeLeft+=8; document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px"); } } function plane_Top(){ if(planeBottom<550){ planeBottom+=8; document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px"); } } function plane_Bottom(){ if(planeBottom>10){ planeBottom-=8; document.getElementById("plane").setAttribute("style","left:"+planeLeft+"px"+";"+"bottom:"+planeBottom+"px"); } } //飞机的方向over function enemyShow(){ var number = parseInt(Math.random()*10); for(var i=0;i<number;i++){ var enemies=new enemiesShow(); } } setInterval(enemyShow,3000); function fire(){ var bottom=planeBottom+5+53; var left=planeLeft+30-5; var buttle = new buttleDemo(left,bottom); }</script></html> |
子弹
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
/** * Created by echo22 on 2016/7/29. */function buttleDemo(left,bottom){ var buttleLeft =left; var buttleBottom = bottom; var id; var Move; inti(); function inti(){ id=getRandom(); var str = "<div class='buttle' id='b"+id+"'></div>"; $("#bg").append(str); $("#b"+id).css({"left":buttleLeft,"bottom":buttleBottom}); Move=setInterval(buttleMove,10); } //获取随机ID function getRandom(){ return parseInt(Math.random()*10000); } //子弹的移动 function buttleMove(){ if(buttleBottom<550){ buttleBottom+=10; $("#b"+id).css("bottom",buttleBottom); if(JudgeShot()){ dispire(); } } else { dispire(); } } //清除子弹 function dispire(){ $("#b"+id).remove(); clearInterval(Move); } //判断子弹与敌机的碰撞位置 function JudgeShot(){ var enemy=$(".enemy"); for (var i=0;i<enemy.length;i++){ var enemy_top=$(".enemy").eq(i).css("top"); var enemy_left=$(".enemy").eq(i).css("left"); enemy_bottom=600-getInt(enemy_top); enemy_left=getInt(enemy_left); console.log(enemy_left); if (buttleLeft>enemy_left&&buttleLeft<enemy_left+50&&buttleBottom>enemy_bottom&&buttleBottom<enemy_bottom+60){ $(".enemy").eq(i).remove(); var bomp="<div class='bomp' id='bo"+id+"'></div>"; $("#bg").append(bomp); $("#bo"+id).css({"left":buttleLeft-70,"bottom":buttleBottom-100}); setTimeout(gundan,50); return true; } } return false; } function getInt(str){ var result = str.substring(0,(str.length-2)); return parseInt(result); } function gundan(){ $("#bo"+id).remove(); }} |
敌机
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
/** * Created by echo22 on 2016/7/29. */function enemiesShow(){ var id; init(); function init(){ var type=getEnemyType(); var enemyLeft=getEnemyLeft(); getEnemyPlane(type,enemyLeft); getLine(); } function getEnemyPlane(type,left){ console.log(111); id=parseInt(Math.random()*10000); var width; var height; if(type==1){ width=47; height=72; } else { width=64; height=56; } var enemy="<div class='enemy' id='e"+id+"' ></div>"; $("#bg").append(enemy); $("#e"+id).css({"width":width,"height":height,"left":left,"background":"url('d_j_"+type+".gif') no-repeat"}); } function getEnemyType(){ return (parseInt(Math.random()*10/5)>0)?1:3; } function getEnemyLeft(){ return parseInt(Math.random()*(530-64)); } function getLine(){ Math.random()>0.5?zhiLine():quLine(); } function zhiLine(){ $("#e"+id).animate({ "top":"520px" },3000,function(){ $("#e"+id).remove(); }) } function quLine(){ $("#e"+id).animate({ "top":"200px", "left":getEnemyLeft() },1500,function(){}) $("#e"+id).animate({ "top":"520px", "left":getEnemyLeft() },1500,function(){ $("#e"+id).remove(); }) }} |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/action_xing/article/details/52599388
