製作一個平滑的畫布球

我寫了一個多人乒乓球遊戲，但由於~60ms的延遲，我的彈跳球並不順暢。 The game itself is available here，但由於它僅適用於Chrome和本身是用我的母語網站（你也顯然需要，以便它的工作兩個瀏覽器），這是問題的的jsfiddle：製作一個平滑的畫布球

正如您在小提琴中看到的那樣，dx和dy被定義，每秒更新被定義爲speed。我需要這三個變量保持不變（我知道它們導致球不能平穩移動）。

現在的問題：是否有任何技巧不觸及這些變量，但讓球看起來像移動平穩？我正在考慮渲染球的新位置+以50％的不透明度渲染球的前一個位置，但我還沒有測試它。有沒有其他解決方案來解決這個問題？

2013-10-23 ojek

是否有一個特定的原因，您不想觸摸'dx'，'dy'和'speed'？更頻繁的更新使得動畫更流暢。 –

@JasonP：首先，在我的原始應用程序中，'dx，dy'儘可能小（值1和2）。所以就是這樣。由於客戶端和服務器之間的延遲（大約50ms），「速度」不能改變，我也無法做任何事情。所以我需要一些技巧。 – ojek

如果您讓遊戲在客戶端上自行生成動畫，並且僅在需要與服務器同步時進行更改，該怎麼辦？此外，你可以讓步驟小於一步。 –

我認爲，正如@Jason所說的，您可以在動畫中使用精確的步驟（例如使用animationFrame），並分別處理獲取遠程信息的問題。
但是，爲了快速解決問題，您可以使用我有時使用的技巧：通過清除具有較低不透明度的context2d來獲得路徑/陰影效果。
所以清除功能變爲：

function clear() { 
    cxt.globalAlpha=0.3; 
    cxt.fillStyle='#FFFFFF'; 
    cxt.fillRect(0, 0, WIDTH, HEIGHT); 
    cxt.globalAlpha=1; 
}

，那麼你必須在draw（）函數不明確，並調用清除（）抽獎循環。

我更新您的提琴：

發揮與阿爾法得到你想要的效果。

Rq：您可能想要以完全不透明的方式清除屏幕的某些部分（如分數），並且只在畫布的動畫部分使用較低的不透明度。

2013-10-23 22:34:22 GameAlchemist

以下修改了您的代碼+1 Nice motion effect！我不清楚OP的問題......他們是問如何處理一個遲緩的動畫，或者他們問如何處理客戶端和服務器之間的網絡延遲？我擔心他們會讓服務器傳輸每個球的位置，而不是在客戶端進行計算/動畫。 – markE

Thx，我也喜歡它！一個低成本的模板緩衝區！這個問題似乎是關於隱藏一個壞的動畫，但事實上，是的，擁有一個固定的時間框架不會浪費時間處理玩家的時鐘並嘗試猜測另一個人的實際位置。所以@ojek應該去動畫幀，並開始編碼棘手的滯後計算:-) – GameAlchemist

而這正是我所期待的！謝謝！ – ojek

您可以在每個循環中不執行2 * pi計算而獲得一點性能。將其調整爲6.28的靜態值。

你可能也想看看processing.js，這可能會加快速度。

2013-10-23 19:23:06

-1

你的數學沒有問題。你應該使用requestAnimationFrame。更改您的初始化函數，以便它看起來像這樣：

function init() { 
    window.requestAnimationFrame(init, cxt) 
    draw(); 
}

你可能還需要一個polyfill for requestAnimationFrame得到它的工作在所有瀏覽器。

2013-10-23 19:41:40 d13

這是醜陋的，但在這裏是爲你一個FPS參考： http://jsfiddle.net/yc6Lb/84/

具體使用requestAnimationFrame()並具有FPS計數器。需要注意的性能差異:)

這裏有一個漂亮的代碼版本：http://jsfiddle.net/neuroflux/Ey9uz/1/
你是最歡迎！

2013-10-23 21:32:10

回答