canvas制作游戏_使用Canvas制作基于Sprite的游戏

canvas制作游戏

One advantage to working for Mozilla is the amount of talent that surrounds me;  James Long is one of those people.  James seems to know more about software engineering than anyone probably should.  I asked James to write a canvas-centric tutorial to show you all how to create a simple canvas game; he far exceded expectation, so much so that I couldn't dare repost it here.  Below is a summary of his epic post; please jump over to his site for the complete post!

为Mozilla工作的一个优势是，我周围有很多人才。 詹姆斯·朗 ( James Long)是其中之一。 James似乎比任何人都对软件工程了解更多。 我请詹姆斯编写一个以画布为中心的教程，向您展示如何创建一个简单的画布游戏。 他远远超出了期望，以至于我不敢在这里重新发布。 以下是他史诗般的职务摘要； 请跳转至他的网站以获取完整帖子！

The canvas element was introduced with HTML5 and provides an API for rendering on the web. The API is simple, but if you've never done graphics work before it might take some getting used to. It has great cross-browser support at this point, and it makes the web a viable platform for games.

canvas元素是随HTML5引入的，并提供了用于在Web上呈现的API。 该API很简单，但是如果您从未完成过图形工作，则可能需要一些时间来适应它。 目前，它具有强大的跨浏览器支持，并使网络成为游戏的可行平台。

Using canvas is simple: just create a <canvas> tag, create a rendering context from it in javascript, and use methods like fillRect and drawImage on the context to render shapes and images. The API has a lot of methods for rendering arbitrary paths, applying transformations, and more.

使用画布很简单：只需创建一个<canvas>标记，然后在javascript中从中创建渲染上下文，然后在上下文中使用fillRect和drawImage之类的方法来渲染形状和图像。 该API有许多方法可呈现任意路径，应用转换等。

In his article, James is going to create a 2d game with canvas; a real game with sprites, animations, collision detection, and of course, explosions! What's a game without explosions?

James在他的文章中将使用画布创建一个2D游戏。 一个带有精灵，动画，碰撞检测以及爆炸的真实游戏！ 没有爆炸的游戏是什么？

Read Post 阅读帖子 View Demo 查看演示

James will be updating his post (adding features, fixes, etc.) over the coming weeks and months so be sure to bookmark it and check often!

James将在未来几周和几个月内更新他的帖子(添加功能，修复程序等)，因此请务必将其添加书签并经常检查！

翻译自: https://davidwalsh.name/canvas-games

canvas制作游戏