2013-11-23 52 views
1

我決定在我的學期休息時開始一個項目,使用asp.net創建一個國際象棋引擎。我對如何實現引擎本身有一個好主意,我的問題是將其繪製到瀏覽器的最佳方式是什麼?使用Asp.net的國際象棋引擎

我打算使用asp:image控件,並在每次鼠標向下事件時在棋盤圖像上重繪棋子。我將有一個ChessPiece對象的二維數組,它具有用於繪製不同部分的抽象繪製方法,有點像2D瓦片地圖。這將使用.NET中的Drawing類完成,但是我在MSDN網站上閱讀了它不受asp.net支持。

基本上我的問題是什麼是使用asp.net將服務器端圖像繪製到客戶端的最佳方式。我以前沒有做過這樣的事情,所以如果你能指出我正確的方向,我將不勝感激。

乾杯,戴夫。

回答

2

如果是我,我會完全用HTML,CSS和JavaScript製作界面。你可以很容易地使用HTML和CSS來生成電路板。然後,你會想創建一個所有棋子的CSS「精靈」。精靈基本上是將一堆圖像拼接成一個圖像(然後創建具有不同名稱的CSS類,這些名稱指定要在一次顯示的精靈部分)。所以你可以創建類似於<div class="rook white"></div>的東西,從CSS精靈顯示白色車。然後,您將爲每件作品製作一個<div></div>元素,並將它們放置到HTML中,以便它們顯示在棋盤上的方格中。然後,您可以使用JavaScript在每件作品上連接mousedown/mouseup事件。我可能會將電路板格式以JSON格式存儲在內存中,然後當用戶試圖移動這一塊時,我會使用JavaScript驗證移動。如果這是一個有效的舉動,我會展示一個加載微調器並通過JavaScript執行一個Ajax請求到你的ASP.NET代碼。我將使用WebApi託管ASP.NET代碼。您的WebApi控制器將接受具有新板狀態的POST數據。然後,它可以計算計算機應該做出什麼動作,並以新的板子狀態返回爲JSON。然後您的JavaScript可以更新其內部的JSON,並且您可以更新HTML界面。實現這種雙向綁定的簡單方法是使用Angular.js或Knockout.js。如果您使用任一框架,您可以避免在HTML中設置初始板,而是使用JSON設置板,並相應地創建相應的HTML。板狀態更新後,我會隱藏加載微調器。

1

如果您正在學習,可能需要了解如何使用畫布在客戶端繪製所有內容 - 同時更新一些html 5技能。這樣,你可以實現很好的拖/放動畫等類型...