Cocos游戏通常是以Native应用的形式开发的，即在iOS、Android等操作系统上运行，而不是直接作为网页游戏。如果你想在网页上展示Cocos游戏，你需要进行一些额外的步骤：

1. HTML5包装：Cocos Creator提供了HTML5的打包工具，可以将Cocos游戏打包成HTML5的WebApp，这个WebApp可以在浏览器中运行。你可以通过Cocos Creator的"发布"功能，选择"Web"发布类型，然后下载HTML、CSS和JavaScript文件。

2. 部署到服务器：将打包后的HTML、CSS和JavaScript文件上传到Web服务器，然后在浏览器中通过URL访问。

3. 使用Cocos-Web：Cocos官方也提供了Cocos-Web库，这是一个开源库，允许将Cocos游戏开发为WebGL应用，直接在浏览器中运行，但这种方式需要一定的前端开发知识。

4. 使用Webview：如果你的游戏是原生应用，你也可以考虑在应用中嵌入一个Webview，然后加载HTML5版本的游戏。

请注意，虽然Cocos游戏在网页上运行可能有性能限制，但这种方法主要是为了展示或者应急，如果可能，还是推荐在各自平台的App Store或Google Play上发布原生版本。

国内游戏引擎Cocos你知道吗？

Cocos Creator 3D：Cocos Creator 3D是Cocos引擎的3D游戏开发工具，提供了可视化的编辑器和功能强大的渲染引擎。它支持创建3D场景、模型、动画、物理效果等，并具有与Cocos Creator相似的工作流程和开发环境。

Cocos Creator：Cocos Creator是Cocos引擎的可视化编辑器和开发环境，用于创建2D和3D游戏。它支持基于组件的开发模式，提供了可视化的场景编辑器、动画编辑器、脚本编辑器等工具，使开发人员可以直观地设计、构建和调整游戏内容。

三国类单机游戏全宝物存档cocos creator入门

cocos游戏怎么用网页打开

左上角的复选框表示节点的激活状态，节点处于非激活状态时，节点上所有图像渲染相关的组件都会被关闭，整个节点包括子节点就会被有效的隐藏；节点激活开关右边显示的是节点的名称，和 层级管理器 中的节点显示名称一致

层级管理器用树状列表的形式展示场景中的所有节点和他们的层级关系，所有在场景编辑器中看到的内容都可以在层级管理器中找到对应的节点条目，在编辑场景时这两个面板的内容会同步显示，一般会同时使用这两个面板来搭建场景

场景修改器是内容创作的中心作业区域，使用它挑选和摆放场景图像、角色、特效、UI 等各类游戏元素。在这个作业区域里，能够选中并经过变换工具修改节点的方位、旋转、缩放、尺寸等属性，并能够取得所见即所得的场景作用预览

恭喜您完成了用 Cocos Creator 制作的第一个游戏！希望这篇快速入门教程能帮助您了解 Cocos Creator 游戏开发流程中的基本概念和工作流程。如果您对编写和学习脚本编程不感兴趣，也可以直接从完成版的项目中把写好的脚本复制过来使用。

现在我们可以尽情享受刚制作完成的游戏了，您能打到多少分呢？别忘了您可以随时修改 Player 和 Game 组件里的移动控制和星星持续时间等游戏参数，来快速调节游戏的难度。修改组件属性之后需要保存场景，修改后的数值才会被记录下来。

然后选中 Canvas 节点，把 assets/audio/score 资源拖拽到 Game 组件的 Score Audio 属性上。

保存脚本，回到 层级管理器 ，选中 Player 节点，然后从 资源管理器 里拖拽 assets/audio/jump 资源到 Player 组件的 Jump Audio 属性上。

this.scoreDisplay.string = 'Score: ' + this.score.toString();

保存 Player 脚本以后打开 Game 脚本，来添加得分音效，首先仍然是在 properties 中添加一个属性来引用声音文件资源：

return cc.repeatForever(cc.sequence(jumpUp, jumpDown, callback));

var jumpUp = cc.moveBy(this.jumpDuration, cc.v2(0, this.jumpHeight)).easing(cc.easeCubicActionOut());

保存 Star 脚本，我们的游戏玩法逻辑就全部完成了！现在点击 预览游戏 按钮，我们在浏览器看到的就是一个有核心玩法、激励机制、失败机制的合格游戏了。

以上，对 Game 脚本的修改就完成了，保存脚本，然后打开 Star 脚本，我们需要为即将消失的星星加入简单的视觉提示效果，在 update 方法最后加入以下代码：

