想要快速上手HTML5 Canvas小游戏开发？下面通过一个例子来进行手把手教学。（如果你怀疑我的资历， 这个游戏的半数以上开发是由我完成的）
我们直接来看源码里的,当然你也可以一下游戏先。
// Create the canvas
var canvas = document.createElement(&canvas&);
var ctx = canvas.getContext(&2d&);
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
首先我们需要创建一张作为游戏的舞台。这里通过JS代码而不是直接在HTML里写一个&canvas&元素目的是要说明代码创建也是很方便的。有了画布后就可以获得它的上下文来进行绘图了。然后我们还设置了画布大小，最后将其添加到页面上。
// 背景图片
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
bgImage.src = &images/background.png&;
游戏嘛少不了图片的，所以我们先加载一些图片先。简便起见，这里仅创建简单的图片对象，而不是专门写一个类或者Helper来做图片加载。bgReady这个变量用来标识图片是否已经加载完成从而可以放心地使用了，因为如果在的。
整个游戏中需要用到的三张图片：，及我们都用上面的方法来处理。
// 游戏对象
var hero = {
speed: 256, // 每秒移动的像素
var monster = {
var monstersCaught = 0;
现在定义一些对象将在后面用到。我们的英雄有一个speed属性用来控制他每秒移动多少像素。怪物游戏过程中不会移动，所以只有坐标属性就够了。monstersCaught则用来存储怪物被捉住的次数。
处理用户的输入
// 处理按键
var keysDown = {};
addEventListener(&keydown&, function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener(&keyup&, function (e) {
delete keysDown[e.keyCode];
}, false);
现在开始处理用户的输入(对初次接触游戏开发的前端同学来说，这部分开始可能就需要一些脑力了)。在前端开发中，一般是用户触发了点击事件然后才去执行动画或发起异步请求之类的，但这里我们希望游戏的逻辑能够更加紧凑同时又要及时响应输入。所以我们就把用户的输入先保存下来而不是立即响应。
为此，我们用keysDown这个对象来保存用户按下的键值(keyCode)，如果按下的键值在这个对象里，那么我们就做相应处理。
开始一轮游戏
// 当用户抓住一只怪物后开始新一轮游戏
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// 将新的怪物随机放置到界面上
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
reset方法用于开始新一轮和游戏，在这个方法里我们将英雄放回画布中心同时将怪物放到一个随机的地方。
// 更新游戏对象的属性
var update = function (modifier) {
if (38 in keysDown) { // 用户按的是↑
hero.y -= hero.speed * modifier;
if (40 in keysDown) { // 用户按的是↓
hero.y += hero.speed * modifier;
if (37 in keysDown) { // 用户按的是←
hero.x -= hero.speed * modifier;
if (39 in keysDown) { // 用户按的是→
hero.x += hero.speed * modifier;
// 英雄与怪物碰到了么？
hero.x &= (monster.x + 32)
&& monster.x &= (hero.x + 32)
&& hero.y &= (monster.y + 32)
&& monster.y &= (hero.y + 32)
++monstersCaught;
这就是游戏中用于更新画面的update函数，会被规律地重复调用。首先它负责检查用户当前按住的是中方向键，然后将英雄往相应方向移动。
有点费脑力的或许是这个传入的modifier 变量。你可以在main 方法里看到它的来源，但这里还是有必要详细解释一下。它是基于1开始且随时间变化的一个因子。例如1秒过去了，它的值就是1，英雄的速度将会乘以1，也就是每秒移动256像素；如果半秒钟则它的值为0.5，英雄的速度就乘以0.5也就是说这半秒内英雄以正常速度一半的速度移动。理论上说因为这个update 方法被调用的非常快且频繁，所以modifier的值会很小，但有了这一因子后，不管我们的代码跑得快慢，都能够保证英雄的移动速度是恒定的。
现在英雄的移动已经是基于用户的输入了，接下来该检查移动过程中所触发的事件了，也就是英雄与怪物相遇。这就是本游戏的胜利点，monstersCaught +1然后重新开始新一轮。
// 画出所有物体
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
ctx.fillStyle = &rgb(250, 250, 250)&;
ctx.font = &24px Helvetica&;
ctx.textAlign = &left&;
ctx.textBaseline = &top&;
ctx.fillText(&Monsterrs caught: & + monstersCaught, 32, 32);
之前的工作都是枯燥的，直到你把所有东西画出来之后。首先当然是。然后如法炮制将英雄和怪物也画出来。这个过程中的顺序是有讲究的，因为后画的物体会覆盖之前的物体。
这之后我们改变了一下Canvas的绘图上下文的样式并调用fillText来绘制文字，也就是记分板那一部分。本游戏没有其他复杂的动画效果和打斗场面，绘制部分大功告成！
主循环函数
// 游戏主函数
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
then = now;
// 立即调用主函数
requestAnimationFrame(main);
上面的主函数控制了整个游戏的流程。先是拿到当前的时间用来计算时间差（距离上次主函数被调用时过了多少毫秒）。得到modifier后除以1000(也就是1秒中的毫秒数)再传入update函数。最后调用render 函数并且将本次的时间保存下来。
关于游戏中循环更新画面的讨论可参见「」。
关于循环的进一步解释
// requestAnimationFrame 的浏览器兼容性处理
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
如果你不是完全理解上面的代码也没关系，我只是觉得拿出来解释一下总是极好的
为了循环地调用main函数，本游戏之前用的是setInterval。但现今已经有了更好的方法那就是requestAnimationFrame。使用新方法就不得不考虑浏览器兼容性。上面的就是出于这样的考虑，它是的一个简化版本。
启动游戏！
// 少年，开始游戏吧！
var then = Date.now();
总算完成了，这是本游戏最后一段代码了。先是设置一个初始的时间变量then用于首先运行main函数使用。然后调用 reset 函数来开始新一轮游戏（如果你还记得的话，这个函数的作用是将英雄放到画面中间同时将怪物放到随机的地方以方便英雄去捉它）。
到此，相信你已经掌握了开发一个简单H5小游戏需要的基本功了。或者自己研究研究吧 :)
阅读(...) 评论()
恭喜妳发现本彩蛋， happy coding
\(^___________^)/中文(简体)
中文(繁體)
中文(台灣)
中文(新加坡)
中文(香港)
选出你的风格。尽管成功游戏都有其独到之处，但几乎所有游戏也都有特定的风格。想好你要制作哪种游戏，然后看看同一风格的其他游戏是怎么做的。一些常见风格包括：
RPG角色扮演
第一人称射击
剧情、漫画为基础的日式角色扮演
挑选开发平台。你选来开发游戏的平台会深刻影响其开发方式。游戏平台决定了操控游戏的方式，智能手机游戏则是典型的基于触屏和倾斜感应而设计的，PC游戏一般需要一个键盘和一只鼠标，单机游戏则需要游戏键盘。
这些规则也有例外，但一般来说围绕特定的控制方式展开设计则要容易一些。
如果你想开发一款iPhone游戏，那你得通过一台Mac提交到Apple Store。
写一写预设计。这应该只要几页，但却是你创造的电脑游戏玩法的核心所在。它包含你游戏的基本概念，通过预设计你该清楚你的电脑游戏是否可行。
从核心理念出发。这份说明该作为游戏背后的动力。这些都是把握游戏核心的简单说明。经常回过头来看看，以确保你的游戏没有偏离基本目标。一些典型的核心理念如下：
这款游戏模拟管理太空站。
这款游戏让你驾驶虚拟的汽车。
这款游戏用来测试玩家的反应。
写一下你的特色。这些是你的游戏区别于同一类型其他游戏的地方。先从你的理念和概念写起。把具体的概念转变为动作主导的句子。争取写5-15个特征。例如：
概念：太空站建造
特征：建造并管理你个人的太空站
概念：来自小行星的破坏
特征：应对包括小行星、太阳耀斑和彗星在内的灾难，竭力存活
先把你的游戏特色写出来，这样有助于你之后在游戏文件里充实每一部分。在开头列出游戏特色，可以让思路连贯专一，不容易在之后的设计过程中弄糊涂自己。
继续修正这些特色，直至你觉得他们足以代表你想要的游戏。
休整。把预设计塞进抽屉里，尽量一两个礼拜不要去想它。这样你方可带着崭新的视角重新审视。这有助于你决断这个项目是否真的值得继续追求，或者你是否需要重头再来一遍。
开始游戏的细化设计。这份设计文件是整个游戏的骨干所在。它包含了对你游戏机制、情节、设置、美学设计等的详细描述。设计文件应该内容重于形式。
如果你带着一支程序员和设计师队伍，那么设计文件就尤为重要了。确保和他们一起磨合这份文件，但先别和终端玩家接触。这个文件对游戏每一部分机制如何发挥，都要交代得清清楚楚。
并非所有游戏都需要设计文件，也不会有相似的两份设计文件。把这些步骤当做指南，但自由修改设计文件，以适应游戏的需求。
拟出目录。游戏的方方面面都要在目录里体现。除非故事和游戏机制从根本上紧密联系，否则唯一不需要写进目录的就是故事本身。
以游戏说明书的方式完成目录。先从概述开始，比如角色创造，战斗，主界面，然后用更小的板块充实每一部分。
把目录当做游戏大纲。目录里每一条都慢慢详细展开。
扩充目录的每一版块。游戏目录写好后，开始扩写机制。花点时间把细节想好，这样你编程时才能毫无疑问。每一个机制都应该详尽解释，这样用到具体机制时才不会出岔子。
另由他人或你的队友来运行。这得看你是怎么完成啦，总之游戏设计是个集体合作的过程。他人的视角有助于你专注游戏，并能指出你原先没有虑及的方面。
选一个游戏引擎。游戏引擎是游戏的基础。其中包含了大量开发工具，以便游戏创作。相比从头开始创建一个游戏引擎，利用现有的则高效得多，简单得多。现在已有许多供独立开发者使用的游戏引擎。
有了游戏引擎，再处理图像、声音和人工智能（AI）部分就容易多啦。
不同的游戏引擎各有利弊。有些适合2D，有些则更适合3D。有些引擎较其他需要更多编程知识。有不少游戏开发工具无需编程经验就能上手。流行的独立发开游戏引擎包括：
GameMaker: 最受欢迎的2D 游戏引擎之一。
Unity – 一款上手容易且可移植的流行3D 游戏引擎。
RPG Maker VX – 一款为2D角色扮演游戏设计的脚本引擎也是传统的日式角色扮演游戏风格。
Unreal Development Kit – 一款用途广泛的3D游戏引擎。
Source – 一款持续更新修正的流行3D 游戏引擎。
Project Spark - 一款适用于普通水平用户的优化3D引擎。
学习游戏引擎，或者找个会的人。这得取决于你选的哪款引擎啦，你说不定就得面临相当可观的编程量。即使最基本的游戏引擎也需要花时间来了解如何操作。如果编程超过了你力所能及，要么你就自己学要么你就雇个人。
这将是你组队阶段的开始。要是你不会编程，你首先雇的肯定是程序员。美工和声音留到后面操心吧；你先要弄出工作团队的雏形，然后才能继续整个项目。
你应该和广大的独立开发者保持联络。人们会因为各种理由和报偿而参与某个项目。这时候你的牛逼设计就该派上用场啦，如果你的设计出色，很能说明你对于游戏理念的坚持和保证。
构建原型。一旦熟悉了你选择的游戏引擎，就动手搭建游戏原型。这个原型将用来进行游戏核心功能的基本测试。游戏原型则无须图像或声音，只要简单的占位符（比如一个方块或者一个粗线条）和小块测试区域即可。
反复测试和完善，以确保好玩。感觉不对劲儿或者没反应的地方要做个标记，然后重新处理其中涉及的机制。要是游戏原型都没意思的话，最终的游戏大概也不会好玩吧。
总有一些部分看似简易可行，但一运行就不工作。所以要对原型进行多次微调、测试。
完善操控。游戏最基本的功能就是玩家和游戏之间通过某种输入操控进行的互动。利用原型使操控尽可能完美。
操控糟糕的游戏会使玩家泄气。能完美操控的游戏才是对玩家技能的最佳犒赏。
考虑你的游戏需求。取决于具体的工程大小，美工需求可能会很不一样。有的游戏只需要简单的图形和色彩，而有些却需要庞大的美工和设计师队伍来打造游戏里的复杂世界。想清楚你游戏中的道具需求，然后据此雇人。
大多数独立开发的游戏都是小团队制作的，很多时候还是个人。如果你独自完成整个项目，就等着投入大量时间吧，尤其是你要一个人创造所有武器时。
从网上的开发团体中能找到大量随便使用的道具。务必确保你用的任何道具都不能侵犯他人版权。
草拟部分美工。为了感受游戏的视觉美感，你得把美术运用到原型中，然后把原型拓展成完整的游戏。
有许多风格可供使用。像素艺术（刻意复古）是独立开发者最常使用的风格之一。这是因为像素艺术能够既迅速又廉价地使用，并且还能做出好看的游戏。
如果你有更多时间和人力，还可以考虑做3D艺术。应付基础的3D模型一个人还行，但处理更复杂的细节则需要更多时间。3D模型还需要基础模型之外的纹理构造。
设计游戏里的世界或架构。一旦有派上用场的美术设计，就着手构建游戏本身。取决于你制作的游戏的风格，你或许需要创建等级或游戏区域。如果你制作的是益智类游戏，那就开始设计你的难题。
开发你的美工道具。取决于你的艺术风格，有各种各样的软件可以用来创造美工道具。其中比较流行的包括：
Blender ——这个开源程序大约是最受欢迎的3D模型方案之一。网上能找到数不胜数的教程让你快速上手。
Photoshop ——这是处理纹理和制作多数2D美术时必不可少的软件。这个软件很贵，所以要是担心钱的话，就考虑试一试GIMP，开源又免费，可替代Photoshop。GIMP 具有其大多数的功能。
Paint.net ——开源，可替代Paint Shop Pro，让你轻松创作2D美术。这款软件对于制作2D像素艺术图像尤为管用。
记录音频道具。要使玩家投入游戏，音频设计也是必不可少的部分。有无音乐，何时、如何开启音效，口语对话都会影响玩家玩游戏。
你可以在网上找到不少给力且免费的音频录制和音乐制作软件。如果你预算紧张或者独立制作，考虑考虑这些。
可以用家里的东西制作自己的声效。
尽可能多玩自己的游戏。建好游戏的方方面面后，你就开始玩游戏，保证游戏有趣且连贯。如果某一块儿或者某个点子运行不佳，要么继续完善，要么就删掉。一旦完备游戏的所有级别、难点和游戏区域，就从头开始玩一遍，确保自始至终带有趣味性。
专注于你的核心理念。整个开发过程中，你要不停地核实你的游戏是否贯彻了这个理念。 确保维持你的游戏特征，而且不要被附加进来的东西绊住。
润色，润色，再润色。一遍遍回过头去检查你的美工、声音和游戏设计，消除不完美的边边角角，打造出独一无二的游戏风格。能否快速润色，很大程度上取决于你选择的美术风格。
开始找漏洞。一旦出来一个能从头玩到尾的游戏，就开始找办法破坏它。为确保尽可能多的人玩上游戏，你要找出游戏的漏洞，并且消灭它们。
试一试你通常不会做的举措。你能想到的玩家与游戏互动的任何方式，都要考虑进去。尽可能多地挑战游戏规则，以确保最终你的游戏规则无法绕行。
漏洞测试甚至会占用和制作游戏一样多的时间。帮你测试的人越多，你就能找到并修复越多问题。
给漏洞修补排出优先次序。如果你有一大串漏洞，用来修复的时间却很有限，那就确保优先处理严重的、足以摧毁整个游戏的漏洞。例如，如果一个计分游戏中有漏洞允许玩家无上限得分，那你就得立刻处理好这个漏洞。
观察别人怎么玩的。找些朋友来玩你的游戏。看看他们如何应对你设置的挑战，如何与你的游戏世界进行互动。很有可能他们会做一些你从没想过的事哦。
检查你的游戏引擎，然后发布编码后的程序。发布到不同的平台上，需要不同的许可。 例如，用Game Studio的话，你可以在Windows和MacOS X平台上发布标准版, 但手机版本却需要升级到专业版，并支付额外费用。
宣传你的游戏。游戏快要发布时，开始吸引注意力。在一些受欢迎的音乐论坛上发布游戏截图和视频片段。联系游戏新闻网站，告诉他们你的游戏就快发布了（务必告诉他们如何获得游戏，游戏的价格，以及对游戏的概述。）
制作游戏过程中就创建一个官网，这样你就有粉丝啦。搭建一个游戏论坛是让粉丝互相交流的绝佳方式。定期更新网站也能帮你吸引更多关注。
决定发布服务。一些独立开发者用他们自己的网站发布游戏，但你会发现那将耗费一笔可观的主机费用，而且有些主机根本无法承受大下载量游戏所需的传输量。PC和Mac OS X上有不少很受欢迎的发布独立游戏的渠道。
Humble Store
手机游戏通常发布到他们的商店（苹果App Store，谷歌play Store，等等）。单机游戏同理。（Xbox Live, PlayStation Network, 等等）。
不同的服务商从你出售游戏所得中扣取不同的分红。逐个研究，看看哪个适合你。大多服务商都有销售代表，你可以以开发者身份直接跟他们谈。
维护游戏。游戏一旦发布，财力上尽最大可能去维护游戏、修复漏洞，等等。电子发布时代意味着游戏更新速度能够前所未有之快。你的游戏玩家一多，必定会出现漏洞。尽你所能尽快修复这些漏洞。
制作游戏不止一种方法。把这个指南当做一个概览，然后坚持最适合你的。
别指望一夜暴富。制作游戏应该是一种工作激情，赚钱只是大家都不会拒绝的意外奖赏。
总有一些人不相信你能做成，只要你认真对待，你一定能完成。
你可能一路遭遇困难，但不要被吓住。制作一个好游戏是个耗时的过程，但最终结果会证明一切都值得。
本页面已经被访问过81,607次。今天我们来介绍一下如何使用Cocos2d-JS引擎快速开发一个微信游戏《来自喵星的你》。
1.Cocos2d-JS引擎
Cocos2d-JS引擎是Cocos2d-x的JS版本，它极大简化与整合的API设计使得游戏开发变得前所未有地轻松。依托Web平台使Cocos2d-JS享有高效的开发测试环境，命令行工具提供三步就可以搞定Web与Native全平台部署的便捷功能。
官方下载地址：
http://cn.cocos2d-x.org/download/
官方指南：http://cn.cocos2d-x.org/article/index?type=cocos2d-x&url=/doc/cocos-docs-master/manual/framework/html5/zh.md
2.Cocos Code IDE
Cocos Code IDE是基于 Eclipse的跨平台 IDE，可帮助开发者便捷地创建游戏工程、编写调试代码、实时查看修改效果、并最终直接发布成可上架的安装包。
官方下载地址：
http://cn.cocos2d-x.org/download/
官方JS指南：http://cn.cocos2d-x.org/tutorial/show?id=1173
《来自喵星的你》主角是一只喵星小喵咪。他的使命是在危险的地球上铲除汪星人（为什么这两个星球的主战场要设置在地球上，我也没想通，不要在意这些细节嘛...），配角就是一群不断产生的汪星人，玩家需要控制喵星人的移动和攻击来躲避或者打败汪星人，打败的越多分数越高，如果喵星人被打败了，游戏结束，这个时候就可以把你的成绩分享给你的好友，比一比谁更牛。 游戏无外乎就是各种游戏内的对象根据你所设定的逻辑或者用户的交互运行一系列动画而已。明白了这一点，我们就开始动手来开发一个已经在微信上刷屏刷的一塌糊涂的《来自喵星的你》，想想是不是有点小激动。 我们先简单介绍一下这个游戏的结构， A.不要主菜单不要一堆乱七八糟的东西，一进游戏就开始玩，越简洁越能抓住用户。 B.游戏的主界面，玩家操作界面和分数标签。 C.喵星人只有一只，汪星人随着时间一直产生。 D.游戏结束显示游戏结束的界面，可以重玩也可以分享。所以这是个单场景游戏。
1）window.onload函数是Cocos2d-JS游戏的入口。
在这里，我们加载了资源后进入到游戏场景。
cc.LoaderScene.preload([ &catnorrisd.png& ,& &pg.png& ,& &arrow.png& ,& &end.png& ],& function &()&{ //加载资源 &
cc.director.runScene( new &MyScene()); //加载资源后回调，进入场景 &
MyScene 就是游戏的主场景了，MyScene从 cc.Scene 继承而来。进入游戏后，引擎会调用 onEnter 函数，所以我们可以在 onEnter 函数里初始化整个游戏场景UI和处理触摸相关的逻辑。
2）创建分数标签
比如，创建一个分数标签，很简单，只需要初始化标签的属性，并添加到场景中即可。
this .scoreLabel&=&&UI.scoreLabel&=& new &cc.LabelTTF( &0& ,& &黑体& ,&24,&cc.size(150,&30),&cc.TEXT_ALIGNMENT_LEFT); //创建Label &
&&&& this .addChild( this .scoreLabel); //添加到场景 &
&&&& this .scoreLabel.attr({& //属性设置 &
&&&&&&&&x:30,&
&&&&&&&&y:cc.director.getVisibleSize().height&-&25,&
&&&&&&&&strokeStyle:&cc.color(0,0,0),&
&&&&&&&&lineWidth:&2,&
&&&&&&&&color:&cc.color(255,150,100),&
&&&&&&&&anchorX:0.1&
3）处理触摸逻辑
如何捕获用户的触摸？Cocos2d-JS提供了一个很方便的接口，我们只要在游戏的场景中调用
cc.eventManager.addListener&
重写下面三个函数就可以了。
onTouchBegan: function (touch,&event);&
onTouchMoved: function (touch,&event);&
onTouchEnded: function (touch,&event);&
从命名就可以看出来这三个函数是处理触摸的三个时间点。这里要注意的是，如果我们根据触摸的时间来判断用户是长按还是点击，如果是长按，喵星人就会移动，如果是点击，喵星人就会进行攻击。目标点坐标怎么获取呢？touch参数暴露咯..
touch.getLocation();&
4）主角登场
喵星人终于要出来了，为了方便操作喵星人，我们把它封装为一个类Cat，从 cc.Sprite 继承而来。ctor 构造函数初始化了喵星人的状态。
ctor: function (){&
&&&& this ._super( &catnorrisd.png& ,&cc.rect(144,148,70,32)); //初始化纹理，可以理解为图片 &
&&&& this .attr({ //属性设置 &
&&&&&&&&anchorX:0.5,&
&&&&&&&&anchorY:0&
&&&& this .scheduleUpdate();&
&&&& this .idle();&
从上面的代码我们可以看到有2个奇怪的函数调用scheduleUpdate()和idle()，又是做什么用的呢？这里我们把喵星人设置为状态机模式。给定了喵星人可能的几个状态，idle，walking，attacking，dieing和dead。
this .idle() //设置喵星人进入idle状态 &
同样的调用walk()，attack()等等也会切换喵星人的状态。那这些只是状态的切换，如何表现这些状态呢？
this .scheduleUpdate(); //这是个定时器，每帧调用update函数，我们根据不同状态处理喵星人的表现 &
假如此时是walk的状态，喵星人会有一个左右摇晃的动作。
this .runAction(cc.sequence(cc.rotateTo(0.12,&-3),&cc.rotateTo(0.12,3)).repeatForever());&
cc.rotateto 是一个旋转动作。Sequence 是一个连续动作，它把2个 rotateTo 连接在一起，按顺序执行。而 repeatForever 表示这个动作循环进行。 同理，2种汪星人Doge和Husky也被封装为状态机的模式，然后后Manager对象统一进行管理，Manager对象主要做的事就是定时产生汪星人。
6）碰撞检测
碰撞检测同样在每帧进行，主角喵星人是一个精灵，在游戏看来它只是一块矩形纹理，汪星人同样也是，即便有的地方是透明的。所以这里采用的方式是检测喵星人的位置和汪星人的位置，一旦距离低于我们设置的值就判定为碰撞。
if (cc.pDistance( this .target.getPosition(), this .getPosition())&&&COLSIZE)&
&&&&... //碰撞 &
如果喵星人被打败后，显示游戏界面，即UI对象。在这里可以重新游戏，也可以进行微信分享。
7）微信分享
这么碉堡的游戏怎么能少得了微信分享功能呢？分享功能的代码可以在index.html中看到。
Api.shareToFriend(wxFriend,&wxCallbacks);&
Api.shareToTimeline(wxData,&wxCallbacks);&
Api.shareToWeibo(wxData,&wxCallbacks);&
其中wxFriend.desc和wxData.desc表示内容描述，可以在游戏结束的时候会进行修改。其他字段同样也可以在这里进行修改，比如链接，图标等等。
document.title&=&window.wxData.desc&=& &喵星刷屏！喵获得& +UI.score+ &分，在众喵中排名& +(0|(percent*100))+ &%，尼能超过喵吗！& ;&
document.title&=&window.wxFriend.desc&=& &我拿了& +UI.score+ &分，战胜了& +&UI.pg&+ &个汪，超越了& +(0|(percent*100))+ &％的好友！你能超过我吗& ;&
可以看到，《来自喵星的你》只用了一个js文件就搞定了，使用Cocos2d-JS引擎可以高效快速方便地开发一个JS游戏，只要有了Cocos2d-JS和Cocos Code IDE，你也能轻松、快速地打造出一款趣味的优秀游戏。 目前微信游戏平台已成为国内最高人气的平台之一，并且诞生出了许多成功作品。借助Cocos2d-JS和Cocos Code IDE，从此开发者可以告别繁琐的工序，让开发来得更有效率。也许下款微信大热之作就属于你哦！
源码下载地址：/fusijie/Catnorris.git CocoaChina是全球最大的苹果开发中文社区，官方微信每日定时推送各种精彩的研发教程资源和工具，介绍app推广营销经验，最新企业招聘和外包信息，以及Cocos2d引擎、Cocos Studio开发工具包的最新动态及培训信息。关注微信可以第一时间了解最新产品和服务动态，微信在手，天下我有！ 请搜索微信号“CocoaChina”关注我们！
最新教程周点击榜
微信扫一扫