Javascript - 距离（以像素为单位） - 决定

Question

我有一个简单的javascript动画，其中两个牛仔（iamges）'种族'基于随机区间数相互对方。

我无法找到如何做的是让脚本决定谁是赢家，这意味着如果牛仔首先达到预先定义的距离，剧本将知道并将显示提醒谁赢了。

这里是一个屏幕截图显示的例子：

这是我的代码至今：http://pastebin.com/Cmt4N8c9

能给我一些方向？

感谢， 布赖恩

Answer 1

在你move()功能，你应该这样做

if (x >= dest_x) { 
    alert('player 1 won'); 
} else if (x2 >= dest_x2) { 
    alert('player 2 won'); 
} else { 
    ... continue the loop ... 
} 

你最有可能把那个背后

document.getElementById("cowboy").style.top = y+'px'; 
document.getElementById("cowboy").style.left = x+'px'; 

document.getElementById("cowboytwo").style.top = y2+'px'; 
document.getElementById("cowboytwo").style.left = x2+'px'; 

你可能要检查你的代码顺便说一下，重复的变量也是如此。

AFAIK dest_x和dest_x2例如都是相同的。

Answer 2

简单移动

/* Y is not relevant since you only move it on X axis */ 

var position1 = 100; 
var position2 = 100; 

var dest  = 800; //Or any given value 

function move() { 
    var step1 = Math.floor(1 + (10 * Math.random())); 
    var step2 = Math.floor(1 + (10 * Math.random())); 

    position1 += step1; 
    position2 += step2; 

    document.getElementById("cowboy").style.left  = position1+'px'; 
    document.getElementById("cowboytwo").style.left = position2+'px'; 



    if(position1 < dest && position2 < dest) { 
     window.setTimeout('move()',100); 
    } else { 
     //We have the winner 
     if(position1 > dest) alert("Winner is Cowboy1"); 
     if(position2 > dest) alert("Winner is Cowboy2"); 

     //Its also possible that both of them pass target value at the same step 
    } 
}