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

来源：互联网发布：海子诗歌赏析知乎编辑：程序博客网时间：2024/05/16 14:41

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

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";if(XObj.style.left == "30px") {clearInterval(runTimer);alert("恭喜您，共用" + count + "秒跑完全程！");}}</script></head><body><input type="button" onclick="runTime()" value="run" />

//背景，或者说跑道......<div style="border: 1px solid #000;height: 600px; background-image: url(../img/regist_bg.jpg);">//借用了下国民同学，小明 块

<div id="xiaoming" style="position:relative;top:50px;left: 5px;border: 1px solid #000;height: 100px; width:10%">小明</div></div></body></html>

然后发现有一个小问题，在每次弹出运行时间后会再次移动一次

后来仔细捋一下才发现run函数的写法有问题，即

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

//没错，下面这句！！！   XObj.style.left = "" + (count++ * 5 + 10) + "px";if(XObj.style.left == "30px") {clearInterval(runTimer);alert("恭喜您，共用" + count + "秒跑完全程！");}}

应该把出错的局放在下面，即判断到达终点后，不再改变其属性

function run() {var XObj = document.getElementById("xiaoming");//count++;if(XObj.style.left == "30px") {clearInterval(runTimer);alert("恭喜您，共用" + count + "秒跑完全程！");}else{XObj.style.left = "" + (count++ * 5 + 10) + "px";}}

这样，之前的问题就不存在了。。。所以说每一行code放在哪里需要细心考量，不要随便的码出来就放在那，真的很不好找出来。

0 0