初学Cocos Creator,做了个小游戏与大家分享
在线体验:(IE10可行,360浏览器可能会有问题,其它浏览器自测)
http://1.snailgo.applinzi.com
(PC端)
http://2.snailgo.applinzi.com
(移动端)
源码下载:https://download.csdn.net/download/lzq603/10274574
1. 创建以下文件夹,新建一个场景game_scene,并将图片、字体资源导入。
2. 设置Canvas大小为720x1280,
新建单色节点bg,设置大小为720x1280
新建空节点map,在map下新建单色节点ground1,颜色改为黑色,锚点设置为(1,1),并调整大小360x640,如图:
将资源中的Snail拖至Canvas上创建Sprite节点,锚点设置为(0.5,0),并平移到合适位置,如图
在Canvas节点下创建2个Button节点(删掉下面自动生成的Label节点),分别命名为start_btn与restart_btn,点击按钮节点,将res下其他三个图片资源分别拖拽至按钮控件对应位置上,例如:点击start_btn节点,将res中start_btn图片拖至下图Normal上。
设置大小模式:
然后调节他们的大小、位置,此时,界面如下:
3. 在scripts文件夹内新建javascripts脚本game_scene,修改代码如下:
cc.Class({
extends: cc.Component,
properties:{
status:0, //游戏状态,0:等待用户触屏 1:玩家触屏 2:玩家手指离开屏幕 3:播放游戏动画中,禁止玩家操作
startBtn:{ //为方便访问开始按钮,在此添加开始按钮节点
type:cc.Node,
default:null,
}
},
// onLoad () {},
start () {
this.node.on("touchstart",function(e){ //触屏事件
},this);
this.node.on("touchend",function(e){ //触屏结束事件
},this);
},
gameStart(){ //游戏开始
this.startBtn.destroy(); //销毁开始按钮,不再让它显示
},
// update (dt) {},
});
点击Canvas节点——添加组件——添加用户脚本组件——game_scene(就是刚刚写的脚本),把按钮添加在这个组件上:
4.给start_btn按钮添加一个事件:
4.再添加一个Label节点,用来显示分数:
游戏开始之前,我们不让它显示,在属性检查器中将它之前的勾去掉:
至此,游戏的基本场景我们已经布置好了,接下来我们开始写代码控制游戏进行。