网页游戏引擎

最新推荐文章于 2023-08-25 15:20:52 发布

王家五哥

最新推荐文章于 2023-08-25 15:20:52 发布

阅读量804

点赞数

分类专栏： js小工具 html案例文章标签：游戏引擎 javascript 前端

本文链接：https://blog.csdn.net/qq_36521848/article/details/125586672

版权

html案例同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

js小工具

32 篇文章 0 订阅

订阅专栏

网页游戏引擎-半成品

示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

		<div style="width: 500px;height: 400px;border: solid 1px;">
			<div id="kuaiBut" style="width:20px;height:20px;background-color:green;">
			</div>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	<script type="text/javascript">
		$(function() {
			var sunDun = 10;
			setInterval(function() {
				sunDun++;
				console.log(sunDun);
				moveFun('kuaiBut', 'left', 'top', sunDun);
				if (sunDun >= 600) {
					sunDun = 0;
				}
			}, 20)
		})

		/**
		 * @param {Object} x 轴
		 * @param {Object} y 轴
		 * @param {Object} lengt
		 */
		function moveFun(id, x, y, lengt) {
			let pdWidth = $("#" + id).parent().width();
			let pdheight = $("#" + id).parent().height();
			console.log(pdWidth + ' - ' + pdheight);

			if (y == '' || y == null || y == undefined) {
				$("#" + id).css(x, lengt + 'px');
			} else {
				$("#" + id).css(x, lengt + 'px');
				$("#" + id).css(y, lengt + 'px');
			}
			$("#" + id).css('position', 'absolute');
		}
	</script>
</html>