![Cocos2d-x学习笔记:完全掌握JS API与游戏项目开发 (未来书库,触控未来官方教材)](https://wfqqreader-1252317822.image.myqcloud.com/cover/756/27110756/b_27110756.jpg)
2.1 JavaScript开发环境搭建
我们要想编写和运行JavaScript脚本,就需要JavaScript编辑工具和JavaScript运行测试环境。
2.1.1 下载WebStorm工具
最简单的JavaScript编辑工具可以是一些文本编辑工具,但是它们往往缺少语法提示,有的语法关键字还没有高亮显示,最重要的是它们一般不支持调试。考虑到易用性,我们推荐使用付费的JavaScript开发工具——WebStorm,WebStorm是Jetbrains公司研发的一款JavaScript开发工具,可以编写HTML5和JavaScript代码,并且可以调试。Jetbrains公司开发的很多工具都好评如潮,其中Java开发工具IntelliJ IDEA被认为是最优秀的产品。WebStorm与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JavaScript语法提示和运行调试功能。WebStorm也是Cocos2d-x JS API游戏开发的重要工具。
WebStorm可以到网站http://www.jetbrains.com/webstorm/download/下载,如图2-1所示,WebStorm有多个不同的平台版本,可根据需要下载特定平台版本文件。WebStorm软件可以免费试用15天,超过15天则需要输入软件许可(License key),即需要购买许可。
![](https://epubservercos.yuewen.com/72EBE5/15477642705584806/epubprivate/OEBPS/Images/00011.jpg?sign=1739034531-bye6POxKRDkN0UQUonu6vlDlkpIFaC0T-0-dddf942e0b4ea334f273109f831964ee)
图2-1 WebStorm下载
2.1.2 JavaScript运行测试环境
如果让编写好的JavaScript文件运行,还需要配置运行测试环境,这个环境主要包含一个JavaScript引擎,WebStorm本身不包含这个运行环境。如果我们编写的JavaScript文件嵌入到HTML文件运行,可以安装浏览器Google Chrome、FireFox或Opera(注意IE浏览器对JavaScript支持不好)。如果只是运行和测试JavaScript文件,可以安装Node.js。关于安装浏览器我们就不再介绍了,本节我们重点介绍安装Node.js。
Node.js安装包括:Node.js运行环境安装和Node.js模块包管理。首先安装Node.js运行环境,该环境在不同的平台下的安装文件也不同,可以在http://nodejs.org/download/页面找到需要下载的安装文件,目前Node.js运行环境支持Windows、Mac OS X、Linux和SunOS等系统平台。若计算机是Windows 10的64操作系统,则可以下载node-v4.2.2-x64.msi文件,下载完成后进行安装就可以了。
安装完成后需要确认一下,Node.js的安装路径(C:\Program Files\nodejs\)是否添加到系统Path环境变量中,我们需要打开图2-2所示的对话框,在系统变量Path中查找是否有这个路径。
![](https://epubservercos.yuewen.com/72EBE5/15477642705584806/epubprivate/OEBPS/Images/00012.jpg?sign=1739034531-XV78pLbSr1uB6ATNZBMQ8C4RDswrnRjQ-0-79fb65d76c979ad0b3764c90d63be0cf)
图2-2 系统变量Path配置
2.1.3 HelloJS实例测试
搭建好环境后,需要测试一下。首先需要使用WebStorm工具创建工程,单击欢迎界面Create New Project按钮,或选择菜单File→New Project,弹出工程模板对话框,如图2-3所示,选择Empty Project工程模板,在Location是工程文件保存位置。输入完成后,单击Create按钮创建工程。
![](https://epubservercos.yuewen.com/72EBE5/15477642705584806/epubprivate/OEBPS/Images/00013.jpg?sign=1739034531-DEMP7OZaylCS2k7v9TBKWSBvbHpiq9CK-0-76a5313d9ffa1a8eeb9aa0dd8eee7ef9)
图2-3 工程模板对话框
如果要在WebStorm工程中创建JavaScript文件,可以右键菜单选中New→JavaScript File,弹出如图2-4所示的New JavaScript file对话框,在Name中输入HelloJS,这是创建js文件名,Kind中选择JavaScript file。
![](https://epubservercos.yuewen.com/72EBE5/15477642705584806/epubprivate/OEBPS/Images/00014.jpg?sign=1739034531-LjJ0xrNsLuq9JVxrRBi6fRn3KXA1myV4-0-c7c68189e9d07becc471a762afe944ba)
图2-4 New JavaScript file对话框
在New JavaScript file对话框中输入相关内容后,单击OK按钮创建HelloJS.js文件,创建成功WebStorm界面如图2-5所示。
![](https://epubservercos.yuewen.com/72EBE5/15477642705584806/epubprivate/OEBPS/Images/00015.jpg?sign=1739034531-rQCgNqv0ld8Xcwj1x9vg3Cc7XdDFCbU5-0-832420ea749f825f1ebcc3617f91da6b)
图2-5 WebStorm创建成功界面
在编辑界面中输入如下代码:
var msg = 'HelloJS!' console.log(msg);
其中代码var msg = 'HelloJS!'是把字符串赋值给msg变量,console.log(msg)是将msg变量内容输出到控制台。如果要想运行HelloJS.js文件,选择HelloJS.js文件,弹出图2-6所示的右键菜单,选中Run 'HelloJS.js'并运行。运行结果输入到日志窗口,如图2-7所示。
![](https://epubservercos.yuewen.com/72EBE5/15477642705584806/epubprivate/OEBPS/Images/00016.jpg?sign=1739034531-vA43leDtHPIM1t4WQaSaKTuDgrYO0AN3-0-6e74b69bcbb3e4102a8d33f2116d4b54)
图2-6 运行HelloJS.js文件菜单
![](https://epubservercos.yuewen.com/72EBE5/15477642705584806/epubprivate/OEBPS/Images/00017.jpg?sign=1739034531-XDuvkAreRQ4ch1mt2OJlgzWlxBds9X2u-0-9ef2b83653f08dae81a6499411d51834)
图2-7 运行结果
如果想调试程序,可以设置断点,如图2-8所示,在行号后面的位置单击,设置断点。
![](https://epubservercos.yuewen.com/72EBE5/15477642705584806/epubprivate/OEBPS/Images/00018.jpg?sign=1739034531-DoX3T1hpVgVpekkykcOtF6WFrSKNJE20-0-10f48564f08cf9fec12c029c9ae37400)
图2-8 设置断点
调试运行过程,在图2-6所示的右键菜单中选择Debug 'HelloJS.js'运行。如图2-9所示,程序运行到第5行挂起。
![](https://epubservercos.yuewen.com/72EBE5/15477642705584806/epubprivate/OEBPS/Images/00019.jpg?sign=1739034531-yflb4zTvOTIE7O5pWTEbFQERKZJiutyz-0-880fb1147e60110972ac55ae6c83404e)
图2-9 运行到断点挂起
在Debugger中的Variables中查看变量,从中可以看到msg变量的内容。在Debugger窗口中有很多调试工具栏按钮,这些按钮的含义说明如图2-10所示。
![](https://epubservercos.yuewen.com/72EBE5/15477642705584806/epubprivate/OEBPS/Images/00020.jpg?sign=1739034531-8eRGAK1d0BZnIf96gW5nynnHzdBLIsgj-0-4e75511761c61fb4f6750524fdb7edf0)
图2-10 调试工具栏按钮