1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>小蜜蜂游戏 </title>
6 <style>
7 *{
8 padding:0;
9 margin:0;
10 }
11 /*游戏主屏幕*/
12 #box{
13 width:800px;
14 height:600px;
15 overflow: hidden;
16 background:black;
17 margin:20px auto;
18 position:relative;
19 }
20 /*游戏开始按钮*/
21 #gameBeg{
22 color:white;
23 font-size:20px;
24 cursor:pointer;
25 border:1px solid #ffffff;
26 width:100px;
27 height:30px;
28 text-align:center;
29 position:absolute;
30 top:285px;
31 left:350px;
32 line-height:30px;
33 }
34 /*计分*/
35 #score{
36 font-size:20px;
37 position:absolute;
38 top:0;
39 left:0;
40 color:#ffffff;
41 }
42 /*敌人模块*/
43 #bee{position:relative; }
44 /*飞机模块*/
45 .divAir{
46 position:relative;
47 background:url(1.jpg) no-repeat;
48 width:40px;
49 height:40px;
50 }
51 /*子弹样式*/
52 .bullet{
53 position:absolute;
54 width:2px;
55 height:10px;
56 background-color:white;
57
58 }
59 /*敌人一*/
60 .enemy1{
61 width:40px;
62 height:28px;
63 background:url(2.jpg) no-repeat;
64 float:left;
65 }
66 /*敌人二*/
67 .enemy2{
68 width:40px;
69 height:28px;
70 background:url(3.jpg) no-repeat;
71 float:left;
72 }
73 </style>
74 <script type="text/javascript">
75 window.onload=function(){
76 var begButton = document.getElementById("gameBeg");
77 // 点击开始按钮后游戏进行初始化
78 begButton.onclick = function(){
79 this.style.display="none";
80 Game.init("box");
81 };
82
83
84 var Game = {
85 //敌人数据
86 oEnemy:{
87 e1:{ style :"enemy1",speed:5,score:1,blood:1},
88 e2:{ style :"enemy2",speed:7,score:1,blood:2},
89
90 },
91 //关卡数据
92 gk:[
93 // 关卡1
94 {
95 eMap:[
96 "e2","e2","e2","e2","e2","e2","e2","e2","e2","e2",
97 "e2","e2","e2","e2","e2","e2","e2","e2","e2","e2",
98 "e2","e2","e2","e2","e2","e2","e2","e2","e2","e2",
99 "e1","e1","e1","e1","e1","e1","e1","e1","e1","e1",
100 "e1","e1","e1","e1","e1","e1","e1","e1","e1","e1",
101 "e1","e1","e1","e1","e1","e1","e1","e1","e1","e1",
102 ],
103 cloNum:10,
104 iSpeedX:10,
105 iSpeedY:10,
106 time:2000
107
108 }
109 ],
110 //飞机的属性
111 air:{
112 style:"divAir",
113 bulletStyle:"bullet"
114 },
115 //初始化
116 init : function(id){
117 this.oParent = document.getElementById(id);
118 this.createScore();
119 this.createAir();
120 this.createEnemy(0);
121 },
122 //积分的创建
123 createScore:function(){
124 var oS = document.createElement("div");
125 oS.id = "score";
126 oS.innerHTML = "积分：<span>0</span>";
127 this.oParent.appendChild(oS);
128 this.oSNum = oS.getElementsByTagName("span")[0];
129 },
130 //创建敌人
131 createEnemy:function(iNow){
132
133 var gk = this.gk[iNow];
134 var oUl = document.createElement("ul");
135 var arr=[];
136 oUl.id="bee";
137 oUl.style.width = gk.cloNum*40+"px";
138 this.oParent.appendChild(oUl);
139
140 oUl.style.left=(this.oParent.offsetWidth - oUl.offsetWidth)/2+"px";
141 for(var i=0;i<gk.eMap.length;i++){
142 var oLi = document.createElement("li");
143 oLi.className = this.oEnemy[gk.eMap[i]].style;
144
145 oLi.blood = this.oEnemy[gk.eMap[i]].blood;
146 oLi.speed = this.oEnemy[gk.eMap[i]].speed;
147 oLi.score = this.oEnemy[gk.eMap[i]].score;
148 oUl.appendChild(oLi);
149 }
150 this.oUl=oUl;
151 this.oli=document.getElementsByTagName("li");
152 // 将每个敌人的位置固定
153 for(var i=0;i<this.oli.length;i++){
154 arr.push([this.oli[i].offsetLeft,this.oli[i].offsetTop]);
155 }
156 for(var i=0;i<this.oli.length;i++){
157 this.oli[i].style.position="absolute";
158 this.oli[i].style.left=arr[i][0]+"px";
159 this.oli[i].style.top=arr[i][1]+"px";
160 }
161 this.runEnemy(gk);
162 },
163 /* offsetLeft与style.left的区别
164 offsetLeft 获取的是相对于父对象的左边距
165 left 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距
166 如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的
167 区别在于：
168 1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算 还用offsetLeft比较方便。
169 2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。*/
170 //敌人开始涌动
171 runEnemy:function(gk){
172 var This=this;
173 var L=0;
174 var R=this.oParent.offsetWidth-this.oUl.offsetWidth;
175 setInterval(function(){
176 //碰到左边界则向右下方移动，碰到左边界则向左下方移动
177 if(This.oUl.offsetLeft>R){
178 gk.iSpeedX*=-1;
179 This.oUl.style.top=This.oUl.offsetTop+gk.iSpeedY+"px";
180
181 }
182 else if(This.oUl.offsetLeft<L){
183 gk.iSpeedX*=-1;
184 This.oUl.style.top=This.oUl.offsetTop+gk.iSpeedY+"px";
185
186 }
187
188 This.oUl.style.left=This.oUl.offsetLeft+gk.iSpeedX+"px";
189 },200);
190 },
191 createAir:function(){ //飞机的创建
192 var divAir = document.createElement("div");
193 divAir.className=this.air.style;
194 this.oParent.appendChild(divAir);
195 divAir.style.left = (this.oParent.offsetWidth-divAir.offsetWidth)/2+"px";
196 divAir.style.top = this.oParent.offsetHeight-divAir.offsetHeight+"px";
197 this.divAir=divAir;
198 this.bindAir();
199 },
200 //键盘事件连续按下时会有间隔 按下的时候不直接操作，用定时器实现连续操作，定时器要保持一份,且需要清除定时器
201 bindAir:function(){
202 var This = this;
203 var L=0;
204 var R=this.oParent.offsetWidth-this.divAir.offsetWidth;
205 var num=0;
206
207 var timer=null;
208
209 document.onkeydown = function(ev){
210 var ev=ev||window.event;
211 if(!timer){
212 timer = setInterval(run,30);
213 }
214 if(ev.keyCode == 37){
215 num=1;
216 }
217 else if(ev.keyCode == 39){
218 num=2;
219 }
220
221 };
222 //连续的抬起才能连续的发子弹
223 document.onkeyup = function(){
224 clearInterval(timer);
225 timer=null;
226 num=0;
227 This.createBullet();
228
229 };
230 function run(){
231 if(num==1){
232 This.divAir.style.left = This.divAir.offsetLeft-10+"px";
233 }
234 if(num==2){
235 This.divAir.style.left = This.divAir.offsetLeft+10+"px";
236 }
237 }
238 },
239 createBullet:function(){ //子弹的创建 absolute
240 var bullet = document.createElement("div");
241 bullet.className=this.air.bulletStyle;
242 this.oParent.appendChild(bullet);
243 bullet.style.left=this.divAir.offsetLeft+this.divAir.offsetWidth/2+"px";
244 bullet.style.top = this.divAir.offsetTop-10+"px";
245 this.runBullet(bullet);
246 },
247 runBullet:function(bullet){
248 //子弹的运动
249 var This=this;
250 bullet.timer=setInterval(function(){
251
252 if(bullet.offsetTop<0){
253 clearInterval(bullet.timer);
254 This.oParent.removeChild(bullet);
255 }
256 else{
257 bullet.style.top = bullet.offsetTop-10+"px";
258 }
259 for(var i=0;i<This.oli.length;i++){
260 if(!This.pz(bullet,This.oli[i])){
261 if(This.oli[i].blood == 1){
262 This.oUl.removeChild(This.oli[i]);
263 This.oSNum.innerHTML=parseInt(This.oSNum.innerHTML)+This.oli[i].score;
264 }
265 else{
266 This.oli[i].blood--;
267 }
268 clearInterval(bullet.timer);
269 This.oParent.removeChild(bullet);
270
271 //元素删了以后，定时器还在 为了提高效率，先删除定时器，在删除子弹
272 }
273 }
274 },50);
275
276
277
278 },
279 pz:function(obj1,obj2){ //碰撞检测
280 var L1=obj1.offsetLeft;
281 var R1=obj1.offsetLeft+obj1.offsetWidth;
282 var T1=obj1.offsetTop;
283 var B1=obj1.offsetTop+obj1.offsetHeight;
284 var L2=obj2.offsetLeft+this.oUl.offsetLeft;
285 var R2=obj2.offsetLeft+obj2.offsetWidth+this.oUl.offsetLeft;
286 var T2=obj2.offsetTop+this.oUl.offsetTop;
287 var B2=obj2.offsetTop+obj2.offsetHeight+this.oUl.offsetTop;
288 if(L1>R2||L2>R1||B2<T1||B1<T2){ //碰不到
289 return true;
290 }else{
291 return false;
292 }
293 },
294
295 }
296 };
297 </script>
298 </head>
299 <body>
300 <div id="box">
301 <div id="gameBeg">开始游戏</div>
302 </div>
303 </body>
304 </html>
浙公网安备 33010602011771号