[JavaScript] CocosCreator 中国象棋 —— 棋子移动

之前想用cocos2dx开发这个游戏来着，真是太Naive了。我掌握的C++生得发指，这里啥都看不懂那里一片红波浪，好不容易倒退了一百步解决了一运行又是迷之错误，再加上之前那个i3 2G的辣鸡电脑李时珍的皮，打开个vs十分钟，进去就是未响应呵呵哒。dagala，我投入CocosCreator+js的怀抱了，一天完成了之前所有的工作（微笑）。

真心推荐Cocoscreator，但缺点是网上资料不是很多，所以呢在这记录一下在编写脚本时的滞碍，希望能抛砖引玉添砖加瓦。

官方手册：http://docs.cocos.com/creator/manual/zh/getting-started/index.html

 

    onLoad: function () {
        
        this.node.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
            var delta = event.touch.getDelta();
            this.x += delta.x;
            this.y += delta.y;
        }, this.node);

        this.node.on(cc.Node.EventType.TOUCH_END, function () {
            
        }, this.node);
        
    },

 

 

 

这样棋子就可以拖动了。

但是有一个问题，棋类的移动要卡到某一个点上，而不是没有拘束的乱放，这个怎么处理呢，可能是我不灵光，我感觉这个是值得讨论的，但单独提出这个问题解决方案的资料很少。我看到五子棋有用prefab的，老实说我没看懂，也不敢肯定用在种类比较多的象棋上是否合适，所以说一说我研究的方法吧。

我想可以用算法算位置的。思路是先记下起始位置_x,_y；再考虑：怎么拖动当然是玩家的自由了，所以不能以此判定象棋的着陆点，故在TOUCH_END里也就是鼠标或触控离开屏幕时算出象棋应落位置；得到离开屏幕前也就是拖动的最后一刻象棋的位置即this.x,this.y；这两者相减再除以每个格子的长和宽求出走了多少格子，再用check_x,check_y进行校正，校正方法是四舍五入得到在x轴和y轴分别走了多少整数格；再利用check_x,check_y,_x,_y得到应当着陆的位置；同时配合棋子的走法，主要利用check_x,check_y判定它是否能到达，不者则回到原位。

这里面牵扯到大量变量的使用，所以注意好变量的作用域很关键，而且js变量的声明只有var类型，容易想当然，建议一个变量存一个数，关键处用console.log()，随时监测。附红方兵的脚本的onLoad。

 

    onLoad: function () {

        var change_x,change_y;
        var _x,_y;
        var self=this;
        
        this.node.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
            this.opacity = 160;
            if(flag==0){
                flag=1;
                _x=this.x;
                _y=this.y;
            }
            var delta = event.touch.getDelta();
            this.x += delta.x;
            this.y += delta.y;
            change_x=this.x-_x;
            change_y=this.y-_y;
            // console.log(change_x);
            // console.log(change_y);
        }, this.node);

        this.node.on(cc.Node.EventType.TOUCH_END, function () {
            var dis_x=60;
            var dis_y=56.667;
            this.opacity = 255;
            var check_x=Math.round(change_x/dis_x);
            var check_y=Math.round(change_y/dis_y);

            //出框检查
            if(self.loc_i+check_y>9||self.loc_i+check_y<0||self.loc_j+check_x>8||self.loc_j+check_x<0){
                this.x=_x;
                this.y=_y;
                check_x=0;
                check_y=0;
            }
            //走法
            else{
                if(check_y==1&&check_x==0){
                    this.x=_x+check_x*dis_x;
                    this.y=_y+check_y*dis_y;
                }
                else if((check_x==1||check_x==-1)&&check_y==0&&self.crossriver==true){
                    this.x=_x+check_x*dis_x;
                    this.y=_y+check_y*dis_y;
                }
                else{
                    this.x=_x;
                    this.y=_y;
                    check_x=0;
                    check_y=0;
                }
                self.loc_i+=check_y;
                self.loc_j+=check_x;
            }
            
            flag=0;//flag类外声明，用来判定，保存
            var chessPos = this.getPosition();
            //console.log(chessPos.x);
            
            if(self.loc_i>4) self.crossriver=true;//过河属性
            // console.log(self.loc_i);
        }, this.node);
        
    },

下次说一说吃子吧~