游戏开发：Html5版宝可梦 Pokémon 游戏制作与设计思路分享（一）摇杆控制角色移动

最新推荐文章于 2023-05-12 22:14:57 发布

鱿鱼酱紫

最新推荐文章于 2023-05-12 22:14:57 发布

阅读量3.6k

点赞数 6

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

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

版权

本文分享了使用Html5和JavaScript开发宝可梦风格游戏的过程，包括虚拟摇杆控制器的实现，角色移动及动画，屏幕跟随功能的详细思路与代码。已完成的功能有虚拟摇杆、角色移动和场景跟随。游戏下载和运行地址已提供，作者计划实现地图编辑器和角色碰撞功能，并期待与读者探讨创新玩法。

摘要由CSDN通过智能技术生成

近期准备开个大坑，制作一款宝可梦（口袋妖怪）游戏。接下来一段时间持续制作大部分功能。
在这里插入图片描述
可能会加一些魔改的功能和玩法……^ ^ 大家一起讨论有趣思路吧

目前已完成的功能：

1、虚拟摇杆控制器
2、角色移动
3、角色场景跟随

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

下载地址

分享下运行地址:
http://h5demo.yyfuncdn.com/res/gameDemo/Pokemon/game.html

.
= 手机扫码运行看效果 =
在这里插入图片描述

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

浏览器打开 game.html 文件即可运行
.

制作思路及主要代码

一、游戏地图

找一张背景图片，利用地图素材拼接的一张 1980×1980 像素图片作为游戏的场景。（后面会做个地图编辑器）
在这里插入图片描述

二、虚拟控制器

在游戏中添加触摸屏控制器，用来控制角色移动，虚拟摇杆控制器是由两个圆形图片组成。
在这里插入图片描述

通过计算控制器小圆与大圆中心点的位置，计算得出移动方向。
在这里插入图片描述

因为角色只能四方向移动，只需要先判断按钮据原点的 X 轴与 Y 轴绝对值的最大值，再判断最大值为正值或负值即可得出角色的移动方向。

控制器完整代码：

//虚拟控制器
function Fsvjoy(parent){
   
    var self = this;
    var rockerbg = new PIXI.Graphics();//绘制摇杆背景
    rockerbg.lineStyle(0);
    rockerbg.beginFill(0x000000, 0.3);
    var radius = 0;
    if(phoneWidth > phoneHeight)radius = phoneWidth/10;
    else radius = phoneHeight/10;
    rockerbg.drawCircle(0,0,radius);
    rockerbg.endFill();
    parent.addChild(rockerbg);
    var rocker = new PIXI.Graphics();//绘制摇杆
    rocker.lineStyle(0);
    rocker.beginFill(0xf0f0f0,0.7);
    rocker.drawCircle(0,0,rockerbg.height/8);
    rocker.endFill();
    rockerbg.addChild(rocker);
    rockerbg.visible = false;

    var obj = null;
    this.setobj = function(role){
   
        obj = role;
    }
    var speed = {
   x:0,y:0};

    app.stage.interactive = true;//开启舞台交互
    app.stage.on("pointerdown",function(event){
   //在鼠标按下位置显示控制器
        var pos = event.data.getLocalPosition(app.stage);
        rockerbg.x = pos.x;
        rockerbg.y = pos.y;
        rockerbg