HTML5 + JavaScript - 將角色移向鼠標位置？

我的畫布中間有一個角色，他總是面向我的鼠標位置 - 無論它在畫布上。HTML5 + JavaScript - 將角色移向鼠標位置？

我現在想做的事情是，當我按下W或向上箭頭時，我的角色會走向老鼠。我不確定這背後的數學，所以我要求一點幫助。

現在，我有這個功能，監聽出於對WASD /方向鍵：

Player.prototype.playerAnimation = function(){ 

    //UP 
    if(this.isUpKey){ 

     //Character movement [drawX/Y is the position of character] 
     this.drawY = mouseY; 
}

當然，雖然，這只是移動人物到我的鼠標的Y位置 - 我不是什麼尋找所有。我只是不知道需要什麼樣的配方？

感謝

來源

2013-01-22 Oliver Jones

如果你已經成功地朝着老鼠旋轉，你必須計算的字符和光標之間的角度，因此，現在的絕對值（=mouseY）移動你應該增加this.drawY和this.drawX由某些值將有效地是你的角色的速度。

但是，你想要的X的對角線和Y移動到是價值，所以這樣的事情會打破它到組件X和Y：

this.drawX=this.drawX+this.speed*Math.cos(d2r(angle)); 
this.drawY=this.drawY+this.speed*Math.sin(d2r(angle));

，倘若你是以度數代替弧度：

function d2r(d){ 
    var r=d*(Math.PI/180); 
    return r; 
}

根據角度的確定方式，您可能需要使用公式中的符號。哦，如果你想要它繼續移動，如果按鍵保持按下，你會想添加一些setTimeout以便在一段時間後重新調用playerAnimation函數

來源

2013-01-22 20:39:03

謝謝，我試過了，我的角色只是繼續向右移動。這可能是我的角度待辦事項？被稱爲characterRotation的我的角度是這樣的： var targetX = mouseX - （this.drawX + this.charWidth/2）; var targetY = mouseY - （this.drawY + this.charHeight/2）; this.characterRotation = Math.atan2（targetY，targetX）;然後我有你的位： this.drawX = this.drawX + this.walkingSpeed * Math.cos（d2r（this.characterRotation））; this.drawY = this.drawY + this.walkingSpeed * Math.sin（d2r（this.characterRotation））; 任何想法？ –

拿出我的代碼中的'd2r'部分，我假設你的角度是度，但它已經在弧度 –

啊耶！輝煌，像魅力一樣工作！謝謝機器人！ –

你不應該使用sin和cos，因爲這些函數很慢，因此你不能在計算數據中使用角度（你只需要它來旋轉精靈或類似的東西）。

首先，您應該使用x，y，xspeed，yspeed，速度（每秒像素數）和方向屬性來創建對象。

讓我們假設你的角色在速度= 5的位置（10,10）。現在你用鼠標點擊（或者只是懸停）位置（50,40）。首先你必須得到dx和dy（delta）。

dx = mouse.x - character.x // 50 - 10 = 40 
dy = mouse.y - character.y // 40 - 10 = 30

下一步獲得從字符位置到鼠標位置的距離。

distance = sqrt(dx*dx + dy*dy) // sqrt(40*40 + 30*30) = sqrt(1600 + 900) = 
           // = sqrt(2500) = 50 (Pythagorean theorem)

現在我們可以計算字符的xspeed和yspeed。

factor = distance/character.speed // 50/5 = 10 
character.xspeed = dx/factor // 40/10 = 4 
character.yspeed = dy/factor // 30/10 = 3

現在讓我們假設你有每秒你的物理環路的60個蜱（可能是你的物理循環不會從你的主循環分離，它只是你的FPS數）。每一個勾號你的角色x增加xspeed，y yspeed（如果你正在按鍵）。所以一秒鐘後（這需要60個滴答聲）你的角色將在位置(10 + 60*4, 10 + 60*3) = (250, 190)。它速度很快，所以你可以降低你的角色速度或降低你的fps（我不推薦它）。

如果你想讓你的角色在鼠標位置停下來（如在cRPG中），然後使用計時器或計數器。您的角色到達鼠標位置所需的滴答計數是之前計算的factor，這等於10。你的循環10次後，字符位置將是（50,40）。所以你可以在字符對象中創建var ticks，每個循環tick將它減1，當它變爲0時，將xspeed和yspeed的字符重置爲0，這樣它就不會再移動了。另一種方法是使用超時，但情況更糟。在10/60s = 1/6s〜= 0.18s之後，超時回調函數會將xspeed和yspeed的字符重置爲0.

如果需要角度，可以使用dx/dy和tan來計算。

這種做運動的方式比使用sin和cos快得多。

當然，您通過在（character.x，character.y）位置繪製字符來渲染運動。

來源

2013-01-23 00:34:21

HTML5 + JavaScript - 將角色移向鼠標位置？

回答

相關問題