当前位置：首页 > news >正文

晚上网站推荐靠谱的2021简单网页制作模板

news 2025/8/7 9:46:17

晚上网站推荐靠谱的2021,简单网页制作模板,网站产品动效怎么做,网站在线制作生成前言上文中我们实现了炸弹人与墙的碰撞检测，以及设置移动步长来解决发现的问题。本文会加入1个AI敌人，敌人使用A*算法追踪炸弹人。本文目的加入敌人，追踪炸弹人本文主要内容开发策略加入敌人实现寻路算法重构本文最终领域模型高层划分演…

前言

上文中我们实现了炸弹人与墙的碰撞检测，以及设置移动步长来解决发现的问题。本文会加入1个AI敌人，敌人使用A*算法追踪炸弹人。

本文目的

加入敌人，追踪炸弹人

本文主要内容

开发策略
加入敌人
实现寻路算法
重构
本文最终领域模型
高层划分
演示
本文参考资料

回顾上文更新后的领域模型

查看大图

开发策略

首先实现“加入敌人”功能。通过参考“炸弹人游戏开发系列（4）：炸弹人显示与移动“中的实现，可以初步分析出需要加入敌人图片、敌人帧数据和精灵数据、敌人精灵类EnemySprite、敌人层EnemyLayer和敌人层管理类EnemyLayerManager。

然后实现“追踪炸弹人”功能。需要新建一个算法类FindPath，负责使用A*算法计算并返回路径数据。

敌人精灵类与算法类的交互关系：

并行开发

可以并行开发“加入敌人”和“追踪炸弹人”。

先定义一个FindPath类的的接口，指定findPath方法输入参数和返回参数的格式。

实现“加入敌人”功能时，可以按照接口指定的格式使用假的路径数据来测试EnemySprite类；实现“追踪炸弹人”功能时，按照接口指定格式使用假的坐标数据来测试FindPath类。

在EnemySprit和FindPath都实现后，再集成在一起测试。因为两者接口一致，因此集成时不会有什么困难。

加入敌人

扩大地图

现在地图大小为4*4，太小了。

加入一个敌人后：

可玩性太低
很快游戏就结束了；玩家操作炸弹人躲避敌人的空间太小了。
不方便演示和测试游戏
由于游戏很快就结束，因此不方便演示和测试游戏。

因此，将地图扩大为20*20。

要实现这个功能，只需要修改MapData和TerrainData即可。

加入敌人图片和数据

首先加入敌人的精灵图片

然后加入敌人帧动画数据类

(function () {var getEnemyFrames = (function () {//一个动作在图片中的宽度var width = bomberConfig.enemy.WIDTH,//一个动作在图片中的高度height = bomberConfig.enemy.HEIGHT,//一个动作的偏移量offset = {x: bomberConfig.enemy.offset.X,y: bomberConfig.enemy.offset.Y},//一个动作横向截取的长度sw = bomberConfig.enemy.SW,//一个动作纵向截取的长度sh = bomberConfig.enemy.SH,//一个动作图片在canvas中的宽度imgWidth = bomberConfig.enemy.IMGWIDTH,//一个动作图片在canvas中的高度imgHeight = bomberConfig.enemy.IMGHEIGHT;//帧数据var frames = function () {return {//向右站立
                stand_right: {img: window.imgLoader.get("enemy"),frames: [{ x: offset.x, y: offset.y + 2 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 }]},//向左站立
                stand_left: {img: window.imgLoader.get("enemy"),frames: [{ x: offset.x, y: offset.y + height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 }]},//向上站立
                stand_up: {img: window.imgLoader.get("enemy"),frames: [{ x: offset.x, y: offset.y + 3 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 }]},//向下站立
                stand_down: {img: window.imgLoader.get("enemy"),frames: [{ x: offset.x, y: offset.y, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 }]},//向上走
                walk_up: {img: window.imgLoader.get("enemy"),frames: [{ x: offset.x, y: offset.y + 3 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },{ x: offset.x + width, y: offset.y + 3 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },{ x: offset.x + 2 * width, y: offset.y + 3 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },{ x: offset.x + 3 * width, y: offset.y + 3 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 }]},//向下走
                walk_down: {img: window.imgLoader.get("enemy"),frames: [{ x: offset.x, y: offset.y, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },{ x: offset.x + width, y: offset.y, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },{ x: offset.x + 2 * width, y: offset.y, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },{ x: offset.x + 3 * width, y: offset.y, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 }]},//向右走
                walk_right: {img: window.imgLoader.get("enemy"),frames: [{ x: offset.x, y: offset.y + 2 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },{ x: offset.x + width, y: offset.y + 2 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },{ x: offset.x + 2 * width, y: offset.y + 2 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },{ x: offset.x + 3 * width, y: offset.y + 2 * height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 }]},//向左走
                walk_left: {img: window.imgLoader.get("enemy"),frames: [{ x: offset.x, y: offset.y + height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },{ x: offset.x + width, y: offset.y + height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },{ x: offset.x + 2 * width, y: offset.y + height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 },{ x: offset.x + 3 * width, y: offset.y + height, width: sw, height: sh, imgWidth: imgWidth, imgHeight: imgHeight, duration: 100 }]}}}return function (animName) {return frames()[animName];};}());window.getEnemyFrames = getEnemyFrames;
}());

