星球大戰,Js網頁游戲

2024-09-05 12:21:01

字體：大中小

來源：轉載

供稿：網友

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   class="zzicwnl"   id="map"><div   class="terpgxz"   id="title">星球大戰<strong class="vs">(司馬多情vs銀河戰隊)</strong><strong id="score">摧毀敵方戰艦數:0</strong></div></div><script type="text/javascript">//basevar 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=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();}};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;//子彈運動單位距離所需要的時間（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://downif(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>

上一篇：Js寫的小游戲，受盡折磨的小人

下一篇：猜數字小游戲，JS版