一个JS写的射击游戏框架示例

2024-09-05 12:21:08

字体：大中小

来源：转载

供稿：网友

射击类的JS游戏框架代码，演示了一些基本的功能，比如射击发子弹，游戏对象移动等，键盘上的左右键控制对象向左、向右移动，空格键是发子弹的。本框架代码可用于一些飞行射击、人物射击类的游戏中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"><head><title>JS射击游戏框架</title><style type="text/css">body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}html{color:#000;overflow-y:scoll;overflow:-moz-scrollbars-vertical}#con{width:500px; height:500px; position:absolute; left:50%; top:50%; margin-top:-250px; margin-left:-250px; background:#EFEFEF;}.tar{width:10px;height:10px;font-size:6px;line-height:6px;overflow:hidden;float:left;margin-left:4px; margin-top:4px}#fir{width:10px;height:10px;font-size:6px;line-height:6px;overflow:hidden;background:red;position:absolute;bottom:0px;}.zd{width:10px;height:10px;font-size:6px;line-height:6px;overflow:hidden;background:blue;position:absolute;bottom:10px;}</style><script language="javascript">	var i = 0;	var shootSpeed = 20;	var vMoveStep = 10;	var hMoveStep = 10;	var keyMoveLeftVal = 37;	var keyMoveRightVal = 39;	var keyShootVal = 32;	window.onload = function(){	window.focus();	init();	}	function init(){	document.onkeydown = function(event){		var event = event || window.event;		if(keyMoveRightVal == event.keyCode){			if($("fir").offsetLeft + $("fir").offsetWidth < $("con").offsetWidth){				$("fir").style.marginLeft = (parseInt($("fir").offsetLeft) + hMoveStep) + "px";			}		}else if(keyMoveLeftVal == event.keyCode){			if($("fir").offsetLeft > 0){				$("fir").style.marginLeft = (parseInt($("fir").offsetLeft) - hMoveStep) + "px";			}		}		if(keyShootVal == event.keyCode){			shoot();		}		$("f").innerHTML = "left:" + $("fir").offsetLeft + ",width:" + $("fir").offsetWidth;		}		}		function shoot(){			var zd = document.createElement("div");			zd.id = "zd" + i++;			zd.className = "zd";			zd.style.left = $("fir").offsetLeft + "px";			zd.innerHTML = " ";			$("con").appendChild(zd);						setTimeout("mv('" + zd.id+ "')", shootSpeed);		}		function mv(id){			$(id).style.bottom = ($("con").offsetHeight - $(id).offsetTop - $(id).offsetHeight + vMoveStep) + "px";			if($(id).offsetTop + $(id).offsetHeight > 0){				setTimeout("mv('" + id+ "')", shootSpeed);			}else{				$("con").removeChild($(id));			}		}		function $(id){			return document.getElementById(id);		}	</script><head><body><div id="f"></div><div id="con"><div id="fir"> </div></div></body></html>

上一篇：原生JS贪食蛇网页代码

下一篇：原生 js贪吃蛇，可选关挑战第10关

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注