View Code

然后加入敌人精灵类数据

(function () {var getSpriteData = (function () {var data = function(){return {
...//敌人精灵类
                enemy: {//初始坐标x: bomberConfig.WIDTH * 10,//x: 0,y: bomberConfig.HEIGHT * 3,//定义sprite走路速度的绝对值
                    walkSpeed: bomberConfig.enemy.speed.NORMAL,//速度speedX: 1,speedY: 1,//注意坐标起始点为图片左上点！
minX: 0,maxX: bomberConfig.canvas.WIDTH - bomberConfig.player.IMGWIDTH,//maxX: 500,minY: 0,maxY: bomberConfig.canvas.HEIGHT - bomberConfig.player.IMGHEIGHT,defaultAnimId: "stand_left",anims: {"stand_right": new Animation(getEnemyFrames("stand_right")),"stand_left": new Animation(getEnemyFrames("stand_left")),"stand_down": new Animation(getEnemyFrames("stand_down")),"stand_up": new Animation(getEnemyFrames("stand_up")),"walk_up": new Animation(getEnemyFrames("walk_up")),"walk_down": new Animation(getEnemyFrames("walk_down")),"walk_right": new Animation(getEnemyFrames("walk_right")),"walk_left": new Animation(getEnemyFrames("walk_left"))}}}};return function (spriteName) {return data()[spriteName];};}());window.getSpriteData = getSpriteData;
}());

加入EnemySprite类

增加敌人精灵类。

创建假的A*算法类FindPath类

创建返回假数据的FindPath类，用于测试EnemySprite类。

增加敌人精灵类工厂

SpriteFactory新增工厂方法createEnemy，用于创建EnemySprite实例。

SpriteFactory

        createEnemy: function () {return new EnemySprite(getSpriteData("enemy"));}

新增EnemyLayer

增加敌人画布，该画布于地图画布之上，与玩家画布的zIndex相同。同时增加对应的敌人层类EnemyLayer，它的集合元素为EnemySprite类的实例。

EnemyLayer

(function () {var EnemyLayer = YYC.Class(Layer, {Init: function (deltaTime) {this.___deltaTime = deltaTime;},Private: {___deltaTime: 0,___iterator: function (handler) {var args = Array.prototype.slice.call(arguments, 1),nextElement = null;while (this.hasNext()) {nextElement = this.next();nextElement[handler].apply(nextElement, args);  //要指向nextElement
                }this.resetCursor();},___update: function (deltaTime) {this.___iterator("update", deltaTime);},__setDir: function () {this.___iterator("setDir");},___move: function (deltaTime) {this.___iterator("move", deltaTime);}},Public: {setCanvas: function () {this.P__canvas = document.getElementById("enemyLayerCanvas");
$("#enemyLayerCanvas").css({"position": "absolute","top": bomberConfig.canvas.TOP,"left": bomberConfig.canvas.LEFT,"border": "1px solid black","z-index": 1    //z-index与playerLayer相同
                });},draw: function (context) {this.___iterator("draw", context);},clear: function (context) {this.___iterator("clear", context);},render: function () {this.__setDir();this.___move(this.___deltaTime);//判断__state是否为change状态，如果是则调用canvas绘制精灵。if (this.P__isChange()) {this.clear(this.P__context);this.___update(this.___deltaTime);this.draw(this.P__context);this.P__setStateNormal();}}}});window.EnemyLayer = EnemyLayer;
}());

增加敌人层类工厂

LayerFactory新增工厂方法createEnemy，用于创建EnemyLayer实例

LayerFactory

        createEnemy: function (deltaTime) {return new EnemyLayer(deltaTime);}

新增EnemyLayerManager

增加EnemyLayer的管理类EnemyLayerManager

var EnemyLayerManager = YYC.Class(LayerManager, {Init: function (layer) {this.base(layer);},Public: {createElement: function () {var element = [],enemy = spriteFactory.createEnemy();enemy.init();element.push(enemy);return element;},change: function () {this.layer.change();}}
});

领域模型

实现寻路算法

游戏中的敌人采用A*算法寻路。参考资料：A星算法

敌人寻路模式

游戏开始时，敌人以它的当前位置为起始点，炸弹人的位置为终点寻路。如果敌人到达终点后，没有碰撞到炸弹人，则再一次以它的当前位置为起始点，炸弹人的位置为终点寻路。

敌人寻路流程

实现FindPath类

领域模型

重构状态模式Context类

重构前：

(function () {var Context = YYC.Class({Init: function (sprite) {this.sprite = sprite;},
...Static: {walkLeftState: new WalkLeftState(),walkRightState: new WalkRightState(),walkUpState: new WalkUpState(),walkDownState: new WalkDownState(),standLeftState: new StandLeftState(),standRightState: new StandRightState(),standUpState: new StandUpState(),standDownState: new StandDownState()}});window.Context = Context;
}());

删除Context的静态实例，改为在构造函数中创建具体状态类实例

原因：

因为EnemySprite和PlayerSprite都要使用Context的实例。如果为静态实例的话，EnemySprite中的Context类实例与PlayerSprite中的Context类实例会共享静态实例（具体状态类实例）！会造成互相干扰！

重构后：

(function () {var Context = YYC.Class({Init: function (sprite) {this.sprite = sprite;this.walkLeftState = new WalkLeftState();this.walkRightState = new WalkRightState();this.walkUpState = new WalkUpState();this.walkDownState = new WalkDownState();this.standLeftState = new StandLeftState();this.standRightState = new StandRightState();this.standUpState = new StandUpState();this.standDownState = new StandDownState();},
...Static: {}});window.Context = Context;
}());

提出基类Sprite

为什么要提出

EnemySprite与PlayerSpite有很多相同的代码
从概念上来说，玩家精灵类与敌人精灵类都属于精灵类的概念

因此，提出EnemySprite、PlayerSprite基类Sprite。

修改碰撞检测

Sprite 增加getCollideRect获得碰撞面积。EnemySprite增加collideWidthOther。

领域模型

增加CharacterLayer类

PlayerLayer、EnemyLayer有相似的模式
从语义上来看，PlayerLayer、EnemyLayer都是属于”人物“的语义

因此，提出CharacterLayer父类

领域模型

提出父类MoveSprite

PlayerSprite、EnemySprite有相似的模式
从语义上来看，PlayerSprite、EnemySprite都是能够移动的精灵类

因此，提出父类MoveSprite

为什么不把PlayerSprite、EnemySprite的相似的模式直接提到Sprite中？

抽象层次不同

因为我提取的语义是“移动的精灵类”，而Sprite的语义是“精灵类”，属于更抽象的概念

为什么不叫CharacterSprite？

因为关注的语义不同。

在提取CharacterLayer类时，关注的是PlayerLayer、EnemyLayer中“人物”语义；而在提取MoveSprite类时，关注的是PlayerSprite、EnemySprite中”移动“语义。因此，凡是属于”人物“这个语义的Layer类，都可以考虑继承于CharacterLayer；而凡是有”移动“这个特点的Sprite类，都可以考虑继承于MoveSprite。

领域模型

将Bitmap注入到Sprite中

反思Sprite类，发现在getCollideRect方法中，使用了图片的宽度和高度：

          getCollideRect: function () {if (this.currentAnim) {var f = this.currentAnim.getCurrentFrame();return {x1: this.x,y1: this.y,x2: this.x + f.imgWidth,y2: this.y + f.imgHeight}}},

此处图片的宽度和高度是从FrameData中读取的：

    var getFrames = (function () {
...imgWidth = bomberConfig.player.IMGWIDTH,imgHeight = bomberConfig.player.IMGHEIGHT;
...

图片的宽度和高度属于图片信息，应该都放到Bitmap类中！

在创建精灵实例时，将图片的宽度和高度包装到Bitmap中，并注入到精灵类中:

SpriteFactory

(function () {var spriteFactory = {createPlayer: function () {return new PlayerSprite(getSpriteData("player"), bitmapFactory.createBitmap({ img: window.imgLoader.get("player"), width: bomberConfig.player.IMGWIDTH, height: bomberConfig.player.IMGHEIGHT }));},createEnemy: function () {return new EnemySprite(getSpriteData("enemy"), bitmapFactory.createBitmap({ img: window.imgLoader.get("enemy"), width: bomberConfig.player.IMGWIDTH, height: bomberConfig.player.IMGHEIGHT }));}}window.spriteFactory = spriteFactory;
}());

然后在getCollideRect方法中改为读取Bitmap实例引用的宽度和高度：

Sprite

Init: function (data, bitmap) {this.bitmap = bitmap;
...
},
...
bitmap: null,
...
getCollideRect: function () {return {x1: this.x,y1: this.y,x2: this.x + this.bitmap.width,y2: this.y + this.bitmap.height}
},

领域模型

删除data -> frames.js中的imgWidth、imgHeight

现在FrameData中的imgWidth、imgHeight是多余的了，应该将其删除。

增加MapElementSprite

增加地图元素精灵类，它拥有图片Bitmap的实例。其中，地图的一个单元格就是一个地图元素精灵类。

为什么增加？

1、可以在创建MapLayer元素时，元素由bitmap改为精灵类，这样x、y属性就可以从bitmap移到精灵类中了.
2、精灵类包含动画，方便后期增加动态地图。

它的父类为Sprite还是MoveSprite？

因为MapElementSprite不属于“移动”语义，且它与MoveSprite没有相同的模式，所以它应该继承于Sprite。

领域模型

重构Bitmap

删除Bitmap的x、y属性。

现在Bitmap的x、y属性用于保存地图图片的坐标。现在坐标保存在地图精灵类中了，故Bitmap中多余的x、y属性。

重构LayerManager

LayerManager本来的职责为“负责层的逻辑”，但是我认为LayerManager的职责应该为“负责层的统一操作”，它应该为一个键-值集合类，它的元素应该为Layer的实例。

因此对LayerManager进行重构：

将change的判断移到具体的Layer中

由Layer类应该负责自己状态的维护。

将createElement放到Game中

创建层内元素createElement这个职责应该放到调用LayerManager的客户端，即Game类中。在Game中还要负责创建LayerManager、创建Layer。

增加Hash

增加一个Hash类，它实现键-值集合的通用操作，然后让LayerManager继承于Hash，使之成为集合类。

为什么使用Hash类，而不是使用Collection类（数组集合类）

功能上分析：

因为LayerManager集合的元素为Layer实例，而每一个层的实例都是唯一的，即如PlayerLayer实例只有一个，不会有二个PlayerLayer实例。因此，使用Hash结构，可以通过key获得LayerManager集合中的每个元素。

Hash的优势：

Hash结构不需要知道LayerManager集合装入Layer实例的顺序，通过key值就可以唯一获得元素；而Collection结构（数组结构）需要知道装入顺序。

领域模型

新增包

算法包
FindPath
精灵抽象包
Sprite
哈希集合包
Hash

删除包

层管理实现包
经过本文重构后，去掉了PlayerLayerManager等子类，只保留了LayerManager类。因此去掉层管理实现包。

层、包

重构

将集合包重命名为数组集合包

“层”这个层级的集合包的命名太广泛了，应该具体化为数组集合包，这样才不至于与哈希集合包混淆。

将哈希集合包和数组集合包合并为集合包

哈希集合包与数组集合包都属于集合，因此应该合并为集合包，然后将集合包放到辅助逻辑层。

提出抽象包

　　分析

封闭性：

层抽象包、精灵抽象包位于同一个层面（抽象层面），会对同一种性质的变化共同封闭。

如精灵抽象类（精灵抽象包）发生变化，可能会引起层抽象类的变化。

重用性：

两者相互关联。

两者为抽象类，具有通用性。

可以一起被重用。

　　结论

因此，将层抽象包、精灵抽象包合并成抽象包，并放到辅助逻辑层。

将集合包也合并到抽象包中

抽象包与集合包有依赖关系，但实际上只是抽象包中的层抽象类与集合包有依赖，精灵抽象类与集合包没有管理，因此违反了共用重用原则CRP。

考虑到集合包也具有的通用性，将其也合并到抽象包中：

提出人物包、地图包

层和精灵都包含人物（精灵中为移动）、地图的概念，人物层与移动精灵、地图层与地图元素精灵联系紧密。

　　分析

封闭性：

层实现包与精灵实现包违反了共同封闭原则CCP。如地图发生变化时，只会引起地图层和地图元素精灵的变化，而不会引起人物层和移动精灵的变化。

重用性：

层实现包与精灵实现包中，人物层与地图层、移动精灵与地图元素精灵没有关联，因此违反了共同重用原则CRP。

因此，分离出人物包、地图包，并将层、精灵这两个层合并为实现层：

　　状态类放到哪

状态类与属于人物包的玩家精灵类和敌人精灵类紧密关联，因此应该放到人物包中。

　　MoveSprite、CharacterLayer应不应该放到抽象包中

MoveSprite、CharacterLayer是抽象类，但是它们与具体的人物实现密切相关（因为它们是从人物实现类PlayerSprite和EnemySprite、PlayerLayer和EnemyLayer提取共同模式而形成的父类）。因此，它们应该放到人物实现包中。

本文最终层、包

对应领域模型

辅助操作层
- 控件包
  PreLoadImg
- 配置包
  Config
用户交互层
- 入口包
  Main
业务逻辑层
- 辅助逻辑
  - 工厂包
    BitmapFactory、LayerFactory、SpriteFactory
  - 事件管理包
    KeyState、KeyEventManager
  - 抽象包
    Layer、Sprite、Hash、Collection
- 游戏主逻辑
  - 主逻辑包
    Game
- 层管理
  - 层管理包
    LayerManager
- 实现
  - 人物实现包
    PlayerLayer、MoveSprite、PlayerSprite、EnemySprite、CharacterLayer、PlayerLayer、EnemyLayer、Context、PlayerState、WalkState、StandState、WalkState_X、WalkState_Y、StandLeftState、StandRightState、StandUpState、StandDownState、WalkLeftState、WalkRightState、WalkUpState、WalkDownState
  - 地图实现包
    MapLayer、MapElementSprite
  - 算法包
    FindPath
  - 动画包
    Animation、GetSpriteData、SpriteData、GetFrames、FrameData
数据操作层
- 地图数据操作包
  MapDataOperate
- 路径数据操作包
  GetPath
- 图片数据操作包
  Bitmap
数据层
- 地图包
  MapData、TerrainData
- 图片路径包
  ImgPathData