用Cocos2d-JS引擎快速开发一个微信游戏

学了不少技术，今天我们通过实践，使用Cocos2d-JS引擎快速开发一款名为《来自喵星的你》的微信游戏。

1. Cocos2d-JS引擎

Cocos2d-JS引擎是Cocos2d-x的JavaScript版本。其经过极大简化与整合的API设计，让游戏开发变得前所未有的轻松。依托Web平台，Cocos2d-JS拥有高效的开发测试环境，同时命令行工具提供了便捷功能，只需三步就能完成Web与Native全平台的部署。

2. Cocos Code IDE

Cocos Code IDE是基于Eclipse的跨平台集成开发环境（IDE）。它能帮助开发者便捷地创建游戏工程、编写和调试代码、实时查看修改效果，并最终直接发布成可上架的安装包。

3. 游戏《来自喵星的你》

游戏概述

《来自喵星的你》的主角是一只喵星小猫咪，它的使命是在危险的地球上铲除汪星人（至于为何两个星球的主战场设置在地球，不必纠结这些细节）。配角是一群不断产生的汪星人，玩家需要控制喵星人的移动和攻击，来躲避或打败汪星人，打败的汪星人越多，分数越高。若喵星人被打败，游戏结束，此时玩家可以将成绩分享给好友，比拼谁更厉害。

游戏本质上是游戏内各种对象根据设定的逻辑或用户的交互运行一系列动画。接下来，我们就动手开发这款在微信上十分火爆的《来自喵星的你》。

游戏结构

• 简洁开场：没有主菜单和繁杂的内容，一进游戏就开始玩，简洁的设计更能吸引用户。
• 主界面元素：包含玩家操作界面和分数标签。
• 角色生成规则：喵星人只有一只，而汪星人会随着时间不断产生。
• 游戏结束界面：显示游戏结束的界面，玩家可以选择重玩或分享游戏，这是一个单场景游戏。

开发步骤

1）游戏入口与场景加载

window.onload函数是Cocos2d-JS游戏的入口。在此函数中，我们先加载游戏所需的资源，加载完成后进入游戏场景。示例代码如下：

cc.LoaderScene.preload(["catnorrisd.png", "pg.png", "arrow.png", "end.png"], function () { // 加载资源
cc.director.runScene(new 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.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();
}

5）状态机

在前面的代码中，我们看到了scheduleUpdate()和idle()这两个函数调用。这里我们将喵星人设置为状态机模式，它可能有以下几种状态：idle（闲置）、walking（行走）、attacking（攻击）、dieing（濒死）和dead（死亡）。

scheduleUpdate()是一个定时器，它会每帧调用update函数，我们可以根据不同的状态处理喵星人的表现。例如，当喵星人处于walk状态时，会有一个左右摇晃的动作，代码如下：

this.runAction(cc.sequence(cc.rotateTo(0.12, -3), cc.rotateTo(0.12, 3)).repeatForever());

cc.rotateTo是一个旋转动作，cc.sequence是一个连续动作，它将两个rotateTo动作连接在一起按顺序执行，repeatForever表示该动作会循环进行。

同理，两种汪星人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)) + "%的好友！你能超过我吗";

4. 总结

可以看到，《来自喵星的你》仅用一个JS文件就开发完成了。使用Cocos2d-JS引擎能够高效、快速、方便地开发JS游戏。只要拥有Cocos2d-JS和Cocos Code IDE，开发者就能轻松、快速地打造出一款有趣的优秀游戏。

目前，微信游戏平台已成为国内最具人气的平台之一，诞生了许多成功的作品。借助Cocos2d-JS和Cocos Code IDE，开发者可以告别繁琐的开发工序，提高开发效率。也许下一款微信大热的游戏就出自你的手！

游戏效果图：（此处可插入游戏效果图）