坦克大战中坦克的基础模型

最新推荐文章于 2020-08-15 20:34:04 发布

crazyFlex

最新推荐文章于 2020-08-15 20:34:04 发布

阅读量633

点赞数

文章标签： js

本文链接：https://blog.csdn.net/crazyFlex/article/details/103516654

版权

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		#div1 {
			width: 40px;
			height: 40px;
			position: absolute;
			background: orange;
			transform: rotate(0deg);
			z-index: 1;
		}

		.pd {
			width: 5px;
			height: 15px;
			border-radius: 50%;
			position: absolute;
			background: #f06;
		}
	</style>
</head>

<body>
	<div id="div1" style="top:350px;left:100px"></div>
</body>

</html>

<script>
	//按住键盘的上下左右箭头  控制div的移动  
	// 按住 空格键  创建子弹 并发射子弹
	var tank = document.getElementById("div1");
	document.onkeydown = function (eve) {
		var e = eve || event;
		var code = e.keyCode || e.which || e.charCode;
		var l = parseInt(tank.style.left);
		var t = parseInt(tank.style.top);

		if (code == 37) {
			l = l < 0 ? 0 : l;//防止div跑出浏览器左边框
			tank.style.left = l - 5 + "px";

		}
		if (code == 38) {
			t = t < 0 ? 0 : t;//防止div跑出浏览器上边框
			tank.style.top = t - 5 + "px";
		}
		if (code == 39) {
			l = l > document.documentElement.clientWidth - 45 ? document.documentElement.clientWidth - 45 : l;//防止div跑出浏览器右边框
			tank.style.left = l + 5 + "px";
		}
		if (code == 40) {
			t = t > document.documentElement.clientHeight - 45 ? document.documentElement.clientHeight - 45 : t;//防止div跑出浏览器下边框
			tank.style.top = t + 5 + "px";
		}
		if (code == 32) {
			var pd = document.createElement('div');
			document.documentElement.appendChild(pd);
			pd.className = "pd";
			pd.style.top = tank.style.top;
			pd.style.left = parseInt(tank.style.left) + 17 + "px";
			var timer = setInterval(function () {
				pd.style.top = parseInt(pd.style.top) - 4 + "px";
				if (parseInt(pd.style.top) < 0) {
					//子弹跑出浏览器上边框，就删除这个pd元素节点
					document.documentElement.removeChild(pd);
					clearInterval(timer);
				}
			}, 10)
		}

	}
</script>

这是运用js实现的简易功能；并没有实现游戏效果。

crazyFlex

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
坦克大战中坦克的基础模型

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style> * { margin: 0; padding: 0; } #div1 { width: 40px; height...
复制链接

扫一扫