2013-11-23 53 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技能。这样,你可以实现很好的拖/放动画等类型...