主题 : cocos2d js 的XMLHTTPRequest 不支持服务器重定向返回吗？主题 : [已解决]cocos2d-js制作的游戏无法用web浏览&搭建 Cocos2d-JS 开发环境
搭建 Cocos2d-JS 开发环境
本文将向大家演示如何在高大上的 MacOS 10.9 上搭建Cocos2d-JS v3.0的开发环境。
下载所需的软件包
下载并安装 WebStorm 7。目前
最稳定的发布版本是 7.0.3。我们为什么 WebStorm 呢？因为它提供了很多特性，例如Javascript代码的语法实现、调试、语法高亮以及版本管理等等。你可以去WebStorm的官网获取更多的信息。
从Cocos2d-x的官网下载。下载完成后解压到适当的路径。以我的为例，我将它解压在 ~/work/Cocos2d-js-v3.0-alpha2 里。这里的 ~ 符号代表我们的 home 文件路径，于我而言就是 /Users/linshun。
你也可以从github上中获取Cocos2d-js的最新版本。master分支是最后一个稳定版本，develope分支是当前工作分支，有最新的features但是可能存在不稳定情况。
下载并安装 Chrome 34 和 。
OK,接下来我们将要介绍如何配置WebStorm 7 进行开发和调试我们的Cocos2d-JS应用程序。
创建新的工程
Cocos console是一个可以为Cocos2d-html5和Cocos2d-x JavaScript Binding（JSB）极大简化游戏创建和环境配置过程的工具，可以使用它来创建新项目，编译并发布游戏到android，iOS，Mac OS，iOS或者Web平台。
Cocos console安装
进入到已经下载完成的软件包，如~/work/Cocos2d-js-v3.0-alpha2
执行设置脚本 setup.py，安装的过程中需要你提供NDK，Android SDK和ANT的路径。该工具使用python开发，支持python 2.7.5或者2.7.6，暂时不支持python 3
根据提示执行 source ~/.bash_profile 指令，让环境设置立即生效
创建一个新项目
切换到工作目录，比如 cd ~/work
创建Cocos2d的游戏工程
//创建一个同时包含Cocos2d-html5和Cocos2d-x JSB的项目
cocos new -l js
//创建一个仅包含Cocos2d-html5的项目
cocos new -l js --no-native
//创建一个置顶工程名字指定目标的项目
cocos new projectName -l js -d ./Projects
本文采用默认的创建方式 cocos new -l js，默认在当前工作目录创建一个MyJSGame的项目
运行已创建的项目
使用浏览器运行web版项目
cd ~/work/MyJSGame
cocos run -p web
此时就可看到游戏项目运行在浏览器中，默认会启动一个http的服务器，并自动使用默认浏览器打开。
编译并运行Cocos2d-x JSB项目在iOS，android，mac上
cd ~/worl/MyJSGame
cocos compile -p ios|android|mac
cocos run -p ios|android|mac
-p platform : The platform can be ios|mac|android|web.
: Your project directory, if not specified the current directory will be used.
: Quiet mode, remove log messages.
: Mode debug or relearnase, debug is default
--source-map: General source-map file. (Web platform only)
配置 WebStorm 调试Web项目
首先，你需要运行WebStorm 7。如果这是你第一次运行它，它将提示你选择个人偏好设置，例如选择快捷键。
这是我运行WebStorm的屏幕截图：
如果这是你第一次运行WebStorm，那么近期项目部分应该是空的。
现在，我们在WebStorm中使用Cocos2d-JS游戏项目。
选择已创建的MyJSGame项目
正如上图所示，你应该选择Create New Project from Exisiting Files
然后将会提示你下面这些选项
选择 Source files are in a local directory, no Web server is yet configured 然后点击 Next 继续下一步.
在这一步中，你需要展开目录树去指定MyJSGame源码的存放路径。在你指定了正确路径之后，注意到Finish 按钮任然是灰色。
现在我们需要把目录设为 Project Root。点击 Project Root 按钮，随之 Finish 按钮将会被激活。
祝贺你！到此你已经成功在WebStorm上配置好Cocos2d-JS项目。
使用Cocos2d-JS
因为你已经在WebStorm 7中添加了 Cocos2d-JS的文件路径。WebStrom 将会解析所有的 Cocos2d-JS 源文件。打开 MyJSGame/src/myApp.js，你将能够进行语法实现。
如果在你的 Cocos2d-JS游戏应用中由第三方的 javascript库，你同样可以添加到WebStorm库进行解析，获取实时的语法提示。
（可选）添加第三方库进行解析
点击 Settings 打开你的项目设置对话框:
点击 Settings 按钮之后,将会弹出如下对话框:
现在点击 Add... 按钮，将会提示你指定javascript库的存放路径。
在 WebStorm 中调试 Cocos2d-JS javascript 代码
现在我们开始调试 Cocos2d-JS 代码.
通过 JB chrome 扩展将 WebStorm 连接到 Chrome
右击 ~/work/MyJSGame 下的 index.html 然后选择 Debug 'index.html':
现在将自动打开你的 Chrome 。如果你将你的鼠标放在 JB 插件上面，它将会显示你已经连接了 WebStrom 7.0.3:
注意: 如果你安装了插件"JetBrains IDE support"，这一步将会非常简单。当你点击 WebStrom 里的调试菜单，它将自动连接到chrome。太方便了！你也可以点击Chrome的工具栏右边的 JB 图标，它将立即跳转到 WebStorm IDE。
在 WebStorm 中调试 javascript 代码
回到 WebStorm 然后双击 MyJSGame/src/myApp.js 查看源代码。
设置断点。右击 myApp.js 源码视窗左边的工具栏。
开始调试。WebStorm会自动打开你的 Chrome 浏览器，运行你的示例项目。然后点击 JB 图标可返回你的 WebStorm 。程序将会暂停在我们刚刚设置过断点的地方。编辑器将会转换到调试窗口：
现在你可以进行步出、步入、单步执行和继续执行等调试操作。
在本教程中，我给大家展示了配置 Cocos2d-JS使其与 WebStorm 7 相配合的基础步骤，包括配置语法自动提示和调试。这个过程非常的简单。如果你对教程有任何疑问或建议，请告诉我们，我们真诚地感谢你对此做出的贡献！Node是什么以及对什么有好处?-浅析Node.js：一个“编码就绪”服务器-IT168 ..._百度知道
Node是什么以及对什么有好处?-浅析Node.js：一个“编码就绪”服务器-IT168 ...
提问者采纳
实际上，每秒几乎有数千条 tweets 达到，数据库不可能及时处理高峰时段需要的写入数量。Node成为这个问题的解决方案的重要一环。如您所见，Node能处理数万条入站tweets。它能迅速轻松地将它们写入一个内存排队机制(例如 memcached)，另一个单独进程可以从那里将它们写入数据库。Node在这里的角色是迅速收集tweet并将这个信息传递给另一个负责写入的进程。想象一下另一种设计 — 一个常规 PHP 服务器自己试图处理对数据库的写入 — 每个tweet将在写入数据库时导致一个短暂的延迟，这是因为数据库调用正在阻塞通道。由于数据库延迟，一台这样设计的机器每秒可能只能处理2000条入站tweets。每秒100万条tweets需要500个服务器。相反，Node能处理每个连接而不会阻塞通道，从而能捕获尽可能多的tweets。一个能处理50,000 条tweets的Node机器只需要20个服务器。 映像文件服务器 一个拥有大型分布式网站的公司(比如 Facebook 或 Flickr)可能会决定将所有机器只用于服务映像。Node将是这个问题的一个不错的解决方案，因为该公司能使用它编写一个简单的文件检索器，然后处理数万条连接。Node将查找映像文件，返回文件或一个404错误，然后什么也不用做。这种设置将允许这类分布式网站减少它们服务映像、.js和 .css文件等静态文件所需的服务器数量。 它对什么有坏处? 当然，在某些情况下，Node并非理想选择。下面是Node不擅长的领域： 动态创建的页 目前，Node没有提供一种默认方法来创建动态页。例如，使用JavaServer Pages (JSP) 技术时，可以创建一个在 这样的JSP代码段中包含循环的index.jsp 页。Node不支持这类动态的、HTML驱动的页面。同样，Node不太适合作为Apache和Tomcat这样的网页服务器。因此，如果您想在Node中提供这样一个服务器端解决方案，必须自己编写整个解决方案。PHP程序员不想在每次部署web应用程序时都编写一个针对Apache的PHP转换器，当目前为止，这正是Node要求您做的。 关系数据库重型应用程序 Node的目的是快速、异步和非阻塞。数据库并不一定分享这些目标。它们是同步和阻塞的，因为读写时对数据库的调用在结果生成之前将一直阻塞通道。因此，一个每个请求都需要大量数据库调用、大量读取、大量写入的web应用程序非常不适合Node，这是因为关系数据库本身就能抵销Node的众多优势。(新的NoSQL数据库更适合Node，不过那完全是另一个主题了。) 结语 问题是“什么是Node.js?” 应该已经得到解答。阅读本文之后，您应该能通过几个清晰简洁的句子回答这个问题。如果这样，那么您已经走到了许多编码员和程序员的前面。我和许多人都谈论过Node，但它们对 Node究竟是什么一直很迷惑。可以理解，他们具有的是Apache的思维方式 — 服务器是一个应用程序，将HTML文件放入其中，一切就会正常运转。而Node是目的驱动的。它是一个软件程序，使用JavaScript来允许程序员轻松快速地创建快速、可伸缩的web服务器。Apache是运行就绪的，而ode是编码就绪的。 Node完成了它提供高度可伸缩服务器的目标。它并不分配一个 “每个连接一个线程” 模型，而是使用一个 “每个连接一个流程” 模型，只创建每个连接需要的内存。它使用Google的一个非常快速的JavaScript引擎：V8引擎。它使用一个事件驱动设计来保持代码最小且易于阅读。所有这些因素促成了Node的理想目标 — 编写一个高度可伸缩的解决方案变得比较容易。 与理解Node是什么同样重要的是，理解它不是什么。Node并不是Apache的一个替代品，后者旨在使PHP web应用程序更容易伸缩。事实确实如此。在Node的这个初始阶段，大量程序员使用它的可能性不大，但在它能发挥作用的场景中，它的表现非常好。 将来应该期望从Node得到什么呢?这也许是本文引出的最重要的问题。既然您知道了它现在的作用，您应该会想知道它下一步将做什么。在接下来的一年中，我期待着Node提供与现有的第三方支持库更好地集成。现在，许多第三方程序员已经研发了用于Node的插件，包括添加文件服务器支持和MySQL支持。希望Node开始将它们集成到其核心功能中。最后，我还希望 Node支持某种动态页面模块，这样，您就可以在HTML文件中执行在PHP和JSP(也许是一个NSP，一个Node服务器页)中所做的操作。最后，希望有一天会出现一个 “部署就绪” 的Node服务器，可以下载和安装，只需将您的HTML文件放到其中，就像使用Apache或Tomcat那样。Node现在还处于初始阶段，但它发展得很快，可能不久就会出现在您的视野中。 注：本文内容是根据developerWorks作者Mike Abernethy的文章整理而来的，在Michael Abernethy的13年技术生涯中，他与各种不同的技术和客户打交道。他目前是一名自由程序员，擅长Java高可用性和jQuery。他现在专注于富Internet 应用程序，试图同时实现应用程序的复杂性和简单性。他空闲时常常去打高尔夫球，更确切地说，是在灌木丛中寻找他打飞的高尔夫球。
其他类似问题
it168的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁热度:255℃
（via:）&一夜之间，微信上一款叫《围住神经猫》的小游戏火了。它的玩法很简单，用最少的步数把一只神经兮兮的猫围死。 7月22号上线以来，3天、500万用户和1亿访问，想必各位程序猿都按耐不住了，想实现自己的神经猫游戏。&在这篇教程里，我会教大家如何用Cocos2d-JS来实现一个神经猫这样的游戏。 让我们先看下游戏最后完成了的效果图:&&你可能注意到了，神经猫换成了可爱的小羊驼：）&在线游戏地址：&源码地址：&游戏分析&三个界面基本上就是整个游戏的全部内容：1.左边的是主界面，展示游戏名称以及主角，让玩家对游戏的整体画风有个大概的印象。2.中间的是游戏界面，点击空格防止橙色六边形砖块来围堵小羊驼。3.右边的是游戏成功或失败的界面。&整个游戏的主逻辑都在游戏界面中完成。&玩法是这样：1.游戏初始化开始，小羊驼始终是站在地图中间，在地图的其他区域随机生产一些位置随机的砖块。2.玩家点击一个空白区域，放置一个砖块来围堵羊驼。3.羊驼AI寻路移动一步。4.循环2和3，直到羊驼被围堵在一个圈里面（游戏成功），或羊驼到达地图边界（游戏失败）&整个游戏的思路理清楚了，接下来我们开始进入编码阶段。&开发环境与新建项目&本教程开发基于当前最新的. &（其他版本下载地址：）&下载引擎并解压到磁盘的某个目录。&打开控制台，输入下面的命令来新建项目。$cd&cocos2d-js-v3.0-rc1/tools/cocos2d-console/bin&$./cocos&new&-l&js&--no-native&$cd&MyJSGame/&$../cocos&run&-p&web&环境搭建并不是这篇文章的重点，更详细的信息可以参考：《》&主界面实现&游戏的入口代码在main.js中，用编辑器打开并修改为下面的代码。cc.game.onStart&=&function(){&&&&&//&1.&&&&&cc.view.adjustViewPort(true);&&&&&&&//&2.&&&&&if&(cc.sys.isMobile)&&&&&&&&&cc.view.setDesignResolutionSize(320,500,cc.ResolutionPolicy.FIXED_WIDTH);&&&&&else&cc.view.setDesignResolutionSize(320,480,cc.ResolutionPolicy.SHOW_ALL);&&&&&cc.view.resizeWithBrowserSize(true);&&&&&&&//&3.&&&&&cc.LoaderScene.preload(resources,&function&()&{&&&&&&&&&//&4.&&&&&&&&&gameScene&=&new&GameScene();&&&&&&&&&cc.director.runScene(gameScene);&&&&&},&this);&};&&&cc.game.run();&关键点解析如下：1.设置浏览器meta来适配屏幕，引擎内部会根据屏幕大小来设置meta的viewport值，会达到更好的屏幕适配效果。2.针对手机浏览器和PC浏览器启用不同的分辨率适配策略。3.预加载图片声音等资源。 cc.LoaderScene.preload会生成一个&加载中 x％&的界面，等待资源加载结束后，调用第二个参数传入的匿名函数。 对于基于html的游戏，页面是放在服务器端供浏览器下载的，为了获得流畅的用户体验，cc.LoaderScene.preload让浏览器先把远程服务器的资源缓存到本地。需要预加载的资源定义在src/Resources.js文件中。4.启动游戏的第一个场景。&主界面的由两个层实现:1.GameLayer层，游戏主逻辑层，在未初始化地图矩阵时，它只显示背景地图。2.StartUI层，显示logo图片和开始游戏按钮。&GameScene的初始化代码如下：var&GameScene&=&cc.Scene.extend({&&&&&onEnter&:&function&()&{&&&&&&&&&this._super();&&&&&&&&&&&var&bg&=&new&cc.Sprite(res.bg);&&&&&&&&&bg.attr({&&&&&&&&&&&&&anchorX&:&0.5,&&&&&&&&&&&&&anchorY&:&0.5,&&&&&&&&&&&&&x&:&cc.winSize.width/2,&&&&&&&&&&&&&y&:&cc.winSize.height/2&&&&&&&&&});&&&&&&&&&this.addChild(bg);&&&&&&&&&&&layers.game&=&new&GameLayer();&&&&&&&&&this.addChild(layers.game);&&&&&&&&&&&layers.startUI&=&new&StartUI();&&&&&&&&&this.addChild(layers.startUI);&&&&&&&&&&&layers.winUI&=&new&ResultUI(true);&&&&&&&&&layers.loseUI&=&new&ResultUI(false);&&&&&&&&&layers.shareUI&=&new&ShareUI();&&&&&}&});&由引擎提供的cc.Scene.extend方法，让js能实现高级面向对象语言的继承特性。 onEnter方法是场景初始化完成即将展示的消息回调，在onEnter中必须调用this._super();来确保Scene被正确的初始化。&整个游戏的设计只有一个scene，界面之间的切换由layer来实现，这可能不是一个最优的设计，但也提供另一种思路。 为了用layer来实现切换，全局变量layers存储了各层的一个实例。&GameLayer我们在下一章节中详细讲解。&StartUI的实现如下：var&StartUI&=&cc.Layer.extend({&&&&&ctor&:&function&()&{&&&&&&&&&this._super();&&&&&&&&&&&var&start&=&new&cc.Sprite(res.start);&&&&&&&&&start.x&=&cc.winSize.width/2;&&&&&&&&&start.y&=&cc.winSize.height/2&+&20;&&&&&&&&&this.addChild(start);&&&&&},&&&&&onEnter&:&function&()&{&&&&&&&&&this._super();&&&&&&&&&&&cc.eventManager.addListener({&&&&&&&&&&&&&event:&cc.EventListener.TOUCH_ALL_AT_ONCE,&&&&&&&&&&&&&onTouchesEnded:&function&(touches,&event)&{&&&&&&&&&&&&&&&&&var&touch&=&touches[0];&&&&&&&&&&&&&&&&&var&pos&=&touch.getLocation();&&&&&&&&&&&&&&&&&if&(pos.y&&&cc.winSize.height/3)&{&&&&&&&&&&&&&&&&&&&&&layers.game.initGame();&&&&&&&&&&&&&&&&&&&&&layers.startUI.removeFromParent();&&&&&&&&&&&&&&&&&}&&&&&&&&&&&&&}&&&&&&&&&},&this);&&&&&}&});&cc.Layer.extend作用同cc.Scene.extend一样，只不过是一个扩展Scene，一个扩展Layer。ctor是Cocos2d-JS中的构造函数，在ctor中必须调用this._super();以确保正确的初始化。&在onEnter中，我们为StartUI层绑定事件监听，判断触摸点的位置坐标来触发scene切换。&细心的读者可能要问，为什么不用Menu控件？ 当前的Cocos2d-JS版本已实现模块化，可以选择只加载游戏中用到的模块，已减少最终打包size。 为了不加入Menu模块，这里使用了最简单的触摸点坐标判断来实现通用的事情。&游戏界面的实现&橙色块的初始化游戏地图区域是由9*9的六边形方块组成的，首先用InActive的图片初始化一边矩阵。相关代码如下：var&ox&=&x&=&y&=&0,&odd&=&false,&block,&tex&=&this.batch.&for&(var&r&=&0;&r&&&ROW;&r++)&{&&&&&y&=&BLOCK_YREGION&*&r;&&&&&ox&=&odd&*&OFFSET_ODD;&&&&&for&(var&c&=&0;&c&&&COL;&c++)&{&&&&&&&&&x&=&ox&+&BLOCK_XREGION&*&c;&&&&&&&&&block&=&new&cc.Sprite(tex,&BLOCK2_RECT);&&&&&&&&&block.attr({&&&&&&&&&&&&&anchorX&:&0,&&&&&&&&&&&&&anchorY&:&0,&&&&&&&&&&&&&x&:&x,&&&&&&&&&&&&&y&:&y,&&&&&&&&&&&&&width&:&BLOCK_W,&&&&&&&&&&&&&height&:&BLOCK_H&&&&&&&&&});&&&&&&&&&this.batch.addChild(block);&&&&&}&&&&&odd&=&!&}&每次循环odd改变，已实现上下错位的排布。 attr是Node基类的新方法，可以方便的一次性设置多个属性。&橙色方块的初始化是由initGame函数来完成。 先来看initGame的实现：initGame&:&function()&{&&&&&if&(this.inited)&return;&&&&&&&this.player_c&=&this.player_r&=&4;&&&&&this.step&=&0;&&&&&&&//&1.&&&&&for&(var&i&=&0,&l&=&this.active_nodes.&i&&&l;&i++)&{&&&&&&&&&this.active_nodes[i].removeFromParent();&&&&&}&&&&&this.active_nodes&=&[];&&&&&for&(var&r&=&0;&r&&&ROW;&r++)&{&&&&&&&&&for&(var&c&=&0;&c&&&COL;&c++)&{&&&&&&&&&&&&&this.active_blocks[r][c]&=&false;&&&&&&&&&}&&&&&}&&&&&&&//&2.&&&&&this.randomBlocks();&&&&&&&//&3.&&&&&this.player.attr({&&&&&&&&&anchorX&:&0.5,&&&&&&&&&anchorY&:&0,&&&&&&&&&x&:&OFFSET_X&+&BLOCK_XREGION&*&this.player_c&+&BLOCK_W/2,&&&&&&&&&y&:&OFFSET_Y&+&BLOCK_YREGION&*&this.player_r&-&5&&&&&});&&&&&this.player.stopAllActions();&&&&&this.player.runAction(this.moving_action);&&&&&&&this.inited&=&true;&},&要点解析如下：1.为了方便逻辑处理，这里用了active_nodes和active_blocks来记录被激活的方块。在初始化矩阵前，需要清理上一次游戏已生成的橙色方块。active_nodes存储精灵实例，active_blocks记录精灵的矩阵坐标。2.randomBlocks函数生成随机橙色砖块。 首先产生一个7-20的随机数，也就是确定橙色块的数量。然后循环确定每一个块的位置坐标，当然位置坐标也是随机确定的。3.复位小羊驼的位置以及动画。&响应触摸事件按照我们之前的分析，游戏界面初始化完成后，需要等待用户指令才能进行下一步的游戏。&相关代码如下：//&1.&cc.eventManager.addListener({&&&&&//&2.&&&&&event:&cc.EventListener.TOUCH_ALL_AT_ONCE,&&&&&//&3.&&&&&onTouchesBegan:&function&(touches,&event)&{&&&&&&&&&var&touch&=&touches[0];&&&&&&&&&var&pos&=&touch.getLocation();&&&&&&&&&var&target&=&event.getCurrentTarget();&&&&&&&&&if&(!target.inited)&return;&&&&&&&&&&&pos.y&-=&OFFSET_Y;&&&&&&&&&var&r&=&Math.floor(pos.y&/&BLOCK_YREGION);&&&&&&&&&pos.x&-=&OFFSET_X&+&(r%2==1)&*&OFFSET_ODD;&&&&&&&&&var&c&=&Math.floor(pos.x&/&BLOCK_XREGION);&&&&&&&&&if&(c&&=&0&&&&r&&=&0&&&&c&&&COL&&&&r&&&ROW)&{&&&&&&&&&&&&&if&(target.activateBlock(r,&c))&{&&&&&&&&&&&&&&&&&target.step&++;&&&&&&&&&&&&&&&&&target.movePlayer();&&&&&&&&&&&&&}&&&&&&&&&}&&&&&}&},&this);&1. cc.eventManager.addListener加入新的事件监听。2. 设置事件监听模式为TOUCH_ALL_AT_ONCE。3. 重写onTouchesBegan方法，判断触摸点的坐标，确定是哪个块被点击，并做响应的处理。 activateBlock方法在对应的矩阵位置加入橙色块，并更新状态数组。然后调用movePlayer移动小羊驼。&羊驼的移动整个逻辑的关键是AI.js中的getDistance函数，&getDistance有6个参数：1.羊驼所在行号2.羊驼所在列号3.前进方向，l_choices、r_choices、t_choices或b_choices4.激活块的记录数组5.辅助记录表，记录在寻路算法中某个节点是不是已经被访问过。6.最短路径&返回值有三种情况：1.羊驼到达地图边界，返回羊驼坐标和最短路径02.羊驼还在地图中，返回羊驼的下一个坐标值和最短路径cost3. -1表示羊驼被圈住了，但可能可以移动。&getDistance的代码实现如下：var&getDistance&=&function&(r,&c,&dir_choices,&activate_blocs,&passed,&cost)&{&&&&&passed[r][c]&=&true;&&&&&if&(r&&=&0&||&r&&=&ROW_MINUS_1&||&c&&=&0&||&c&&=&COL_MINUS_1)&{&&&&&&&&&return&[r,&c,&cost];&&&&&}&&&&&&&var&odd&=&(r&%&2&==&1)&?&1&:&0;&&&&&var&choices&=&dir_choices[odd];&&&&&&&var&nextr,&nextc,&&&&&&for&(var&i&=&0,&l&=&choices.&i&&&l;&i++)&{&&&&&&&&&nextr&=&r&+&choices[i][0];&&&&&&&&&nextc&=&c&+&choices[i][4];&&&&&&&&&&&if&(!activate_blocs[nextr][nextc]&&&&!passed[nextr][nextc])&{&&&&&&&&&&&&&cost&++;&&&&&&&&&&&&&result&=&getDistance(nextr,&nextc,&dir_choices,&activate_blocs,&passed,&cost);&&&&&&&&&&&&&if&(result&!=&-1)&{&&&&&&&&&&&&&&&&&result[0]&=&&&&&&&&&&&&&&&&&&result[1]&=&&&&&&&&&&&&&&&&&&return&&&&&&&&&&&&&&}&&&&&&&&&}&&&&&}&&&&&return&-1;&};&&在羊驼移动函数movePlayer中，首先通过getDistance来判断上下左右4个方向，来寻找最佳移动方向。根据getDistance的返回结果做相应的逻辑处理。&游戏结束界面&游戏结束的两种情况，玩家胜利或失败。&在ResultUI的构造函数中，加入参数win，用来标识是否胜利。而胜利和失败仅仅是显示文字的区别，下方的两个按钮均一样。&在ctor中，根据是否胜利加载不同的图片来显示：ctor&:&function&(win)&{&&&&&&this._super();&&&&&&&&this.win&=&&&&&&&if&(win)&{&&&&&&&&&&this.winPanel&=&new&cc.Sprite(res.succeed);&&&&&&&&&&this.winPanel.x&=&cc.winSize.width/2;&&&&&&&&&&this.winPanel.anchorY&=&0.2;&&&&&&&&&&this.winPanel.y&=&cc.winSize.height/2;&&&&&&&&&&this.addChild(this.winPanel);&&&&&&}&&&&&&else&{&&&&&&&&&&this.losePanel&=&new&cc.Sprite(res.failed);&&&&&&&&&&this.losePanel.x&=&cc.winSize.width/2;&&&&&&&&&&this.losePanel.anchorY&=&0.2;&&&&&&&&&&this.losePanel.y&=&cc.winSize.height/2;&&&&&&&&&&this.addChild(this.losePanel);&&&&&&}&&}&&在onEnter中，根据是否胜利加载不同的文字描述：if&(this.win)&{&&&&&this.winPanel.removeAllChildren();&&&&&&&var&w&=&this.winPanel.width,&h&=&this.winPanel.&&&&&var&label&=&new&cc.LabelTTF(&继续刷屏！n&+step+&步推倒我的小羊驼n打败&+percent+&%朋友圈的人！n你能超过我吗？&,&&宋体&,&20);&&&&&label.x&=&w/2;&&&&&label.y&=&h/4;&&&&&label.textAlign&=&cc.LabelTTF.TEXT_ALIGNMENT_CENTER;&&&&&//label.boundingWidth&=&w;&&&&&label.width&=&w;&&&&&label.color&=&cc.color(0,&0,&0);&&&&&this.winPanel.addChild(label);&}&else&{&&&&&this.losePanel.removeAllChildren();&&&&&var&w&=&this.losePanel.width,&h&=&this.losePanel.&&&&&label&=&new&cc.LabelTTF(&我滴小羊驼呀它又跑掉了nT_T&快帮我抓回来！&,&&宋体&,&20);&&&&&label.x&=&w/2;&&&&&label.y&=&h/4+5;&&&&&label.textAlign&=&cc.LabelTTF.TEXT_ALIGNMENT_CENTER;&&&&&//label.boundingWidth&=&w;&&&&&label.width&=&w;&&&&&label.color&=&cc.color(0,&0,&0);&&&&&this.losePanel.addChild(label,&10);&}&&&通知好友&按钮加载shareUI层，这个层其实是一个帮助指导界面，指示用户点击微信右上角的分享按钮进行分享。gameScene.addChild(layers.shareUI,&100);&target.win&?&share(1,&step,&percent)&:&share(2);&&&再来一次&实现很简单，调用initGame重新初始化矩阵，并移除ResultUI层。layers.game.initGame();&target.win&?&layers.winUI.removeFromParent()&:&layers.loseUI.removeFromParent();&&分享指导界面&在游戏结束界面我们加入了分享按钮。现在我们就来实现分享界面。&分享界面由分享图标和分享说明组成。这和前面的layer创建一样。很简单，唯一的区别是，分享界面是cc.LayerColor(cc.LayerColor支持设置层的颜色)的子类。下面是实现代码：ctor:&function&()&{&&&&&this._super(cc.color(0,&0,&0,&188),&cc.winSize.width,&cc.winSize.height);&&&&&&&var&arrow&=&new&cc.Sprite(res.arrow);&&&&&arrow.anchorX&=&1;&&&&&arrow.anchorY&=&1;&&&&&arrow.x&=&cc.winSize.width&-&15;&&&&&arrow.y&=&cc.winSize.height&-&5;&&&&&this.addChild(arrow);&&&&&&&var&label&=&new&cc.LabelTTF(&请点击右上角的菜单按钮n再点&分享到朋友圈&n让好友们挑战你的分数！&,&&宋体&,&20,&cc.size(cc.winSize.width*0.7,&250),&cc.TEXT_ALIGNMENT_CENTER);&&&&&label.x&=&cc.winSize.width/2;&&&&&label.y&=&cc.winSize.height&-&100;&&&&&label.anchorY&=&1;&&&&&this.addChild(label);&},&&加入touch事件用于移除分享界面：onEnter:&function&()&{&&&&&this._super();&&&&&cc.eventManager.addListener({&&&&&&&&&event:&cc.EventListener.TOUCH_ONE_BY_ONE,&&&&&&&&&onTouchBegan:&function&(touch,&event)&{&&&&&&&&&&&&&layers.shareUI.removeFromParent();&&&&&&&&&}&&&&&},&this);&}&&微信分享&我们需要的功能：1.分享到微信朋友圈2.分享给微信好友3.分享到腾讯微博4.关注指定用户&实现方式本功能已经有大神提供了完整的库，地址是： ，以下我们做一个简单的使用分析。&注：除特殊说明外，本小节实现均在文件 WeixinApi.js中。&现在我们实现的分享有，发给指定朋友，分享到朋友圈，分享到腾讯微博。对于不同的分享方式，实现方式大同小异，我们主要以分享到朋友圈为例。&分享数据我们分享的时候需要的数据有：appid，图片，链接，标题，文字内容，例如：对应在代码中就需要以下数据：&appid&:theData.appId&?&theData.appId&:&'',&&img_url&:theData.imgUrl,&&link&:theData.link,&&desc&:theData.desc,&&title&:theData.title,&//&注意这里要分享出去的内容是desc&&数据来源为了得到数据，我们需要在GameScene.js中实现ResultUI的时候，将以上数据生成出来。 比如胜利时，我们需要显示：var&label&=&new&cc.LabelTTF(&继续刷屏！n&+step+&步推倒我的小羊驼n打败&+percent+&%朋友圈的人！n你能超过我吗？&,&&宋体&,&20);&完成数据后，我们需要判断胜利或失败，并传回ui中显示：target.win&?&share(1,&step,&percent)&:&share(2);&&分享回调为了监测分享的状态，无论分享成功与否我们回调都会上报状态，以便程序处理，我们需要的状态有：1.用户取消分享2.分享失败3.分享成功 所以我们需要以下实现：&WeixinJSBridge.on('menu:share:timeline',&function&(argv)&{&&&&&if&(callbacks.async&&&&callbacks.ready)&{&&&&&&&&&window[&_wx_loadedCb_&]&=&callbacks.dataLoaded&||&new&Function();&&&&&&&&&if(window[&_wx_loadedCb_&].toString().indexOf(&_wx_loadedCb_&)&&&0)&{&&&&&&&&&&&&&window[&_wx_loadedCb_&]&=&new&Function();&&&&&&&&&}&&&&&&&&&callbacks.dataLoaded&=&function&(newData)&{&&&&&&&&&&&&&window[&_wx_loadedCb_&](newData);&&&&&&&&&&&&&shareTimeline(newData);&&&&&&&&&};&&&&&&&&&//&然后就绪&&&&&&&&&callbacks.ready&&&&callbacks.ready(argv);&&&&&}&else&{&&&&&&&&&//&就绪状态&&&&&&&&&callbacks.ready&&&&callbacks.ready(argv);&&&&&&&&&shareTimeline(data);&&&&&}&});&&WeixinJSBridge在微信上，通过公众平台推送给用户的文章，是在微信内部直接打开的，用的无外乎就是一个UIWebView控件（IOS上，Android上也差不多）。但特殊的是，微信官方在这里面加了一个默认的Js API--WeixinJSBridge，通过它，能直接在该页面上做分享操作。 以下代码，拿去玩吧：WeixinJSBridge.on('menu:share:timeline',&function&(argv)&{&&&&&if&(callbacks.async&&&&callbacks.ready)&{&&&&&&&&&window[&_wx_loadedCb_&]&=&callbacks.dataLoaded&||&new&Function();&&&&&&&&&if(window[&_wx_loadedCb_&].toString().indexOf(&_wx_loadedCb_&)&&&0)&{&&&&&&&&&&&&&window[&_wx_loadedCb_&]&=&new&Function();&&&&&&&&&}&&&&&&&&&callbacks.dataLoaded&=&function&(newData)&{&&&&&&&&&&&&&window[&_wx_loadedCb_&](newData);&&&&&&&&&&&&&shareTimeline(newData);&&&&&&&&&};&&&&&&&&&//&然后就绪&&&&&&&&&callbacks.ready&&&&callbacks.ready(argv);&&&&&}&else&{&&&&&&&&&//&就绪状态&&&&&&&&&callbacks.ready&&&&callbacks.ready(argv);&&&&&&&&&shareTimeline(data);&&&&&}&});&&最后，赶紧写点诱惑的东东，让用户分享出去吧，这是微信病毒传播的乐趣！&后记你可以在这里获取本教程的全部 & 。&&
CocoaChina是全球最大的苹果开发中文社区，官方微信每日定时推送各种精彩的研发教程资源和工具，介绍app推广营销经验，最新企业招聘和外包信息，以及Cocos2d引擎、Cocos Studio开发工具包的最新动态及培训信息。关注微信可以第一时间了解最新产品和服务动态，微信在手，天下我有！
请搜索微信号“CocoaChina”关注我们！
爱派实验室
iOS应用群：
Mac用户群：
开发者交流群：3467414
(加群请输入:来自苹果i派党)
开发者服务