Question

我正在研究编写我的第一个HTML5游戏，我看到的所有内容都谈到了Canvas，然后继续谈论事件，游戏循环等事情。

我打算制作棋盘游戏，所有图像都放在网格上。不需要发生游戏循环，因为在用户与游戏进行交互之前，所有内容都只是坐在那里。而且因为电路板和图块的图像都放在网格上，我可以很容易地（据我所知）使用标签，用标准CSS布局，而不是将它们全部绘制到画布元素中。

那么我有理由在这里打扰帆布吗？仅使用“普通网页”HTML元素来创建我的游戏界面是否有意义？

Answer 1

Canvas非常适合制作不是正方形的游戏，例如等距或六角形瓷砖游戏，或者基于动作的游戏，其中玩家的精灵需要大范围的移动，或类似“愤怒的小鸟”，其中没有任何东西是真的基于网格。对于其他方面，由于在许多现代浏览器中进行硬件加速，它可能会过度，但可能会允许更快的图像处理和效果。

对于你所说的，基于网格的棋盘游戏，使用普通的HTML元素是完美的。如果你不需要任何花哨的图形效果，那么你可以安全地忽略canvas标签。

旁注：您可以使用画布制作动态骰子滚动画。这会让事情变得更有趣，并给骰子带来额外的“悬念”效果。或者你也可以轻松使用6（或12）GIF动画。

Answer 2

html5 / css3和javascripted canvas标签之间存在显着差异。

HTML5 / CSS3
在这种情况下，您只是使用更新的标签来呈现内容，由一些漂亮的CSS属性修改。然后，您将使用“标准”js（和js框架）来控制游戏逻辑并定义用户交互和动画（或使用CSS3过渡来控制任何动画）。

如您所知，要创建几个矩形：

div#red{
background-color:red;
height:50px;
width:50px;
position:relative;
}
div#blue{
background-color:blue;
height:50px;
width:50px;
position:relative;
}
<div id="red"></div>
<div id="blue"></div>

如果你想（不必要地）制作HTML5，那么它们可能是section而不是div。 CSS3肯定会为您提供许多不错的新演示功能，特别是像box-shadow这样的功能。

<强>帆布
这是一种根本不同的工作方式 - 更接近像Flash / Actionscript这样的东西，通过javascript以编程方式定义内容和表示。例如 - 这就是你如何创建类似的矩形：

var canvas = document.getElementById("canvas");
function draw() {
  var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 55, 50);
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 55, 50);
  }

以类似的方式定义游戏逻辑和用户交互。后一个例子的灵活性和强大功能不容小觑。

我说这一切只是为了说明这两种技术的根本区别。现在， IF 你可以用标记，css和javascript行为做你想做的一切，然后一定要这样做。这没有什么不妥。

另一方面，使用canvas标签可以为您提供更高的灵活性和对项目的控制，例如，允许更复杂，更细微的动画和交互。

最后，这两种路线都存在固有问题，特别是浏览器支持。如果你只针对最新的浏览器，那么我不确定它是否重要，但回过头几代并迅速支持掉线。

Answer 3

然后SVG是您的正确选择。 Canvas是程序性的，SVG是声明性的和可伸缩的。 http://raphaeljs.com是一个很棒的框架。

Answer 4

如果你想在没有进一步改进的情况下创建游戏，你可以在没有画布的情况下完成。但使用画布为您提供了很多可能性。以下是其中一些：

所有精灵都出现在画布中，而不是DOM中。在浏览器中添加/删除DOM中的元素非常困难;特别是如果你打算使用CSS动画（用于移动平台）。画布上的动画要轻得多。现在开发的“requestAnimationFrame”更是如此。它将大大提高渲染速度。
您可以在画布精灵上应用不同的样式，甚至可以动态更改它们。 Canvas支持渐变。您可以在画布区域使用“裁剪”操作动态创建精灵。
画布上所有精灵的缩放只能通过一个“缩放”功能来执行。扩展由大量HMTL标签组成的游戏可能非常困难。
使用canvas实现基于图层的游戏领域很容易。它可以轻松控制游戏元素。

在我们的Enterra HTML5Poker - http://demo.enterra-poker.com/html5/index.html中，我们使用canvas和HTML标签来组织游戏领域。我们使用常见的HTML标签来组织列表，弹出窗口和交互元素;和画布用于显示游戏桌，卡片，头像和其他元素。

使用HTML5 + JS作为游戏开发的基础技术，可以将简单的应用程序移植到不同的移动平台。例如iPhone - http://itunes.apple.com/us/app/enterra-poker/id492214596，Android，Windows Phone等。

Answer 5

HTML5标签也可用于创建精彩的游戏，甚至是像canvas一样创建的游戏。这个概念是你创建一个游戏盒（假设a），然后在JavaScript中创建一个刷新框并再次绘制图形的函数。此函数首先将游戏框的innerHTML设置为“”（没有，清除图形的其他方式），然后创建包含要在游戏中呈现的文本或图像的其他元素。因此，在声明并附加所有游戏标签之后，可以使用requestAnimationFrame（）函数来连续调用该函数。我创建了一个名为CurveJS的框架，它完全专注于HTML5渲染。它还为您提供诸如裁剪，图形编辑以及您可以在画布上找到的许多其他内容的功能

没有画布的HTML5游戏？

5 个答案: