JS贪吃蛇开发笔记1

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);
}
-----------------------------------------------------------------------------------
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值