用於在Canvas中實現的跳棋棋盤遊戲的合適模型，其中包含動畫

因爲它現在是我的Board對象，它包含一個8x8 2維數組（網格，我稱之爲），並且片段用ints 1/2，我用一個按位操作來標記一塊作爲國王。用於在Canvas中實現的跳棋棋盤遊戲的合適模型，其中包含動畫

我還有一個Checkers對象，用於處理棋盤的渲染和用戶在畫布上的點擊等。Checkers對象有一個Draw方法，它只是遍歷Board對象上的網格，以創建一個圖形表示董事會。因此，每次調用Draw（）時，都會重新繪製板子，並重新計算棋子位置。

現在我想添加動畫。我能夠實現這一點的一種方式是跟蹤最近的移動（源和目標XY座標），然後以設定的間隔運行Draw()例程，並且檢查例程Draw()以查看座標即將繪製的棋子與前一個棋子的目標變量中記錄的座標相同，並相應地調整棋子的位置。

雖然這個工程，我覺得它是一個混亂。

我嘗試過的另一種模式是使用物體代替整數，然後我可以在該物體上記錄像素X Y座標，並在每次移動（或在動畫循環中）後更新它們。我也發現這很麻煩，並且不喜歡我的棋盤對象現在被綁定到渲染邏輯中的方式。

任何有這方面經驗的人都會提出一種更好的做事方式嗎？

值得注意的是，我在服務器端（NodeJS）使用了相同的Board類，所以理想情況下我希望在客戶端和服務器上保持Board類相同，以確保客戶端的動作和驗證永遠不會被服務器拒絕。

來源

2011-09-20 NoPyGod

我建議對於每個從你首先繪製所有不移動的部分，然後沿着一些插入線從開始到結束位置（由時間給出）繪製移動部分。老實說，對於具有這種圖形複雜度的東西，我會堅持使用HTML/CSS/jQuery，使用position: absolute圖像來表示這些部分。然後，您可以使用jQuery的動畫功能來真正輕鬆地顯示從開始到結束位置的最後一塊（並使用像swing或linear這樣的參數來獲得所需的行爲）。例如： -

// Assumes pieces are objects with id and position properties 
// and for each piece there is an image with id: piece.id 

$('#'+piece.id).animate({ 
    left: piece.position.x * board_scale, 
    top: piece.position.y * board_scale 
});

來源

2011-09-23 12:55:09 andrewmu

你沒有提到瀏覽器的支持，但假設你使用IE9 +只有我與CSS3 transitions這允許極爲流暢的動畫與您的最終很少的工作堅持下去。即使在移動設備上，動畫也可以進行硬件加速，這意味着它們通常非常漂亮。

蘋果已經取得跳棋試玩採用這種技術:)

https://developer.apple.com/safaridemos/checkers.php

// css 
.piece { 
    -webkit-transition: all ease-in .75s; 
    -moz-transition: all ease-in .75s; 
    transition: all ease-in .75s; 
} 

// js 
var aPiece = document.getElementById('aPiece'); 
var newLocation = "translate(20px, 30px)"; 
aPiece.style.webkitTransform = newLocation; 
aPiece.style.mozTransform = newLocation; 
aPiece.style.transform = newLocation;

這將自動爲動畫你:)

來源

2012-04-30 13:34:45

如果你想用帆布：
使用兩，完全相互定位。

然後，拿下一個，繪製所有的靜態元素。
而上部只繪製動畫，即移動元素。

這將爲您提供最佳性能，因爲只有變化的元素必須重繪。

來源

2013-05-01 18:47:40 Chris

用於在Canvas中實現的跳棋棋盤遊戲的合適模型，其中包含動畫

回答

相關問題