游戏开发：Html5版宝可梦 Pokémon 游戏制作与设计思路分享（二）地图编辑器

经过不懈的努力，终于迎来了更新，还会继续更新后续内容。

可能会加一些魔改的功能和玩法……^ ^ 大家可以一起讨论有趣思路

更新已完成的功能：

1、地图编辑器

2、角色移动碰撞检测

.
新实现的功能和大家分享制作的思路及源码
.

下载地址

分享下主游戏运行地址:
http://h5demo.yyfuncdn.com/res/gameDemo/Pokemon2/game.html
地图编辑器地址:
http://h5demo.yyfuncdn.com/res/gameDemo/Pokemon2/mapEditor.html
.
= 手机扫码运行看效果 =

项目下载地址：
http://h5demo.yyfuncdn.com/res/gameDemo/Pokemon2.zip

.

制作思路及主要代码

一、地图编辑器

地图编辑器共分成两大部分，第一部分为编辑场景、第二部分为生成场景

编辑场景部分：首先是在游戏场景中生成了44×44个小方块按顺序排列，把场景模拟成多个小区域，并创建了一个44×44的二维数组用于存储每个小方块所在区域的放置状态

拖拽物体放入场景后，修改被物体所占据的小方块的放置状态为当前物体的序号

下面是地图放置的相关代码，在放下之前进行的相关计算：

app.stage.on("mouseup",function(event){//判断鼠标抬起时，被选取物体的放置情况
    if(dx==null)return;
    if(dx.view.x < 0 ||dx.view.x > 1980 || dx.view.y < 0 || dx.view.y > 1980){//如果不在游戏图片区域内则取消放置
        app.stage.removeChild(dx.view);
        dx = null;
        return;
    }
    var arrx = Math.round((dx.view.x+Barrier_data[dx.id].width/2)/45);
    var arry = Math.round((dx.view.y+Barrier_data[dx.id].height/2)/45);
    dx.view.anchor.set(1,1);
    dx.view.x = arrx*45;
    dx.view.y = arry*45;
    bg.addChild(dx.view);
    if(fillMap(arrx-1,arry-1,Barrier_data[dx.id].scopex,Barrier_data[dx.id].scopey,dx.id) == false){//如果当前区域已放置物体则取消放置
        bg.removeChild(dx.view);
        dx = null;
        console.log("no");
        return;
    }
    //成功放置
    console.log("yes");
    placeObject.push(dx);
    updateRoleCengIndex(placeObject);
    dx = null;
})

生成场景部分：生成场景方法与编辑场景类似，检查放置状态数组中的放置状态，当查找到有某物体序号时根据序号在当前位置生成物体

下面为生成地图的方法代码：

function addbarrier(obj,barrierObj){//添加物体
        var arr = [];
        for(var i = 0;i < barrierData.length;i++){
            arr.push([]);
            for(var k = 0;k < barrierData[i].length;k++){
                arr[i].push([]);
                arr[i][k] = null;
            }    
        }
        //利用 barrierData 数组数据添加物体对象
        for(var i = 0;i < barrierData.length;i++){
            for(var k = 0;k < barrierData[i].length;k++){
                if(arr[i][k]!=null || barrierData[i][k]=="")continue;
                var id = barrierData[i][k];
                fillMap(i,k,Barrier_data[id].scopex,Barrier_data[id].scopey,id,arr);
                var barrier = new obj("src1/"+Barrier_data[id].url,self.view);
                barrier.view.x = i*45+Barrier_data[id].width/2+Barrier_data[id].fakex;
                barrier.view.y = k*45+Barrier_data[id].height+Barrier_data[id].fakey;
                barrierObj.push(barrier);
            }    
        }
        return arr;
    }

二、角色碰撞检测

当角色移动时记录移动前的位置，移动后检查角色所在的位置属于哪个小方块的区域，并在数组中检查这个区域是否有物体存在，如果有物体存在则回到移动前的位置。

角色对象补充了碰撞方法：

function Role(parent){//主角对象
    var self = this;
    this.direction = "S";
    this.player = new Animation();
    this.player.init(action_data,this.direction);
    this.view = this.player.sprite;
    parent.addChild(this.view);
    this.view.anchor.set(0.5,1);
    this.moveState = false;
    this.initPos = function(x,y){//初始化角色位置
        self.view.x = x;
        self.view.y = y;
    }

    function update(){//人物动画
        if(self.moveState){
            self.player.action(self.direction);
        }else{
            self.player.stand(self.direction);
        }
    }

    function movingRange(){//移动范围不能超过背景
        if(self.view.x < self.view.width/2){//判断角色位于窗口左边界时
            self.view.x = self.view.width/2;//让角色位置无法越过窗口左边界
        }else if(self.view.x > (1980-self.view.width/2)){//判断角色位置位于窗口右边界时
            self.view.x = (1980-self.view.width/2);//让角色位置无法越过窗口右边界
        }
        if(self.view.y < 45){//判断角色位于窗口上边界时
            self.view.y = 45;//让角色位置无法越过窗口上边界
        }else if(self.view.y > 1980){//判断角色位置位于窗口下边界时
            self.view.y = 1980;//让角色位置无法越过窗口下边界
        }
    }

    function collide(barrierArr){//碰撞方法
        var y = Math.ceil(self.view.y/45)-1;
        var x = Math.ceil(self.view.x/45)-1;
        if(barrierArr[x][y] != null){
            return true;
        }
        x = Math.ceil((self.view.x-17)/45)-1;
        if(barrierArr[x][y] != null){
            return true;
        }
        x = Math.ceil((self.view.x+17)/45)-1;
        if(barrierArr[x][y] != null){
            return true;
        }
    }

    this.move = function(obj,collideArr){//角色移动方法
        update();
        var speed = obj.getSpeed();
        if(speed.x == 0 && speed.y == 0){
            self.moveState = false;
            if(self.direction == "a")self.direction = "A";
            if(self.direction == "d")self.direction = "D";
            if(self.direction == "w")self.direction = "W";
            if(self.direction == "s")self.direction = "S";
        }
        var pos = {x:self.view.x,y:self.view.y};
        self.view.x += speed.x;
        self.view.y += speed.y;
        movingRange();
        if(collide(collideArr)){
            self.view.x = pos.x;
            self.view.y = pos.y;
        }
    }
}

接下来准备做
1）进入室内，场景切换