cocos2d-js第一个项目（cocos2d-html5）

最近清闲，就看了下cocos2d-x,都说这是个跨平台的，网上的安装配置也有很多，但是多来看得眼花缭乱的，我的启点目标就很低，不要跨平台，就让他在浏览器上呈现出来，不是专业的游戏开发公司搞毛的跨平台啊，都是搞在微信上的小游戏而已，基于此，本人就能过牛人的文章自己把这个小平台搭建起来了，在此记录下，否则下次又要重新查资料了，人的记忆力是有限。

再次声明，只搭建了html5的，什么安卓啊，苹果啊，没时间去下载对应的sdk,况且本人也是菜鸟，不敢造次 了。接下来介绍搭建环境步骤，我的是mac，自带了很多软件，如果你是其他系统，请自行百度下载安装。

最主要的，cocos2d-js的SDK包，最新的已经与cocos2d-x整成一个包了，本人下载 的是cocos2d-x-3.7.1,最新版本，官网地址：选择对应的操作系统，如果链接不可用，请输入：www.cocos.com查找。

下载安装python,在mac上已经自带了，此处可省略，如果没有不要担心，上他的官网下载对应的版本安装即可，官网地址：下载对应版本，如果不能点击，请输入：www.python.org,下载完后，安装步骤自行解决，不讨论。

下载安装apache，本人mac也自带了此软件，这是配置本地服务器的，因为cocos2d-js没有部署到服务器上查看不了效果，官网地址：自行下载，如果不能点击，请输入apache.org。安装配置不再说明，请自行百度，下面我会以本人mac为例说明。

jdk,android SDK, ndk,xcode,ant，在此都不作介绍，本人配置的就是html5，不做跨平台介绍了，如果想要支持全平台，请自行百度各位大大的文章。

当完成上面前三步后，接下来就可以配置开发环境了，ide可以任选，自己喜欢，如果你要用记事本也行。本人用了sublime,如果你用了webstorm,可省略apache，webstorm已自带了个小型本地web服务器了。配置开发环境：

1.解压下载的cocos2d-js压缩包，目录自己指定，本人解压到：/Users/yourname/work/cocos2d-js目录下，看自己喜好。

2.执行解压后目录下的setup.py,这是python脚本，确保你也安装了python,在终端下进入setup.py所在目录下，输入：./setup.py，他会自动搜索本机的环境设置，如果没有发现会添加相应的环境变量，在这里我们只有：COCOS_CONSOLE_ROO环境变量，他会自动添加当前的cocos2d-js对应的目录，其他的如ANDROID_SDK_ROOT,NDK_ROOT等一系列环境变量都会提示我们找不到，然后我们只需要按enter键跳过这些变量的设置，如果你已经下载好了，可以把这些变量设置好，一路向下，就会完成相应的开发环境的安装配置。

3.经过以上两步，cocos命令已经安装好了，能在终端直接运行，接下来我们创建我们自己的cocos2d-js项目。第一种项目，跨平台的，切换目录到你项目的根目录，输入：cocos new -l js helloCocos2d-js，等待数秒，就可以在对应目录下找到我们刚创建的项目了，他支持全平台。但是这篇文章是针对html5的，所以我们要加参数：cocos new -l js –no-native html5Cocos2d-js，这样创建出来的只支持html5平台，其他的都不支持，想了解cocos new相应的参数信息，请查看他自带的帮助文件。

4.现在，我们的项目已经创建出来了，接下来我们要看下我们的效果如何，这就需要把他部署到服务器上，如果用了webstorm，或者已经有本地服务器的，部署应该不用在说了吧，这里说下mac下自带apache的配置。第一种方法，直接把项目创建或拷贝到apache的根目录下，启动apache，在浏览器中输入地址：

http://localhost/html5Cocos2d-js/index.html就能看到效果。在引介绍下mac自带的apache,他的根目录在：/Library/WebServer/Documents,可以把项目放在此目录下，不用配置额外信息，apache的启动命令：sudo apachectl start (stop,restart),完成这两步，就可以在浏览器中看到效果，如图：



5.本人不喜欢把项目放在他的根目录下，因此配置了apache的虚拟主机，配置如下：

apache的配置文件httpd.conf在目录：/etc/apache2下，可以在终端输入：open /etc打开目录，找到httpd.conf,然后在里面找到：“#Include /private/etc/apache2/extra/httpd-vhosts.conf”，去掉前面的“＃”，保存并退出。

6.然后打开：/etc/apache2/extra/httpd-vhosts.conf，里面默认也有两个虚拟主机的配置，不过都是没用的，我们注释掉，然后写上自己的虚拟主机配置，可参考他自带的，本人配置如下：

# Virtual Hosts
#
# Required modules: mod_log_config

# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
#
#<VirtualHost *:80>
#    ServerAdmin webmaster@dummy-host.example.com
#   DocumentRoot "/usr/docs/dummy-host.example.com"
#    ServerName dummy-host.example.com
#   ServerAlias www.dummy-host.example.com
#   ErrorLog "/private/var/log/apache2/dummy-host.example.com-error_log"
#   CustomLog "/private/var/log/apache2/dummy-host.example.com-access_log" common
#</VirtualHost>

#<VirtualHost *:80>
#    ServerAdmin webmaster@dummy-host2.example.com
#    DocumentRoot "/usr/docs/dummy-host2.example.com"
#    ServerName dummy-host2.example.com
#    ErrorLog "/private/var/log/apache2/dummy-host2.example.com-error_log"
#    CustomLog "/private/var/log/apache2/dummy-host2.example.com-access_log" common
#</VirtualHost>
<VirtualHost *:80>
DocumentRoot "/Library/WebServer/Documents"
ServerName localhost
ErrorLog "/private/var/log/apache2/localhost-error_log"
CustomLog "/private/var/log/apache2/localhost-access_log" common
</VirtualHost>

<VirtualHost *:80>
DocumentRoot "/Users/yunjoy/work/cocos2d-js"
ServerName cocos2d-js
ErrorLog "/private/var/log/apache2/sites-error_log"
CustomLog "/private/var/log/apache2/sites-access_log" common
<Directory />
Options Indexes FollowSymLinks MultiViews
AllowOverride None
Order deny,allow
Allow from all
</Directory>
</VirtualHost>

请自行修改自己对应的目录

这样配置后，运行“sudo vim /etc/hosts”，打开hosts配置文件，加入”127.0.0.1 cocos2d-js”，这样就可以配置完成自己的虚拟主机了，可以访问“http://cocos2d-js/html5Cocos2d-js”了,效果就出来了，但是也有例外，访问后可能提示：

Forbidden

You don’t have permission to access /index.html on this server

这是权限的问题， 不知道是httpd.conf原来 的配置就这样呢，还是我们修改了虚拟主机才造成他修改的，没去查看他，为了解决这个问题，我们在打开：/etc/apache2/httpd.conf文件，你会发现如下的配置：

#
# Deny access to the entirety of your server's filesystem. You must
# explicitly permit access to web content directories in other
# <Directory> blocks below.
#
<Directory />
AllowOverride none
Require all denied
</Directory>

注释掉其中的Require all denied这行，这个问题基本就能解决，如果还不能解决，查看自己文件的后缀名，然后在httpd.conf中查找是否把相应后缀名文件的访问权限设置为denied了，祝你们好运。

第一个实例已经搭建完成了，接下来譔干嘛干嘛了，慢慢的进入自己的游戏之旅！！！！