游戏开发：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）进入室内，场景切换