这里需要初学者了解的是，cc.director 是一个管理你的游戏逻辑流程的单例对象。由于 cc.director 是一个单例，你不需要调用任何构造函数或创建函数，使用它的标准方法是通过调用 cc.director.methodName()，例如这里的 cc.director.loadScene('game') 就是重新加载游戏场景 game，也就是游戏重新开始。而节点下的 stopAllActions 方法就显而易见了，这个方法会让节点上的所有 Action 都失效。

然后在 spawnNewStar 方法最后加入重置计时器的逻辑，其中 this.minStarDuration 和 this.maxStarDuration 是我们一开始声明的 Game 组件属性，用来规定星星消失时间的随机范围：

现在我们的游戏已经初具规模，但得分再多，不可能失败的游戏也不会给人成就感。现在让我们加入星星定时消失的行为，而且让星星消失时就判定为游戏失败。也就是说，玩家需要在每颗星星消失之前完成收集，并不断重复这个过程完成玩法的循环。

保存 Game 脚本后，回到 层级管理器，选中 Canvas 节点，然后把前面添加好的 score 节点拖拽到 属性检查器 里 Game 组件的 Score Display 属性中。

我们将会把计分和更新分数显示的逻辑放在 Game 脚本里，打开 Game 脚本开始编辑，首先在 properties 区块的 最后 添加分数显示 Label 的引用属性：

注意： Score: 0 的文字建议使用英文冒号，因为 Label 组件的 String 属性加了位图字体后，会无法识别中文的冒号。

保存脚本，再次预览测试，通过按 A 和 D 键来控制主角左右移动，就可以看到控制主角靠近星星时，星星就会消失掉，然后在随机位置生成了新的星星！

Node 下的 getPosition() 方法 返回的是节点在父节点坐标系中的位置（x, y），即一个 Vec2 类型对象。同时注意调用 Node 下的 destroy() 方法 就可以销毁节点。

保存后打开 Star 脚本，现在我们可以利用 Game 组件中引用的 player 节点来判断距离了，在 onLoad 方法后面添加名为 getPlayerDistance 和 onPicked 的方法：

所以我们只要在 Game 脚本生成 Star 节点实例时，将 Game 组件的实例传入星星并保存起来就好了，之后我们可以随时通过 game.player 来访问到主角节点。让我们打开 Game 脚本，在 spawnNewStar 方法最后面添加一句 newStar.getComponent('Star').game = this;，如下所示：

现在要添加主角收集星星的行为逻辑了，这里的重点在于，星星要随时可以获得主角节点的位置，才能判断他们之间的距离是否小于可收集距离，如何获得主角节点的引用呢？别忘了我们前面做过的两件事：

保存脚本以后点击 预览游戏 按钮，在浏览器中可以看到，游戏开始后动态生成了一颗星星！用同样的方法，您可以在游戏中动态生成任何预先设置好的以 Prefab 为模板的节点。

Node 下的 setPosition 方法 作用是设置节点在父节点坐标系中的位置，可以通过两种方式设置坐标点。一是传入两个数值 x 和 y，二是传入 cc.v2(x, y)（类型为 cc.Vec2 的对象）

instantiate 方法的作用是：克隆指定的任意类型的对象，或者从 Prefab 实例化出新节点，返回值为 Node 或者 Object

var randY = this.groundY + Math.random() * this.player.getComponent('Player').jumpHeight + 50;

然后设置 Min Star Duration 和 Max Star Duration 属性的值为 3 和 5，之后我们生成星星时，会在这两个之间随机取值，就是星星消失前经过的时间。

接着从 层级管理器 中拖拽 ground 和 Player 节点到 Canvas 节点 Game 组件中相对应名字的属性上，完成节点引用。

接下来从 资源管理器 中拖拽 star 的 Prefab 资源到 Game 组件的 Star Prefab 属性中。这是我们第一次为属性设置引用，只有在属性声明时规定 type 为引用类型时（比如我们这里写的 cc.Prefab 类型），才能够将资源或节点拖拽到该属性上。

保存脚本后将 Game 组件添加到 层级管理器 中的 Canvas 节点上（选中 Canvas 节点后，拖拽脚本到 属性检查器 上，或者点击 属性检查器 的 添加组件 按钮，并从 添加用户脚本组件 中选择 Game。）

就容易理解了，首先在 Game 组件下声明了 starPrefab 属性，这个属性默认值为 null，能传入的类型必须是 Prefab 预制资源类型。这样之后的 ground、player 属性也可以理解了。

