HTML5打飞机网页游戏

2024-09-05 12:18:52

字体：大中小

来源：转载

供稿：网友

一款基于HTML5的网页打飞机游戏代码，飞行射击游戏，在火狐和chrome下完美运行，不过有些地方还没有真正写成，只是现在可以玩了，功能不断扩展中。这款游戏是基于HTML5技术的，所以在IE8和之前浏览器上是不能运行的，请见凉哦。

<!DOCTYPE html><html lang="en"><head><title>fly飞行射击，打飞机</title><script src="jquery.js" type="text/javascript"></script><style type="text/css">#show{	margin:auto;	width:300px;	height:500px;	background: black;	position: relative;}#fly{	width:10px;	height:10px;	position:absolute;	bottom:0;	left:140px;	background: #0044ff;}.arrow{	width:6px;	height:6px;	background: #ddd;	margin-left: 2px;	margin-top:-10px;}.huiji{	width:10px;	height:10px;	background: #eee;	position:absolute;	top:0;	left:0;}</style></head><body>	<div id="show" style="width:300px;height:500px">		<div id="fly">			<div class="arrow" style="margin-top:-10px;">			</div>		</div>	</div></body></html><script>function $(id){//获得id	return document.getElementById(id);}function keydown(e) {//判断键盘事件	var currKey=0,e=e||event; 	currKey=e.keyCode||e.which||e.charCode; 	return currKey;}function getClass(obj,attr){//getElementsByClass    var aArray=[];      var i=0;      var aAll = obj.getElementsByTagName('*');    for(i=0;i0&&parseInt(that.leftSet())<(parseInt(that.showWidth)-10)){					if(keydown()==37){						that.leftSet(parseInt(that.flying.style.left)-5+'px');					}else if(keydown()==39){						that.leftSet(parseInt(that.flying.style.left)+5+'px');					}				}else if(parseInt(that.leftSet())==0){					if(keydown()==39){						that.leftSet(parseInt(that.flying.style.left)+5+'px');					}				}else if(parseInt(that.leftSet())==(parseInt(that.showWidth)-10)){					if(keydown()==37){						that.leftSet(parseInt(that.flying.style.left)-5+'px');					}				}			});			setInterval(function(){//子弹				for(var i=0;i<that.arrow.length;i++){					if(Math.abs(parseInt(that.arrow[i].style.marginTop))<parseInt(that.showHeight)-10){						that.arrow[i].style.marginTop=parseInt(that.arrow[i].style.marginTop)-10+'px';					}else if(Math.abs(parseInt(that.arrow[i].style.marginTop))==parseInt(that.showHeight)-10){						that.arrow[i].style.marginTop='-20px';					}				}			},that.arrowSpeed);		}	},	huijiInit:function(){		var that=this,			left=Math.random()*290,			textnode=document.createElement('div');		that.showArea.appendChild(textnode).setAttribute('class','huiji');		textnode.style.left=0;		textnode.style.top=0;		textnode.style.left=left+'px';		setInterval(function(){			if(Math.abs(parseInt(textnode.style.top))<parseInt(that.showHeight)+10){				textnode.style.top=parseInt(textnode.style.top)+1+'px';			}else if(Math.abs(parseInt(textnode.style.top))==parseInt(that.showHeight)+10){				textnode.remove();			}		},that.huijiSpeed);	},	init:function(){		var that=this;		this.start();		this.process();		setInterval(function(){that.huijiInit()},1000);	}}var fl=new fly();fl.init()</script>

上一篇：HTML5动态分页效果代码

下一篇：圆盘抽奖HTML5+JS编写