1.初来乍到

 

　　打开CocosCreator点击新建空白项目，在默认布局的左下区域，一个黄黄assets文件夹映入眼帘。作为前端的你对这个文件是不是再熟悉不过了。是的，和你想象的一样，开发游戏中所有资源，脚本都会放置到该文件。

 

　　2.初步探索

 

　　项目建立好以后，对各区域的功能大致了解下，作为前端的你，主要还是要迅速的掌握cc提供的各种NB的功能。所以，还得赶紧打开[官网](https://docs.cocos.com/creator/manual/zh/)快速浏览一遍。官网也写得很好，提供中文和英文，对于英文能力不好的伙伴来说，简直是不能太好了。是不是找到了当初学习Vue的感觉。作为前端的你，整天写了一堆业务控制，处理各种布局，各种兼容，对奇怪的css优先级搞得云里雾里的。所以是时候换一个更有意思开发场景，给自己做个游戏解闷多好

 

　　cc是一个跨平台框架，一端编译多端发布。想想前端的mpvuetarouni-app，无不是解决此类问题，再加上gulp,webpack,再来一堆node_modules,啥lesssassstylus.各种环境配置那是相当的复杂。所以业界流传，前端已经进入深水区，真的一点不假。然而cc依然可以让你舒适的写JS或者TS,并且没有繁杂的配置，一键搞定打包发布。

 

　　3.小试牛刀

 

　　上边说了一大堆，其实并没有什么鸟用。在官网首页中，给开发者提供了个完整坑爹的游戏《摘星星》，如果打包到微信小游戏，需要横屏，不太友好。本着举一反三的求学态度，我利用此场景，换了一个游戏玩法。开发了自己第一款小游戏《坦克侠》，当然也很坑爹

 

　　游戏开发主要是确定游戏规则，我新改编的玩法就是在星空中随机生成不同数量的星星，并一直往下掉落，我的主角坦克必须在星星掉落前接住。丢失一颗星星生命减一，生命为0游戏结束。当然我们主角每收集一颗星星，根据当前的难度会添加一定的分数。累计到一定的分数，又可以给主角添加一点生命值

 

　　在官网[下载初始项目](https://github.com/cocos-creator/tutorial-first-game/releases/download/v2.0/start_project.zip)下载一个基础项目，该项目中只有一些项目基本图片和声音。接下来，我们需要建立场景，制作预制资源，添加控制脚本，编译发布微信小游戏，[快速开始](https://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html)

 

　　制作一个游戏场景，与官网不同的是，我将Canvas的Size属性，在属性检查器中设置为288x512，并且勾选了FitHeight以及FitWidth用以适应同的手机屏幕。然后拖动背景图片到层级管理器中，并在场景编辑器中设置背景Size属性，使其等于Canvas的Size属性。然后依次在层级管理器中新建三个Label控件，依次拖动到背景图片左上角和右上角，用以记录生命值，当前分数，以及最高分数。接着在场景中间添加一个Label控件和一个Button按钮用于显示游戏结束和开始游戏。在场景底部拖动放置我们的主角坦克。所以最新场景的效果应该是如下显示的那样