网页赛跑小游戏--js实现

最新推荐文章于 2021-03-28 14:24:03 发布

Bored_Curberus

最新推荐文章于 2021-03-28 14:24:03 发布

阅读量1.6k

点赞数

本文链接：https://blog.youkuaiyun.com/Bored_Curberus/article/details/52491109

版权

本文介绍了一个简单的网页赛跑小游戏的实现过程。通过JavaScript，当点击按钮时，小明开始移动，达到终点后弹出所用时间并停止移动。在初始实现中存在一个问题，会导致小明在计时结束后额外移动一次。通过调整代码逻辑，将判断是否到达终点的条件放在改变位置的代码之后，解决了这个问题。这个例子强调了代码排列顺序的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天随手做了一个小游戏，需求是：

1，按下button,计时开始，小明开始移动

2，到达终点，小明立即停下，并返回一个计时器的时间

下面是代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" ?>

			//定义一个计时器
			var runTimer;

			function runTime() {

				//先手动执行一次
				run();
				runTimer = setInterval(run, 1000);
				
			}

			//记录计时器执行的次数
			var count = 0;

			function run() {
				var XObj = document.getElementById("xiaoming");
				//count++;

			   	XObj.style.left = "" + (count++ * 5 + 10) + "px

最低0.47元/天解锁文章