以上代码为 score 属性设置了三个参数 default、 displayName 和 tooltip。这几个参数分别指定了 score的默认值（default）为 0，在 属性检查器 里，其属性名（displayName）将显示为 Score (player)，并且当鼠标移到参数上时，显示对应的 tooltip。

这里初学者可能会疑惑，为什么像 starPrefab 这样的属性会用 {} 括起来，括号里面还有新的 “属性” 呢？其实这是属性的一种完整声明，之前我们的属性声明都是不完整的，有些情况下，我们需要为属性声明添加参数，这些参数控制了属性在 属性检查器 中的显示方式，以及属性在场景序列化过程中的行为。例如：

星星的生成是游戏主逻辑的一部分，所以我们要添加一个叫做 Game 的脚本作为游戏主逻辑脚本，这个脚本之后还会添加计分、游戏失败和重新开始的相关逻辑。

Star Prefab 需要的设置就完成了，现在从 层级管理器 中将 star 节点拖拽到 资源管理器 中的 assets 文件夹下，就生成了名叫 star 的 Prefab 资源。

接下来双击这个脚本开始编辑，星星组件只需要一个属性用来规定主角距离星星多近时就可以完成收集，修改 properties，加入以下内容并保存脚本。

我们不需要修改星星的位置或渲染属性，但要让星星能够被主角碰触后消失，我们需要为星星也添加一个专门的组件。按照和添加 Player 脚本相同的方法，添加名叫 Star 的 JavaScript 脚本到 assets/scripts/中。

首先从 资源管理器 中拖拽 assets/textures/star 图片到场景中，位置随意，我们只是需要借助场景作为我们制作 Prefab 的工作台，制作完成后会我们把这个节点从场景中删除。

对于需要重复生成的节点，我们可以将他保存成 Prefab（预制） 资源，作为我们动态生成节点时使用的模板。关于 Prefab 的更多信息，请阅读 预制资源（Prefab）。

主角现在可以跳来跳去了，我们要给玩家一个目标，也就是会不断出现在场景中的星星，玩家需要引导小怪兽碰触星星来收集分数。被主角碰到的星星会消失，然后马上在随机位置重新生成一个。

感觉移动起来有点迟缓？主角跳的不够高？希望跳跃时间长一些？没问题，这些都可以随时调整。只要为 Player 组件设置不同的属性值，就可以按照您的想法调整游戏。这里有一组设置可供参考：

保存脚本后，点击 预览游戏 来看看我们最新的成果。在浏览器打开预览后，用鼠标点击一下游戏画面（这是浏览器的限制，要点击游戏画面才能接受键盘输入），然后就可以按 A 和 D 键来控制主角左右移动了！

update 在场景加载后就会每帧调用一次，我们一般把需要经常计算或及时更新的逻辑内容放在这里。在我们的游戏中，根据键盘输入获得加速度方向后，就需要每帧在 update 中计算主角的速度和位置。

this.xSpeed = this.maxMoveSpeed * this.xSpeed / Math.abs(this.xSpeed);

// if speed reach limit, use max speed with current direction

然后修改 onLoad 方法幻想三国志4单机游戏，在其中加入向左和向右加速的开关，以及主角当前在水平方向的速度。最后再调用 cc.systemEvent，在场景加载后就开始监听键盘输入：

，Cocos Creator 会自动打开您的默认浏览器并开始在里面运行游戏，现在应该可以看到我们的主角——紫色小怪兽在场景中间活泼的蹦个不停了。

onLoad 方法会在场景加载后立刻执行，所以我们会把初始化相关的操作和逻辑都放在这里面。我们首先将循环跳跃的动作传给了 jumpAction 变量，之后调用这个组件挂载的节点下的 runAction 方法，传入循环跳跃的 Action 从而让节点（主角）一直跳跃。保存脚本，然后我们就可以开始第一次运行游戏了！

那么 后半部分 easing(cc.easeCubicActionOut()) 的作用是什么呢？easing 是 ActionInterval 类下的一个方法，这个方法可以让时间间隔动作呈现为一种缓动运动，传入的参数是一个缓动对象，返回一个 ActionInterval 类型对象，这里传入的是使用 easeCubicActionInOut 方法构建的缓动对象，EaseCubicInOut 是按三次函数缓动进入并退出的动作，具体曲线可参考下图：

* Several MoveBy actions can be concurrently called, and the resulting

* Moves a Node object x,y pixels by modifying its position property.