When you want to write casual games using the HTML5 Canvas element,
you’ll need to find a way to handle your sprites. There are several
libraries available to help you writing games such
as ImpactJS, CraftyJS and so on. On my side, I’ve decided to
use EaselJS which has been used to writePiratesLoveDaisies: an HTML5
Tower Defense game. This awesome library works in all modern HTML5
browsers and could even help you building a
Windows 8 Metro Style
Applications HTML5 games.

Tutorial: Intro To React

For instance, if you’re running the Windows 8 Consumer Preview, you can
install the Pirates Love Daisies game from the Windows Store
here: Pirates Love Daisies for Windows 8

Before We Start

In this first article, we’re going to see how to use your existing
sprite elements and animate them

What We’re Building

Today, we’re going to build an interactive tic-tac-toe game.

If you like, you can check out the final result here: Final
Don’t worry if the code doesn’t make sense to you yet, or if it uses an
unfamiliar syntax. We will be learning how to build this game step by
step throughout this tutorial.

Try playing the game. You can also click on a button in the move list to
go “back in time” and see what the board looked like just after that
move was made.

Once you get a little familiar with the game, feel free to close that
tab, as we’ll start from a simpler template in the next sections.

教程:React介绍开始之前如何创建今天,我们要做一个互动的井字游戏。 如果你喜欢,你可以在这里查看最终结果:最终结果。如果代码对您没有意义,或者使用不熟悉的语法,请不要担心。在本教程中,我们将学习如何一步步构建这个游戏。 尝试玩这个游戏。你也可以点击移动列表中的一个按钮来“回到过去”,看看在移动完成后的面板看起来是什么样子。 一旦您熟悉了这个游戏,就可以关闭该选项卡,因为我们将从下一节的更简单的模板开始。

Pour ceux qui pratiquent la langue de Molière, vous trouverez une
version française ici : Jeux HTML5: animation de sprites dans l’élément
Canvas grâce à EaselJS


We’ll assume some familiarity with HTML and JavaScript, but you should
be able to follow along even if you haven’t used them before.

If you need a refresher on JavaScript, we recommend reading this
Note that we’re also using some features from ES6, a recent version of
JavaScript. In this tutorial, we’re using arrow
statements. You can use the Babel
to check what ES6 code compiles to.

前提条件我们将假定您熟悉HTML和JavaScript,但是您应该能够了解,即使您以前没有使用过它们。 如果您需要复习关于JavaScript的知识点,我们建议您阅读本指南。注意,我们还使用了ES6的一些特性,这是JavaScript的最新版本。在本教程中,我们将使用箭头函数、类、let和const语句。您可以使用Babel REPL检查ES6代码编译的内容。

This article is the first of a serie of 3:

How to Follow Along

There are two ways to complete this tutorial: you could either write the
code right in the browser, or you could set up a local development
environment on your machine. You can choose either option depending on
what you feel comfortable with.


- HTML5 Gaming: animating sprites in Canvas with EaselJS 
- HTML5 Gaming: building the core objects & handling collisions with
- HTML5 Platformer: the complete port of the XNA game to <canvas>
with EaselJS

If You Prefer to Write Code in the Browser

This is the quickest way to get started!

First, open this starter
in a new tab. It should display an empty tic-tac-toe field. We will be
editing that code during this tutorial.

You can now skip the next section about setting up a local development
environment and head straight to the

如果您喜欢在浏览器中编写代码。 这是最快的开始! 首先,在新选项卡中打开此启动程序代码。它应该显示一个空的井字游戏。我们将在本教程中编辑该代码。 现在您可以跳过下一节,介绍如何设置本地开发环境并直接进入概述。


If You Prefer to Write Code in Your Editor

Alternatively, you can set up a project on your computer.

Note: this is completely optional and not required for this

This is more work, but lets you work from the comfort of your editor.

如果您喜欢在编辑器中编写代码。 或者,您可以在您的计算机上设置一个项目。 注意:这是完全可选的,本教程不需要! 这需要做更多的工作,但可以让您通过您的编辑器进行舒适的工作。

If you want to do it, here are the steps to follow:

  1. Make sure you have a recent version of
  2. Follow the installation
    to create a new project.

如果你想这样做,下面是一些步骤: 1、确保您安装了最近版本的Node.js。 2、按照安装说明创建一个新项目。 npm install -g create-react-appcreate-react-app my-app
  1. Delete all files in the src/ folder of the new project (don’t
    delete the folder, just its contents).

