公告

一只会发射子弹的坦克

2007-12-18 12:21:48 作者：未知来源：互联网浏览次数：17 文字大小：【大】【中】【小】

关键字：子弹

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
		<title>javascript坦克游戏初步|阿会楠练习作品</title>
		<style type="text/css">
		body{
			background:black;
		}
		#tanke{
			position:absolute;
			left:500px;
			top:200px;
		}
		</style>
		
	</head>
	<body>
			<div id="tanke"><img src="http://www.sosuo8.com/article/upimages3/top.gif" /></div>
	</body>
</html>
<script language="JavaScript" type="text/javascript">
		var i = 0;
		var bombLeftArray = new Array(100);//存放炸弹信息x
		var bombTopArray = new Array(100);//存放炸弹信息y
		var bombDirctionArray = new Array(100);//存放炸弹方向
		var t = new Array(100);//炸弹加速度
		for(var t_ = 0;t_ < 100;t_++)
		{
			t[t_] = 0;
		}
		var bombsetup = 3;//炸弹速度
		var client_width = document.body.clientWidth + document.body.scrollLeft;//页面的宽度
	    var client_height = document.body.clientHeight + document.body.scrollTop;//页面的高度
		
		function $(obj){
			return document.getElementById(obj);
		}
		
		//页面所有炸弹的移动
		function runAllBomb(){
			var allBomb = document.getElementsByTagName("div");
			for(var j_ = 1;j_ < allBomb.length;j_ ++)
			{
				
				//判断子弹的方向
				if(bombDirctionArray[j_] == null)
				{	
					var reg = /[a-z]{1,}\.gif/;//匹配只要找到图片的名字就可以了
					bombDirctionArray[j_] = allBomb[j_].innerHTML.match(reg) + "";
				}
				
				switch(bombDirctionArray[j_])
				{
					
					case "ztop.gif":
						bombLeftArray[j_] = allBomb[j_].offsetLeft;
						bombTopArray[j_] = allBomb[j_].offsetTop;
						if(bombTopArray[j_] > 0){
							allBomb[j_].style.top = bombTopArray[j_]  - bombsetup*t[j_];
							t[j_] ++;
							
						}
						else
						{
							allBomb[j_].style.display = "none";
						}
					break;
					
					case "zbottom.gif":
						bombLeftArray[j_] = allBomb[j_].offsetLeft;
						bombTopArray[j_] = allBomb[j_].offsetTop;
						
						if(bombTopArray[j_] < client_height)
						{
							allBomb[j_].style.top = bombTopArray[j_] + bombsetup*t[j_];
							t[j_] ++;
						}
						else
						{
							allBomb[j_].style.display = "none";
						}
					break;
					
					case "zleft.gif":
						bombLeftArray[j_] = allBomb[j_].offsetLeft;
						bombTopArray[j_] = allBomb[j_].offsetTop;
						
						if(bombLeftArray[j_] > 0)
						{
							allBomb[j_].style.left = bombLeftArray[j_] - bombsetup*t[j_];
							t[j_] ++;
						}
						else
						{
							allBomb[j_].style.display = "none";
						}
					break;
					
					case "zright.gif":
						bombLeftArray[j_] = allBomb[j_].offsetLeft;
						bombTopArray[j_] = allBomb[j_].offsetTop;
						
						if(bombLeftArray[j_] < client_width)
						{
							allBomb[j_].style.left = bombLeftArray[j_] + bombsetup*t[j_];
							t[j_] ++;
						}
						else
						{
							allBomb[j_].style.display = "none";
						}
					break;
				}
				
			}	
		}
		var runBomb = window.setInterval(runAllBomb,100);
		//取得页面上所有的炸弹，并让其以一定速度运行
		
		document.onkeydown = function(evt){
			
			
			var evt = window.event?window.event:evt;//获取event对象的兼容写法，兼容FF和IE 
			var tanke_w = $("tanke").offsetWidth;//取得坦克的宽度
			var tanke_h = $("tanke").offsetHeight;//取得坦克的高度
			var current_x = $("tanke").offsetLeft;//坦克当前x坐标
			var current_y = $("tanke").offsetTop;//坦克当前y坐标
			var step = 2;//移动的速度
			var z_step = 1;//子弹速度
			switch(evt.keyCode)
			{	
				//向左
				case 37:
				$("tanke").style.left = current_x + document.body.scrollLeft - step + "px";
				$("tanke").innerHTML = "<img src='http://www.sosuo8.com/article/upimages3/left.gif' />";
				break;
				
				//向右
				case 39:
				$("tanke").style.left = current_x + document.body.scrollLeft + step + "px";
				$("tanke").innerHTML = "<img src='http://www.sosuo8.com/article/upimages3/right.gif' />";
				break;
				
				//向上
				case 38:
				$("tanke").innerHTML = "<img src='http://www.sosuo8.com/article/upimages3/top.gif' />";
				$("tanke").style.top = current_y + document.body.scrollTop - step + "px";
				break;
				
				//向下
				case 40:
				$("tanke").innerHTML = "<img src='http://www.sosuo8.com/article/upimages3/bottom.gif' />";
				$("tanke").style.top = current_y + document.body.scrollTop + step + "px";
				break;
				
				//发出攻击
				case 13:
					//新子弹
					var createDiv = document.createElement("div");
					createDiv.setAttribute("id","bomb" + i);
					i ++;
					//createDiv.style.overflow = "hidden";
					createDiv.style.position = "absolute";
					var reg = /[a-z]{1,}\.gif/;//匹配只要找到图片的名字就可以了
					var current_decoration = $("tanke").innerHTML.match(reg);
					switch(current_decoration[0])//按下回车发弹
					{
						//炮筒对着左边
						case "left.gif":
						createDiv.style.left = current_x - 5 + "px";
						createDiv.style.top = current_y + (tanke_h/2) - 3 + "px";
						createDiv.innerHTML = "<img src='http://www.sosuo8.com/article/upimages3/zleft.gif' />"
						break;
						
						//炮筒对着右边
						case "right.gif":
						createDiv.style.left = current_x + tanke_w - 7 + "px";
						createDiv.style.top = current_y + (tanke_h/2) - 1 + "px";
						createDiv.innerHTML = "<img src='http://www.sosuo8.com/article/upimages3/zright.gif' />";
						break;
						
						//炮筒对着上边
						case "top.gif":
						createDiv.style.left = current_x + (tanke_w/2) - 5 + "px";
						createDiv.style.top = current_y - 5 + "px";
						createDiv.innerHTML = "<img src='http://www.sosuo8.com/article/upimages3/ztop.gif' />";
						break;
						
						//炮筒对着下边
						case "bottom.gif":
						createDiv.style.left = current_x + (tanke_w/2) - 7 + "px";
						createDiv.style.top = current_y + tanke_h - 7 + "px";
						createDiv.innerHTML = "<img src='http://www.sosuo8.com/article/upimages3/zbottom.gif' />";
						break; 
					}
				 	document.body.appendChild(createDiv);
				break;
				
			}
			
		}
			
		
</script>

发表评论　加入收藏　告诉好友　打印本页　关闭窗口　返回顶部

推荐

公告

一只会发射子弹的坦克