2011-11-03 33 views
2

我想制作一些非常简单的棋盘游戏,在您的浏览器中播放。 AFAIK,实际上只有两种技术能够做到这一点:HTML5 Canvas和Flash。我认为Flash已经出来了,所以我认为我应该开始学习如何使用画布。构建简单网络游戏的技术?

我的问题:

  1. 是否有任何其他竞争技术/技术,我应该考虑?
  2. 如果画布是要走的路,我可以从哪里开始?我已经知道HTML,JavaScript和jQuery。我最感兴趣的是学习如何绘制基本形状并检测这些形状上的点击事件。

我不太在意支持旧浏览器。很显然,我希望尽可能接触到更多的观众,但是......我想现在是时候人们开始升级他们的浏览器,如果他们想跟上世界其他地方的话,这不会是你应该在工作中访问某种网站,因此公司政策不适用。

回答

2

1.你是对的,至于高性能浏览器游戏去,画布和Flash是你唯一的真正选择。那么,Java小程序在技术上也是一种可能性。

对于游戏来说,SVG是一个非常糟糕的选择。一切都是一个DOM对象,它引入了无法优化的大量开销。

画布可能是所有好选择中最具前景的。 Flash在移动设备上并不是很好,如果iOS拒绝使用它,那么如果你走这条路线,你会得到一个更小的市场。我写了一些教程,making selectable, movable shapes on a Canvas。我应该很快给他们一个重写。

否则它确实取决于。如果你有一个特定的问题,那么搜索StackOverflow是很好的,你永远不应该害怕问问题。游戏和与性能相关的问题是一些最有趣的答案,因为有时解决方案非常不直观。

+0

Your implying Canvas is faster then SVG/DOM。这只是错误的。与手工优化的DOM和CSS相比,没有什么能够提高性能 – Raynos

+0

事实并非如此。特别是当屏幕上有1,000 - 100,000个动态元素时,SVG/DOM元素与Canvas相比非常慢。与Canvas相比,即使仅加载任何类型的DOM DOM元素速度也是可悲的。另请参阅:http://stackoverflow.com/questions/5882716/html5-canvas-vs-svg-vs-div/5883032#5883032 –

+1

“非常简单的棋盘游戏”“1000 - 100,000个动态元素”。对于真正简单的棋盘游戏,DOM会更快,因为复杂的系统画布会更快。 – Raynos

1

不确定你甚至需要画布来做你正在谈论的内容,但是有很多HTML5/JS/Canvas的游戏引擎可能需要检查。下面是一个良好的开端:https://github.com/bebraw/jswiki/wiki/Game-Engines

+0

当然,我可以用HTML表格和/或图像构建跳棋,并使用jQuery来滑动一些棋子......但我希望有一些灵活的东西可以随着我的游戏变得更加复杂而扩展。我不希望必须切换技术,因为我选择的东西太有限,或太难以应付。不是真的在寻找一个完整的游戏库,但我会在这些高峰期。我只是想能够做一些基本的图形。我还必须学习如何进行沟通方面! – mpen

1

帆布是好的,但你也应该考虑使用SVG,可能与Raphael库,也有很好的浏览器的支持。如果您打算制作多人游戏,您还应该调查WebSockets以及可能的Socket.io图书馆。

+0

我做了一个单独的问题来讨论游戏之间的沟通:) http://stackoverflow.com/questions/7989344/javascript-library-for-push-comet-reverse-ajax-notifications – mpen

+0

我与拉斐尔的问题,当我简单地试了一下,是我无法使其内联工作。坐标系似乎相对于窗口而不是画布。我不需要在屏幕上绘制所有东西,只需在一个小小的画布中绘制:) – mpen

2

为了在一两年前教我自己的jQuery,我用简单的HTML,CSS和jQuery编写了Memory Game(在这里你可以翻转tile并找到匹配项)。我认为你将能够实现各种棋类游戏,甚至不需要在画布上书写。

+0

我想我必须使用图像才能获得漂亮的消除锯齿形状,但我必须使用绝对定位才能获得碎片滑过全板...我只是不确定它是最干净还是最简单的方法。 – mpen

+0

我很惊讶于做一个优雅的内存游戏实现(几十行jQuery-juiced Javascript)是多么容易。 “棋盘游戏”当然涵盖了很多领域,但你可以用jQuery做很多事情。我的记忆游戏,虽然演示文稿是一个4×4的图像网格既不使用绝对定位也不使用表格。 –

+0

当然,但是你可能没有翻牌或者滑下棋盘或任何东西?我不需要那些可爱的动画开始,但是当我开始做最后的动作时,我想要这个选项。 – mpen