简易版的星球大战，JavaScript 网页游戏

　　JavaScript网页游戏，星球大战，那些图像都是用JS生成的，没有用到外部的图片资源，司马多情vs银河战队，摧毁敌方战舰数越多越少，呵呵，写的还不够精细，主要用到物体碰撞检测的相关知识。

　　演示：

<title>星球大战网页游戏</title> <style type="text/css"> #map{ position:relative; background:#000; width:800px; height:500px; border:#000 1px solid; } #title{ position:absolute; width:100%; text-align:center; background-color:#FC0; color:#F00; font-size:24px; } #score{ font-size:14px; color:#000; } .vs{ font-size:16px; color:#000; } .gun{ position:absolute; background-color:#F60; } .bullet{ position:absolute; border:1px solid #fff; background-color:#F90; width:2px; height:1px; overflow:hidden; } .block{ position:absolute; border:1px solid #000; background-color:#0FF; } </style> <div id="map"> <div id="title">星球大战<strong class="vs">(司马多情vs银河战队)</strong><strong id="score">摧毁敌方战舰数:0</strong></div> </div> <script type="text/javascript"> //base var win = window,doc = document; var GetWithId = function(id){ return doc.getElementById(id); }; var Append = function(parent,child){ parent.appendChild(child); }; var Remove = function(parent,child){ parent.removeChild(child); }; var Element = function(tag){ return doc.createElement(tag); }; var Css = function(el,o){ for(var i in o){ el.style[i] = o[i]; } }; var AddClass = function(el,cls){ var currCls = el.className.split(" "); if(IsContain(currCls,cls)){ return; } el.className = currCls.join(" ") + cls; }; var IsContain = function(ary,o){ for(var i=0;i<ary.length;i++){ if(o===ary[i]){ return true; } } return false; }; (function(__){ __.index = function(o,fn){ fn = fn || function(x,y){return x===y}; for(var i=0;i<this.length;i++){ if(fn(this[i],o)){ return i; } } return -1; }; })(Array.prototype); //game var Game = {}; Game.map = GetWithId("map"); Game.rect = {"w":800,"h":500}; Game.score = 0; Game.drawScore = function(){ GetWithId("score").innerHTML = "摧毁敌方战舰数:"+Game.score; }; //障碍物管理器 Game.BckSys = {}; Game.BckSys.blocks = []; Game.BckSys.shot_speed = 200; Game.BckSys.shot_timer; Game.BckSys.bck_id = 0; Game.BckSys.bck_speed = 50; Game.BckSys.bck_timer; Game.BckSys.newBck = function(){ var __ = function(){ var y = parseInt(Math.random() * Game.rect.h); y>=Game.rect.h-50 && (y = Game.rect.h-50); var b = Block(Game.BckSys.bck_id,y); Game.BckSys.blocks.push(b); Game.BckSys.bck_id++; }; Game.BckSys.shot_timer = window.setInterval(__,Game.BckSys.shot_speed); }; Game.BckSys.reDraw = function(){ var __ = function(){ for(var i=0;i<Game.BckSys.blocks.length;i++){ Game.BckSys.blocks[i].move(); } }; // 烈火網 liehuo.net 欢迎复制，拒绝恶意采集 ｌｉehｕｏ．ｎｅｔ Game.BckSys.bck_timer = window.setInterval(__,Game.BckSys.bck_speed); }; Game.BckSys.start = function(){ Game.BckSys.newBck(); Game.BckSys.reDraw(); }; Game.start = function(){ Game.player_1 = Gun();//添加角色 Game.BckSys.start(); }; //发射器 var Gun = function(){ if(!(this instanceof Gun)){ return new Gun(); } this.wh = {"w":10,"h":10}; this.pos = {"x":0,"y":(Game.rect.h-this.wh.h)/2}; this.ui = Element("div"); this.step = 5; this.speed = 100; this.timer; this.bullet_id = 0; this.bullets = []; this.bullet_speed = 20;//子弹<b>运动</b>单位距离所需要的时间（ms） this.bullet_timer; this.init(); }; Gun.prototype = { init : function(){ AddClass(this.ui,"gun"); Css(this.ui,{"width":this.wh.w+"px","height":this.wh.h+"px","left":this.pos.x+"px","top":this.pos.y+"px"}); Append(Game.map,this.ui); this.control(); this.shot(); this.reDraw(); }, control : function(){ var self = this; document.body.onkeydown = function(e){ e = e || window.event,keyCode = e.keyCode; switch(keyCode){ case 38://up if(self.pos.y>0){ self.pos.y-=10; self.setTop(); } break; case 40://down if(self.pos.y+self.wh.h<Game.rect.h){ self.pos.y+=10; self.setTop(); } break; }; return false; } }, shot : function(){ var self = this; var __ = function(){ var b = Bullet(self.bullet_id,self,{"x":self.pos.x + self.wh.w,"y":self.pos.y+self.wh.h/2}); self.bullets.push(b); self.bullet_id++; } self.timer = window.setInterval(__,self.speed); }, reDraw : function(){ var self = this; var __ = function(){ for(var i=0;i<self.bullets.length;i++){ self.bullets[i].move(); } }; self.bullet_timer = window.setInterval(__,self.bullet_speed); }, setTop : function(){ Css(this.ui,{"top":this.pos.y+"px"}) } }; //子弹 var Bullet = function(id,gun,pos,step){ if(!(this instanceof Bullet)){ return new Bullet(id,gun,pos,step); } this.id = id; this.gun = gun; this.pos = pos || {"x":0,"y":0}; this.step = step || 10; this.ui = Element("div"); this.timer; this.init(); }; Bullet.prototype = { init : function(){ AddClass(this.ui,"bullet"); Css(this.ui,{"left":this.pos.x+"px","top":this.pos.y+"px"}); Append(Game.map,this.ui); this.move(); }, move : function(){ var self = this; self.pos.x+=self.step; self.hit(); Css(self.ui,{"left":self.pos.x+"px","top":self.pos.y+"px"}); }, hit : function(){//检测撞击 var self = this; if(self.pos.x>=Game.rect.w){//如果撞击到墙壁 self.destory(); self.gun.bullets.splice(self.gun.bullets.index(self,function(x,y){return x.id===y.id}),1); return; }; for(var i=0;i<Game.BckSys.blocks.length;i++){ var b = Game.BckSys.blocks[i]; if((self.pos.x >= b.pos.x && self.pos.x <= b.pos.x+b.wh.h) && (self.pos.y>=b.pos.y && self.pos.y<=b.pos.y+b.wh.h)){ self.destory(); self.gun.bullets.splice(self.gun.bullets.index(self,function(x,y){return x.id===y.id}),1); b.destory(); Game.BckSys.blocks.splice(i,1); Game.score++; Game.drawScore(); } } }, destory : function(){ Remove(Game.map,this.ui); this.timer && window.clearInterval(this.timer); } }; //障碍物 var Block = function(id,y){ if(!(this instanceof Block)){ return new Block(id,y); } this.id = id; this.step = 5;//单位时间运动频率 this.wh = {"w":5,"h":50}; this.pos = {"x":(Game.rect.w - this.wh.w),"y":0}; y && (this.pos.y = y); this.ui = Element("div"); this.timer; this.init(); }; Block.prototype = { init : function(){ AddClass(this.ui,"block"); Css(this.ui,{"left":this.pos.x+"px","top":this.pos.y+"px","width":this.wh.w+"px","height":this.wh.h+"px"}); Append(Game.map,this.ui); this.move(); }, move : function(){ var self = this; self.pos.x-=self.step; self.hit(); Css(self.ui,{"left":self.pos.x+"px","top":self.pos.y+"px"}); }, hit : function(){ var self = this; if(self.pos.x<=20){ self.destory(); Game.BckSys.blocks.splice(Game.BckSys.blocks.index(self,function(x,y){return x.id===y.id}),1); } }, destory : function(){ Remove(Game.map,this.ui); this.timer && window.clearInterval(this.timer); } }; Game.start(); </script><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：武汉站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!