1、删除新项目的src/文件夹中的所有文件(不要删除文件夹,只删除其内容)。cd my-apprm -f src/*
  1. Add a file named index.css in the src/ folder with this CSS
  2. Add a file named index.js in the src/ folder with this JS
  3. Add these three lines to the top of index.js in the src/ folder:

1、添加一个名为index.css的文件,在src/文件夹下,并用输入这个css代码。 2、添加一个名为index.js的文件,在src/文件夹下,并输入这个js代码。 3、将这三行代码添加到index.js的顶部,在src/文件夹: import React from 'react';import ReactDOM from 'react-dom';import './index.css';

Now if you run npm start in the project folder and open
http://localhost:3000 in the browser, you should see an empty
tic-tac-toe field.

We recommend following these
to configure syntax highlighting for your editor.

现在,如果您在项目文件夹中运行npm start,并在浏览器中打开http://localhost:3000,那么您应该会看到一个空的tic-tac-toe页面。 我们建议按照这些说明为编辑器配置语法高亮显示。

On the official EaselJS site, you’ll find some interesting samples and
some basic documentation. We will use the sprites sample as a base. We
will use also the resources available in the XNA 4.0 Platformer sample.
For those of you who are following my blog, you may remember that I love
playing with this sample. Here are the previous attached articles:

Help, I’m Stuck!

If you get stuck, check out the community support
In particular, Reactiflux
is a great way to get quick help. If you don’t get a good answer
anywhere, please file an issue, and we’ll help you out.

With this out of the way, let’s get started!

帮助,我遇到困难了!如果遇到困难,请查看社区支持资源。特别是,Reactiflux chat是获得快速帮助的好方法。如果你在任何地方都找不到好的答案,请提出一个问题,我们会帮你解决。 有了这些,让我们开始吧!

- Windows Phone 7 Platformer Starter Kit for XNA Studio 4.0 
- Silverlight 4 XNA Platformer Level Editor for Windows Phone 7


The platformer sample have been updated in the meantime by our XNA team
and is available here for Xbox 360, PC & Windows Phone 7: App Hub –
platformer . You can download it to play with it and extract the sprites
to use them with EaselJS.

What is React?

React is a declarative, efficient, and flexible JavaScript library for
building user interfaces.

React has a few different kinds of components, but we’ll start with

概述 React是什么? React是一个声明性的、高效的、灵活的JavaScript库,用于构建用户界面。 React有几种不同的组件,但我们将从React.Component开始:class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for {}</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); }}// Example usage: <ShoppingList name="Mark" />

We’ll get to the funny XML-like tags in a second. Your components tell
React what you want to render – then React will efficiently update and
render just the right components when your data changes.

Here, ShoppingList is a React component class, or React component
. A component takes in parameters, called props, and returns a
hierarchy of views to display via the rendermethod.

The render method returns a description of what you want to render,
and then React takes that description and renders it to the screen. In
particular, render returns a React element, which is a lightweight
description of what to render. Most React developers use a special
syntax called JSX which makes it easier to write these structures. The
<div /> syntax is transformed at build time to
React.createElement('div'). The example above is equivalent to:

我们马上就会讲到有趣的类似xml的标签。您的组件告诉React您想要呈现的内容——然后当您的数据发生变化时,响应将实时地更新和呈现正确的组件。 在这里,ShoppingList是一个React组件类,或React组件类型。组件接受参数,称为props,并返回通过render方法显示的视图层次结构。 render方法返回您想要呈现的内容的描述,然后对该描述进行响应,并将其呈现。特别是,render返回一个React元素,它是对要呈现的内容的轻量级描述。大多数情况下,开发人员使用一种称为JSX的特殊语法,这使得编写这些结构更加容易。在构建时,<div />语法被转换为React.createElement('div')。上面的例子等价于:return React.createElement('div', {className: 'shopping-list'}, React.createElement('h1', /* ... h1 children ... */), React.createElement('ul', /* ... ul children ... */));

See full expanded

If you’re curious, createElement() is described in more detail in the
but we won’t be using it directly in this tutorial. Instead, we will
keep using JSX.

You can put any JavaScript expression within braces inside JSX. Each
React element is a real JavaScript object that you can store in a
variable or pass around your program.

The ShoppingList component only renders built-in DOM components, but
you can compose custom React components just as easily, by writing
<ShoppingList />. Each component is encapsulated so it can operate
independently, which allows you to build complex UIs out of simple

如果您好奇的话,createElement()在API引用中会有更详细的描述,但是我们不会在本教程中直接使用它。相反,我们将继续使用JSX。 您可以在JSX内的括号内放置任何JavaScript表达式。每个React元素都是一个真正的JavaScript对象,可以存储在一个变量中,也可以在程序中传递。 ShoppingList组件只呈现内置的DOM组件,但是您可以通过编写<ShoppingList />,很轻松的组合成自定义React组件。每个组件都被封装起来,这样它就可以独立运行,这样就可以通过简单的组件构建复杂的ui。

In this article, we’re going to use these 2 PNG files as source of our
sprite sequences:

Getting Started

Start with this example: Starter

It contains the shell of what we’re building today. We’ve provided the
styles so you only need to worry about the JavaScript.

In particular, we have three components:

  • Square
  • Board
  • Game

The Square component renders a single <button>, the Board renders 9
squares, and the Game component renders a board with some placeholders
that we’ll fill in later. None of the components are interactive at this

开始从这个示例开始:启动代码。 它包含了我们今天所创建项目的框架。我们已经提供了样式,所以您只需要担心JavaScript。 具体来说,我们有三个组成部分: + Square+ Board+ GameSquare组件呈现一个单独的<button>,Board呈现9个Square,Game组件呈现一个带有一些占位符的Board,稍后我们将填充它。在这一点上,没有一个组件是交互式的。

Our monster running:

Passing Data Through Props

Just to get our feet wet, let’s try passing some data from the Board
component to the Square component.

In Board’s renderSquare method, change the code to pass a value prop
to the Square:

使用Props传递数据设定一个简单目标来开始你的学习或许会更好,让我们试着把一些数据从Board组件传递到Square组件。在Board的renderSquare方法中,更改代码将一个值传递给Square:class Board extends React.Component { renderSquare(i) { return <Square value={i} />; }

Then change Square’s render method to show that value by replacing
{/* TODO */} with {this.props.value}:

然后,更改Square的render方法,以显示该值,用{this.props.value}替换{/* TODO */}。class Square extends React.Component { render() { return ( <button className="square"> {this.props.value} </button> ); }}



After: You should see a number in each square in the rendered output.


View the current


Comment ()