JS基础 | Cocos Creator 开发环境搭建

编程并不只是简单地写代码，而是要将编写的代码运行在指定平台环境上，在此之前我们还需要搭建生产代码的环境。

一、 软件准备

• Chrome：浏览器，用于预览、调试我们的游戏

• VSCode：代码编辑器，用于编写 JavaScript 代码

• Nodejs：JavaScript 运行环境，主要用于我们学习 JavaScript 语法

• Cocos Creator：游戏引擎，开发游戏应用

以上软件 Shawn 已经为大家准备好了，通过公众号菜单回复【开发环境】获取。

使用浏览器浏览网页，相信大家都不陌生，使用浏览器调试游戏代码，我们以后介绍，下面简单介绍一下 Node.js 与 Cocos Creator 这两个软件安装启动。

二、Nodejs 交互式命令行

我们将在 Nodejs 交互式命令行中介绍 JavaScript 语言的语法 ，现阶段需要保证将 Nodejs 安装好即可。

这里是 Nodejs 的下载地址：

• Windows版本：https://npm.taobao.org/mirrors/node/v10.16.0/node-v10.16.0-x64.msi

• Mac 版本：https://npm.taobao.org/mirrors/node/v10.16.0/node-v10.16.0.pkg

根据安装向导一路下一步就可以安装完成，安装完毕后 Windows 系统通过开始菜单，进入 Nodejs 交互式命令行。

Mac 系统通过打开 Terminal 命令终端，输入：node --version 或 -v 查看 Node.js 的版本号，输入 node 进入交互式命令行，看下图：

三、Cocos Creator

Cocos Creator 是厦门雅基软件开发的跨平台游戏引擎，支持在 Windows 和 Mac 下进行游戏开发，下载地址： https://www.cocos.com/creator

根据自己的操作系统下载最新版本即可，目前最新版本是 2.1.2，见下图：

如果你使用的是 Windows 操作系统，下载后需要先解压后安装，通过安装包向导一路下一步，需要注意的是在安装向导中可以选择不安装 Visual Studio C++ ，这样安装会快一些，因为目前阶段我们不准备开发 Windows 或手机 App 版本的游戏，而是聚焦在 HTML5 版本的游戏，因为它可以运行在几乎所有系统、设备、平台之上。

在 Mac 操作系统，我们下载的是一个 dmg 磁盘镜像文件，双击后会弹出一个窗口，将 Cocos Creator 图标拖动到右边的 Application 文件夹即可，看下图：

安装好 Cocos Creator 之后，首次启动时会先打开一个项目管理窗口，如下图：

建议初学者选择范例集合工程模板，创建一个新工程。

在启动 Cocos Creator 主程序时，首次还需要登录，我们还需要注册一个 Cocos 开发者帐号： 

打开工程后，点击顶部启动按钮运行预览：

范例集合中有大量的案例，演示了 Cocos Creator 引擎编辑器和 API 的使用，是我们学习 Cocos Creator API 接口极佳的教材，建议初学者先将范例合集启动起来，将所有功能点都浏览一遍。

四、英文专业术语

• chrome：n. 铬，铬合金；铬黄；谷歌浏览器;

• Node.js：Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

• JavaScript 运行环境;

• VSCode：全称 Visual Studio Code，是微软基于 Elector 框架开发的跨平台代码编辑器;

• Windows：n. 微软公司生产的“视窗”操作系统;

• Mac：n. 麦金塔电脑，苹果个人计算机;

• version：n. 版本;

• terminal: n. 航空站；终点站；终端机;

• HTML5：HTML 超文本标记语言(Hyper Text Markup Language)，HTML5 是 HTML 最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定；

• Application：n. 应用；申请；应用程序；

• API：Application Programming Interface，应用程序接口，是一些预先定义的函数，或指软件系统不同组成部分衔接的约定；

---

「少年奎特尔」公众号专注青少年游戏编程启蒙，通过游戏编程了解计算机与软件开发的一般知识，学习计算机思维，并能将日常的数学 、英语、表达、创意等能力应用于编程实践之中，Shawn 的愿景是：

——让游戏编程成为教育的最强武器！