JS贪吃蛇开发笔记
还是只写了主逻辑,其他美化和音乐就不一一添加了
------------------------------------------------------------------------------
1.首先在resource文件中注册需要加载的图片和声音,并且定义蛇的运动方向和屏幕尺寸的大小
var director = cc.Director._getInstance();
var winSize = cc.size(640,1134);
var dir = null;
SNAKE_BODY = []; //蛇身的数组
SNAKE_DIR = {
UP: 0,
DOWN: 1
LEFT: 2,
RIGHT: 3
};
----------------------------------------------------------------------------
2.封装一个模块,定义三个类型,1.蛇头 2.身体 3.食物
--SnakeGame--
var SnakeGame = cc.Node.extend({
_type:null,
ctor:function(type){
this._super();
this._type = type;
var sp = cc.Sprite.create();
1.蛇头 2.身体 3.食物
switch (this._type) {
case 1:
sp = cc.Sprite.create(res.snakeHead_png);
break;
case 2:
sp = cc.Sprite.create(res.snakeBody_png);
break;
case 3:
sp = cc.Sprite.create(res.snakeFood_png);
break;
default: break;
}
sp.setAnchorPoint(0,0);
sp.setPosition(0,0);
this.addChild(sp);
}
});
SnakeGame.create = function(arg){
var snakeGame = new SnakeGame(arg);
return snakeGame;
}
---------------------------------------------------------------------------
3.直接进入GameScene的主逻辑
sprite:null,
lab:null,
size:null,
_head:null,
_food:null,
_snakeBody:null,
score:null,
m_score:null
director.resume();//用来恢复游戏
//添加触摸侦听(js)
cc.eventManager.addListener({
event:cc.EventListener.TOUCH_ONE_BY_ONE,
swallowTouches:false, //用来屏蔽底层触摸
onTouchBegan: this.onTouchBegan,
onTouchMoved: this.onTouchMoved,
onTouchEnded: this.onTouchEnded
},this);
----此处省略各种按钮和背景图的添加,用到时直接用----
//添加九宫格(10*10)
//背景层方格 背景层颜色,透明度 长和宽
var bgc = cc.LayerColor.create(cc.color(175,100,100,75),630,630);
//背景层两边距离窗口尺寸分别还有5像素,所以横坐标为5,纵坐标随你心情咯
bgc.setPosition(cc.p(5,250));
bgc.setAnchorPoint(cc.p(0,0));
bgc.setTag(111);
this.addChild(bgc);
//画线 两个for循环 10行10列 算上边线 行需要11条线 列需要11条线
for (var i=0; i<=10; i++ ){
//横线
var node = cc.DrawNode.create();
// 画 线 起点 终点 线粗 线的颜色,透明度
node.drawSegment(cc.p(0,i*63),cc.p(630,i*63),1,cc.color(1,1,1,255));
bgc.addChild(node);
//竖线
var node1 = cc.DrawNode.create();
node1.drawSegment(cc.p(i*63,0),cc.p(i*63,630),1,cc.color(1,1,1,255));
bgc.addChild(node1);
}
-----------------------------------------------------------------------------------
还是只写了主逻辑,其他美化和音乐就不一一添加了
------------------------------------------------------------------------------
1.首先在resource文件中注册需要加载的图片和声音,并且定义蛇的运动方向和屏幕尺寸的大小
var director = cc.Director._getInstance();
var winSize = cc.size(640,1134);
var dir = null;
SNAKE_BODY = []; //蛇身的数组
SNAKE_DIR = {
UP: 0,
DOWN: 1
LEFT: 2,
RIGHT: 3
};
----------------------------------------------------------------------------
2.封装一个模块,定义三个类型,1.蛇头 2.身体 3.食物
--SnakeGame--
var SnakeGame = cc.Node.extend({
_type:null,
ctor:function(type){
this._super();
this._type = type;
var sp = cc.Sprite.create();
1.蛇头 2.身体 3.食物
switch (this._type) {
case 1:
sp = cc.Sprite.create(res.snakeHead_png);
break;
case 2:
sp = cc.Sprite.create(res.snakeBody_png);
break;
case 3:
sp = cc.Sprite.create(res.snakeFood_png);
break;
default: break;
}
sp.setAnchorPoint(0,0);
sp.setPosition(0,0);
this.addChild(sp);
}
});
SnakeGame.create = function(arg){
var snakeGame = new SnakeGame(arg);
return snakeGame;
}
---------------------------------------------------------------------------
3.直接进入GameScene的主逻辑
sprite:null,
lab:null,
size:null,
_head:null,
_food:null,
_snakeBody:null,
score:null,
m_score:null
director.resume();//用来恢复游戏
//添加触摸侦听(js)
cc.eventManager.addListener({
event:cc.EventListener.TOUCH_ONE_BY_ONE,
swallowTouches:false, //用来屏蔽底层触摸
onTouchBegan: this.onTouchBegan,
onTouchMoved: this.onTouchMoved,
onTouchEnded: this.onTouchEnded
},this);
----此处省略各种按钮和背景图的添加,用到时直接用----
//添加九宫格(10*10)
//背景层方格 背景层颜色,透明度 长和宽
var bgc = cc.LayerColor.create(cc.color(175,100,100,75),630,630);
//背景层两边距离窗口尺寸分别还有5像素,所以横坐标为5,纵坐标随你心情咯
bgc.setPosition(cc.p(5,250));
bgc.setAnchorPoint(cc.p(0,0));
bgc.setTag(111);
this.addChild(bgc);
//画线 两个for循环 10行10列 算上边线 行需要11条线 列需要11条线
for (var i=0; i<=10; i++ ){
//横线
var node = cc.DrawNode.create();
// 画 线 起点 终点 线粗 线的颜色,透明度
node.drawSegment(cc.p(0,i*63),cc.p(630,i*63),1,cc.color(1,1,1,255));
bgc.addChild(node);
//竖线
var node1 = cc.DrawNode.create();
node1.drawSegment(cc.p(i*63,0),cc.p(i*63,630),1,cc.color(1,1,1,255));
bgc.addChild(node1);
}
-----------------------------------------------------------------------------------