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

最新推荐文章于 2025-03-30 11:30:02 发布

鱿鱼酱紫

最新推荐文章于 2025-03-30 11:30:02 发布

阅读量2.6k

点赞数 4

分类专栏：游戏开发 html5 文章标签：游戏 java js 游戏开发

本文链接：https://blog.csdn.net/dayouyu001/article/details/116019462

版权

博客分享了Html5版宝可梦游戏的制作进展，重点介绍了地图编辑器的实现，包括编辑场景和生成场景的细节，以及角色碰撞检测的逻辑。作者提供了游戏和地图编辑器的运行地址以及项目下载链接，供读者体验和研究。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

更新已完成的功能：

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