簡單的Javascript循環，每秒重複

我正在編寫一個代碼來移動瀏覽器遊戲中的角色。我設法獲得它必須每秒水平和垂直移動的像素。簡單的Javascript循環，每秒重複

pxsecx是它必須每秒 pxsecy水平移動的像素的數目是相同的，但垂直

基本上它應該+ =他們當前的水平和垂直位置。

我需要循環每秒不斷重複，直到元素位置符合新位置（newx）。

這是據我已經走了：

<body onmousedown="showCoords(event)"> 
<script type="text/javascript"> 
function showCoords(evt){ 
    oldx = parseInt(document.getElementById("character").style.left); 
    oldy = parseInt(document.getElementById("character").style.top); 

    width = parseInt(document.getElementById("character").style.width); 
    height = parseInt(document.getElementById("character").style.height); 

    newx = evt.pageX - width/2; 
    newy = evt.pageY - height/2; 

    disx = newx - oldx; 
    disy = newy - oldy; 

    diag = parseInt(Math.sqrt(disx*disx + disy*disy)); 

    speed = 50; 

    secs = diag/speed; 

    pxsecx = disx/secs; 
    pxsecy = disy/secs; 

    while(document.getElementById("character").style.left<newx) 
     { 
     document.getElementById("character").style.left += pxsecx; 
     document.getElementById("character").style.top += pxsecy; 
     } 
} 
</script>

一切工作，直到在那裏我不知道該怎麼辦使它工作每一秒的時間。我在這裏測試它：http://chusmix.com/game/movechar.php

我該如何重複一次，所以它的工作原理？

感謝

來源

2011-05-03 lisovaccaro

的JavaScript主要是異步的，所以你需要重寫這一點了。 setTimeout在一段時間後執行一個功能。因此，您可以這樣做：

(function move() { 
    var character=document.getElementById("character"); 
    if(character.style.left<newx) { 
     character.style.left += pxsecx; 
     character.style.top += pxsecy; 
     setTimeout(move, 1000); 
    } 
})();

來源

2011-05-03 04:45:14 icktoofay

謝謝您的回答，請你告訴我怎麼把它列入到我的腳本。我嘗試過，但我在javascript中很糟糕。你能粘貼最終的代碼嗎？我不知道如何將它包括在內。非常感謝 – lisovaccaro 2011-05-03 04:52:55

只需用它替換當前的'while'循環即可。 – icktoofay 2011-05-03 05:11:47

在你的if語句中比較的值是不是相同的類型，這有什麼關係嗎？ 'if（「100px」<432）'似乎總是返回false。儘管它很接近，但它似乎並不是有效的代碼。你可以仔細檢查？我認爲一旦你的類型是相同的，這將起作用，但不是以當前的格式。 – jmort253 2011-05-03 05:24:00

您需要JavaScript setTimeout()函數。它每n毫秒調用一次函數。

來源

2011-05-03 04:46:17

毫秒，而不是微秒。 – icktoofay 2011-05-03 04:47:35

雖然你可以使用setTimeout來完成一些編碼，但你必須尋找setInterval，它會爲你做。 – erm3nda 2015-02-02 06:37:19

這是錯誤的。 'setTimeout'只調用一次函數*。要重複調用，請使用'setInterval'。 – Tom 2017-07-22 01:34:30

您可以使用該功能setInterval(function, interval)

// To start the loop 
var mainLoopId = setInterval(function(){ 
    // Do your update stuff... 
    move(); 
}, 40); 

// To stop the loop 
clearInterval(mainLoopId);`

來源

2015-01-23 09:52:58 B0ltz

間隔（在本例中用40表示）表示毫秒。 – vedi0boy 2017-10-30 21:17:26

我做了一個coffescript類來處理時間循環，也許這將是有幫助的人。

# Classe TimeLoop, execute a function every x miliseconds 
# 
# @example How o create a loop 
# myLoop = new TimeLoop((-> alert("loop"),1000) 
# myLoop.start() 
# 
class window.TimeLoop 
    constructor: (@function,@miliseconds) -> 

    # Start loop. 
    # 
    start: -> @loop = setInterval @function, @miliseconds 

    # Stop loop. 
    # 
    stop: -> clearInterval(@loop)

鏈接要點：https://gist.github.com/germanotm/6ee68f804860e2e77df0

來源

2015-04-14 19:22:28 Germano

簡單的Javascript循環，每秒重複

回答

相關問題