使用COCOS2D-JS开发你的第一个游戏

最新推荐文章于 2024-12-26 00:00:00 发布

狂彪的蜗牛

最新推荐文章于 2024-12-26 00:00:00 发布

阅读量5k

点赞数

分类专栏： Cocos2d-js 文章标签： cocos2d-js 网页游戏 html

本文链接：https://blog.csdn.net/new_gujiaming/article/details/50008233

版权

这篇教程针对COCOS2D-JS 3.7.1版本，为初学者提供了详细的开发指导。从下载安装到新建JS项目，再到资源管理和场景、精灵的创建，通过实例一步步解析如何使用COCOS2D-JS开发网页游戏。主要内容包括创建StartScene和PlayScene，添加资源，编写StartScene.js和PlayScene.js代码，以及实现精灵的交互功能。

摘要由CSDN通过智能技术生成

　　鉴于COCOS2d-js官网上帮助文档和版本不匹配的问题，相信很多刚刚接触COCOS2D-js的朋友都会搞的一头雾水，譬如我，所以在这里写下这篇教程，给同样小白的你一些参考，这里我用的是3.7.1版本，可以在官网的历史版本里找到。对于那些下载最新版本的朋友，你会发现你完全找不到新手教程啊。。。

官方下载链接：点击打开链接

开发环境按照官网配置，我就不多做赘述了，新建JS项目的方法是在安装目录下，按住shift键，再点击右键选择在此处打开命令窗口。输入cocos new -l js projectName,其中js是项目的开发语言，projectName是项目名称。

等待几分钟后，你就能在安装目录下找到你的项目，然后使用开发工具打开，推荐使用webstorm或者HBuilder，他们的语法提示都很强,webstorm的错误提示相对来说更强一些，用哪个看你习惯了。

打开项目后，我们看到的项目目录：

res文件夹存放我们的资源文件，src存放我们的JS文件，main.js是项目的入口类，project.json类很重要，我们每新增一个js文件都需要在这里注册。

这里我们用COCOS官网的例子，方便大家对比和理解。

首先，我们在src目录下新建StartScene.js，然后在project.json文件里注册，如下：

{
    "project_type": "javascript",

    "debugMode" : 1,
    "showFPS" : true,
    "frameRate" : 60,
    "id" : "gameCanvas",
    "renderMode" : 0,
    "engineDir":"frameworks/cocos2d-html5",

    "modules" : ["cocos2d"],

    "jsList" : [
        "src/resource.js",
        "src/app.js",
        "src/StartScene.js"
    ]
}

将StartScene.js放到jsList里面就行。

然后我们要添加一下项目要用到的图片资源，我们需要背景图片和开始按钮图片，将你准备的两个图片添加到res目录下，并在src/resource.js文件里注册，如下图：

var res = {
    HelloWorld_png : "res/HelloWorld.png",//框架自带图片
    CloseNormal_png : "res/CloseNormal.png",//框架自带图片
    CloseSelected_png :

最低0.47元/天解锁文章