付款网站源码,新工商名录企业应用平台,网站源码带数据,上海网站的优化公司哪家好文章目录 架构设计#xff1a;一图胜千言绪论不能正常加载动图设计的思路渲染画布开发感想角色抽象为矩形ctx 是 canvas 的对象键盘控制角色Set键盘事件流程图在 canvas 里面使用 gif 图片继承存储动作ReferenceError: gif is not definedTypeError: Cannot read properties o… 文章目录 架构设计一图胜千言绪论不能正常加载动图设计的思路渲染画布开发感想角色抽象为矩形ctx 是 canvas 的对象键盘控制角色Set键盘事件流程图在 canvas 里面使用 gif 图片继承存储动作ReferenceError: gif is not definedTypeError: Cannot read properties of undefined (reading length)显示贴图从矩形抽象开始拳皇角色矩形抽象视频演示开发小技巧gif 工具包创建一个具体的游戏角色关于注释渲染矩形放大调整帧率竖直方向偏移量使用后退的动画实现攻击的判断修改按键频闪使两名玩家对称修改跳跃的速率修改背景图片结语 架构设计一图胜千言 #mermaid-svg-74aIEFhKIW5cAD0S {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-74aIEFhKIW5cAD0S .error-icon{fill:#552222;}#mermaid-svg-74aIEFhKIW5cAD0S .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-74aIEFhKIW5cAD0S .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-74aIEFhKIW5cAD0S .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-74aIEFhKIW5cAD0S .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-74aIEFhKIW5cAD0S .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-74aIEFhKIW5cAD0S .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-74aIEFhKIW5cAD0S .marker{fill:#333333;stroke:#333333;}#mermaid-svg-74aIEFhKIW5cAD0S .marker.cross{stroke:#333333;}#mermaid-svg-74aIEFhKIW5cAD0S svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-74aIEFhKIW5cAD0S .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-74aIEFhKIW5cAD0S .cluster-label text{fill:#333;}#mermaid-svg-74aIEFhKIW5cAD0S .cluster-label span{color:#333;}#mermaid-svg-74aIEFhKIW5cAD0S .label text,#mermaid-svg-74aIEFhKIW5cAD0S span{fill:#333;color:#333;}#mermaid-svg-74aIEFhKIW5cAD0S .node rect,#mermaid-svg-74aIEFhKIW5cAD0S .node circle,#mermaid-svg-74aIEFhKIW5cAD0S .node ellipse,#mermaid-svg-74aIEFhKIW5cAD0S .node polygon,#mermaid-svg-74aIEFhKIW5cAD0S .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-74aIEFhKIW5cAD0S .node .label{text-align:center;}#mermaid-svg-74aIEFhKIW5cAD0S .node.clickable{cursor:pointer;}#mermaid-svg-74aIEFhKIW5cAD0S .arrowheadPath{fill:#333333;}#mermaid-svg-74aIEFhKIW5cAD0S .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-74aIEFhKIW5cAD0S .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-74aIEFhKIW5cAD0S .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-74aIEFhKIW5cAD0S .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-74aIEFhKIW5cAD0S .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-74aIEFhKIW5cAD0S .cluster text{fill:#333;}#mermaid-svg-74aIEFhKIW5cAD0S .cluster span{color:#333;}#mermaid-svg-74aIEFhKIW5cAD0S div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-74aIEFhKIW5cAD0S :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 拳皇 地图 KOF 角色 键盘操作 gif 绪论 『一个人的自身越是丰富就越难以忍受世俗常规的安排。』—— 叔本华「人生的智慧」 不能正常加载动图
用注释的最后一行代码不能正常加载图片
#kof {/* 前面是用 id 标记的 div 所以这里选择出来 */width: 1280px;height: 720px;background-image: url(/static/images/background/0.gif);/* background-image: url(static/images/background/0.gif); */
}调整了一下图片的大小
设计的思路
需要有三个对象背景左边玩家右边玩家这三个对象都需要每秒钟刷新 60 次实现动态效果
我们的游戏需要读取键盘输入那么我们需要让我们的 canvas(画布) 能够聚焦
渲染画布
我们需要在每一帧结束的时候把该帧清空这样下一帧在展示的时候才不会出现重影的现象但是清空的时间太快了人眼察觉不到所以我们把画布渲染为黑色验证我们是不是可以正确渲染和清空 渲染的函数如下
render() {//表示清空画布的内容也就是清空一帧的内容//clearRect表示的是清空矩形//参数是左上角的坐标矩形的宽矩形的高//this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);//console.log(this.$canvas.width());//把填充的颜色设置为黑色this.ctx.fillStyle black;//填充矩形参数是左上角的坐标宽度高度this.ctx.fillRect(0, 0, this.$canvas.width(), this.$canvas.height());}开发感想
笔者之前做 django 项目因为跟着教程做出现了一些问题没有很好的解决现在做这个项目因为花了很多时间把这个里面的逻辑搞得非常清楚所以开发的时候非常开心因为自己可能确实能够理解这里面每一行代码的具体含义。而且敲击键盘的时候给自己带来了一些之前没有怎么体会过的成就感
角色抽象为矩形
我们首先把底层的逻辑实现好等逻辑实现完成之后再去考虑角色的美术优化还有一些动态的效果
ctx 是 canvas 的对象
笔者比较疑惑canvas 是画布ctx 表示的是画布的内容这两者之间的关系是什么
canvas 和 context 的关系 画布和画笔的关系
这个讲的非常清楚画布相当于背景画笔相当于画布上面的图案以这个项目为例画布就是背景图片画笔绘制的内容就是两个角色因为角色要不停地在画布上面移动表示的意思是需要不停地在画布上绘制图片
键盘控制角色
//需要用键盘来操作这个游戏//每一个类都需要暴露出来
export class Controller {//需要控制的是角色所以需要先把画布传进来constructor($canvas) {//需要实现的是键盘控制当前的角色按下一个键就会产生相应的反应//把画布存下来this.$canvas $canvas;//下面是自己手动实现按键盘//Set是一个 js 的数据结构里面可以存任何数据类型的数据this.pressed_keys new Set();// 下面是调用初始函数this.start();}//只在开始的时候执行一次start() {//outer 表示的是这个 controller //我们在后面重新定义了一个函数这个函数会有一个新的 this//this 指向的是类的实例//这里主要是因为之后要用前面定义的这个实例let outer this;//keydown 表示的是键盘是不是被按住会连续触发//但是这个不是我们需要的效果我们需要的效果是按住就发生变化松开就结束变化//不需要连续触发这个事件this.$canvas.keydown(function (e) {//Set 添加元素是用 add()outer.pressed_keys.add(e.key);//输出调试一下console.log(e.key);});}
}我们可以看到控制台可以输出我们键盘按了什么键这说明可以准确的识别我们操作的是哪一个键位
Set
js 的 Set 里面不能有重复的元素就是集合的一个概念
add()添加元素
has()返回是否包含某个元素
size返回元素数量
delete()删除某个元素
clear()删除所有元素我们项目需要用到的是往集合里面添加一个键盘输入再从集合里面删除一个键盘输入实现的效果是按住某一个键立即生效松开某一个键立即失效
键盘事件
keydown某个键是否被按住事件会连续触发
event.code返回按的是哪个键
event.altKey、event.ctrlKey、event.shiftKey分别表示是否同时按下了alt、ctrl、shift键。
keyup某个按键是否被释放
keypress紧跟在keydown事件后触发只有按下字符键时触发。适用于判定用户输入的字符。流程图 #mermaid-svg-glhOT7Xyr4NeK28j {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-glhOT7Xyr4NeK28j .error-icon{fill:#552222;}#mermaid-svg-glhOT7Xyr4NeK28j .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-glhOT7Xyr4NeK28j .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-glhOT7Xyr4NeK28j .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-glhOT7Xyr4NeK28j .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-glhOT7Xyr4NeK28j .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-glhOT7Xyr4NeK28j .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-glhOT7Xyr4NeK28j .marker{fill:#333333;stroke:#333333;}#mermaid-svg-glhOT7Xyr4NeK28j .marker.cross{stroke:#333333;}#mermaid-svg-glhOT7Xyr4NeK28j svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-glhOT7Xyr4NeK28j .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-glhOT7Xyr4NeK28j .cluster-label text{fill:#333;}#mermaid-svg-glhOT7Xyr4NeK28j .cluster-label span{color:#333;}#mermaid-svg-glhOT7Xyr4NeK28j .label text,#mermaid-svg-glhOT7Xyr4NeK28j span{fill:#333;color:#333;}#mermaid-svg-glhOT7Xyr4NeK28j .node rect,#mermaid-svg-glhOT7Xyr4NeK28j .node circle,#mermaid-svg-glhOT7Xyr4NeK28j .node ellipse,#mermaid-svg-glhOT7Xyr4NeK28j .node polygon,#mermaid-svg-glhOT7Xyr4NeK28j .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-glhOT7Xyr4NeK28j .node .label{text-align:center;}#mermaid-svg-glhOT7Xyr4NeK28j .node.clickable{cursor:pointer;}#mermaid-svg-glhOT7Xyr4NeK28j .arrowheadPath{fill:#333333;}#mermaid-svg-glhOT7Xyr4NeK28j .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-glhOT7Xyr4NeK28j .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-glhOT7Xyr4NeK28j .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-glhOT7Xyr4NeK28j .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-glhOT7Xyr4NeK28j .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-glhOT7Xyr4NeK28j .cluster text{fill:#333;}#mermaid-svg-glhOT7Xyr4NeK28j .cluster span{color:#333;}#mermaid-svg-glhOT7Xyr4NeK28j div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-glhOT7Xyr4NeK28j :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 对象 地图 角色 主类 拳皇 键盘输入 我们在编辑文章的时候可以多添加一些图片增强文章的可读性
在 canvas 里面使用 gif 图片
学会把一个函数封装好给用户使用而不是把一些底层的东西让用户去使用这个非常关键就像是我们需要用一个结果去证明自己而不是用一个假努力的过程去欺骗自己欺骗别人最好用一个努力奋斗的过程取得的一个结果展示给别人看比如说辛辛苦苦练了几年的肌肉
假设我们写的项目大部分都是市面上已有的函数接口那么我们的项目没有什么创新点
我们这里就使用一个现有的函数接口帮助我们实现播放动图的功能
继承
class ColorPoint extends Point {constructor(x, y, color) {super(x, y); // 这里的super表示父类的构造函数this.color color;}toString() {return this.color super.toString(); // 调用父类的toString()}
}我们在设计一个角色的时候需要把抽象的矩形变成具体的游戏角色所以在设计这个角色的时候需要继承玩家这个类然后设计一些具体的东西机制其实都是一样的王者不断新出的英雄多个地图等等
存储动作
我们把动作存到一个 Map 里面保存的是键值对 #mermaid-svg-pqScUOyryZrHHS2A {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-pqScUOyryZrHHS2A .error-icon{fill:#552222;}#mermaid-svg-pqScUOyryZrHHS2A .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-pqScUOyryZrHHS2A .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-pqScUOyryZrHHS2A .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-pqScUOyryZrHHS2A .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-pqScUOyryZrHHS2A .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-pqScUOyryZrHHS2A .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-pqScUOyryZrHHS2A .marker{fill:#333333;stroke:#333333;}#mermaid-svg-pqScUOyryZrHHS2A .marker.cross{stroke:#333333;}#mermaid-svg-pqScUOyryZrHHS2A svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-pqScUOyryZrHHS2A .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-pqScUOyryZrHHS2A .cluster-label text{fill:#333;}#mermaid-svg-pqScUOyryZrHHS2A .cluster-label span{color:#333;}#mermaid-svg-pqScUOyryZrHHS2A .label text,#mermaid-svg-pqScUOyryZrHHS2A span{fill:#333;color:#333;}#mermaid-svg-pqScUOyryZrHHS2A .node rect,#mermaid-svg-pqScUOyryZrHHS2A .node circle,#mermaid-svg-pqScUOyryZrHHS2A .node ellipse,#mermaid-svg-pqScUOyryZrHHS2A .node polygon,#mermaid-svg-pqScUOyryZrHHS2A .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-pqScUOyryZrHHS2A .node .label{text-align:center;}#mermaid-svg-pqScUOyryZrHHS2A .node.clickable{cursor:pointer;}#mermaid-svg-pqScUOyryZrHHS2A .arrowheadPath{fill:#333333;}#mermaid-svg-pqScUOyryZrHHS2A .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-pqScUOyryZrHHS2A .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-pqScUOyryZrHHS2A .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-pqScUOyryZrHHS2A .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-pqScUOyryZrHHS2A .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-pqScUOyryZrHHS2A .cluster text{fill:#333;}#mermaid-svg-pqScUOyryZrHHS2A .cluster span{color:#333;}#mermaid-svg-pqScUOyryZrHHS2A div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-pqScUOyryZrHHS2A :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 动作 静止 往右 往左 跳跃 攻击 被攻击 被击败 ReferenceError: gif is not defined
其实在开发的时候我遇到了挺多问题忘记记录下来了
自己在使用 gif 的时候把 gif 放在了循环外面索引不到所以就报错了解决之后出现了更多的问题
TypeError: Cannot read properties of undefined (reading ‘length’)
obj.frame_cnt gif.frame.length;找到的原因是函数接口里面定义的是 frames 虽然是这种简单的拼写错误但是在开发项目的时候遇到这种问题也是非常无奈的要是找不出来项目就无法正常运行
显示贴图
现在控制台没有任何报错但是显示不了贴纸
笔者认为可能是引用的路径不是绝对路径的原因也就是不是从 / 开始引用的现在修改一下试试
把玩家和具体角色的引用路径都改为了绝对路径没有效果
没有任何问题但是出现不了贴纸这是为什么呢
怀疑是 gif 的接口函数没有调用好重新使用一遍接口函数
我在实现两个抽象矩形移动的时候是没有问题的到贴纸这一步出现的问题
找了挺久还是没有找到原因准备从正常移动那里开始看问题出在了哪里今天先睡觉明天和它战斗两个多小时的教程看了两天了还没有搞完
从矩形抽象开始
笔者把整个教程完整看了一遍现在从上一步卡住的地方开始做起
目前初步的构想是实现几个项目并且部署到拥有独立域名的网站上面方便展示并且绘制几张流程图梳理整个项目的逻辑 多动手多搜索 我们知道gif 是动图所以和帧有一定的关系我们在矩形抽象的时候和帧有关系的部分只有动画也有一定的关系我先把后面的代码都注释掉让我们的项目可以像之前一样移动矩形
并且现在不涉及到状态机与状态机有关的代码都可以注释掉
拳皇角色矩形抽象视频演示
视频演示
开发小技巧
因为自己是在 vscode 上面开发的之前研究了一下怎么通过 git 把项目代码 push 到云端可以 push 上去但是不是很流畅用 vim 会非常流畅的 push 上去但是没有代码自动补全没有自动补全写前端代码其实是非常难受的
所以我的技巧就是多写一点注释不删除代码只把需要删除的代码注释掉及时保存代码
gif 工具包
前面其实用了这个步骤但是现在需要重新操作一遍因为我不知道我到底是哪一块出现了问题debug 的时候试过一次了没有解决
这个第三方函数是直接复制过来的文件夹和文件名字都没有问题也就是说调用的路径不会有问题
创建一个具体的游戏角色
继承 player 这个基类写在 player 文件夹下
关于注释
因为自己写的注释比较多会让人看不清楚代码结构所以可以多画一些图片来梳理代码结构 #mermaid-svg-42njgd7wOru3gurn {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-42njgd7wOru3gurn .error-icon{fill:#552222;}#mermaid-svg-42njgd7wOru3gurn .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-42njgd7wOru3gurn .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-42njgd7wOru3gurn .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-42njgd7wOru3gurn .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-42njgd7wOru3gurn .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-42njgd7wOru3gurn .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-42njgd7wOru3gurn .marker{fill:#333333;stroke:#333333;}#mermaid-svg-42njgd7wOru3gurn .marker.cross{stroke:#333333;}#mermaid-svg-42njgd7wOru3gurn svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-42njgd7wOru3gurn .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-42njgd7wOru3gurn .cluster-label text{fill:#333;}#mermaid-svg-42njgd7wOru3gurn .cluster-label span{color:#333;}#mermaid-svg-42njgd7wOru3gurn .label text,#mermaid-svg-42njgd7wOru3gurn span{fill:#333;color:#333;}#mermaid-svg-42njgd7wOru3gurn .node rect,#mermaid-svg-42njgd7wOru3gurn .node circle,#mermaid-svg-42njgd7wOru3gurn .node ellipse,#mermaid-svg-42njgd7wOru3gurn .node polygon,#mermaid-svg-42njgd7wOru3gurn .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-42njgd7wOru3gurn .node .label{text-align:center;}#mermaid-svg-42njgd7wOru3gurn .node.clickable{cursor:pointer;}#mermaid-svg-42njgd7wOru3gurn .arrowheadPath{fill:#333333;}#mermaid-svg-42njgd7wOru3gurn .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-42njgd7wOru3gurn .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-42njgd7wOru3gurn .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-42njgd7wOru3gurn .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-42njgd7wOru3gurn .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-42njgd7wOru3gurn .cluster text{fill:#333;}#mermaid-svg-42njgd7wOru3gurn .cluster span{color:#333;}#mermaid-svg-42njgd7wOru3gurn div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-42njgd7wOru3gurn :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 具体角色 被调用 被调用 构造 函数 初始化动作 函数 添加 存kyo实例 Kyo Player GIF constructoR init_animations for gif.load 七个动作 outer #mermaid-svg-eOAhGkdXlUHxQj6j {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-eOAhGkdXlUHxQj6j .error-icon{fill:#552222;}#mermaid-svg-eOAhGkdXlUHxQj6j .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-eOAhGkdXlUHxQj6j .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-eOAhGkdXlUHxQj6j .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-eOAhGkdXlUHxQj6j .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-eOAhGkdXlUHxQj6j .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-eOAhGkdXlUHxQj6j .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-eOAhGkdXlUHxQj6j .marker{fill:#333333;stroke:#333333;}#mermaid-svg-eOAhGkdXlUHxQj6j .marker.cross{stroke:#333333;}#mermaid-svg-eOAhGkdXlUHxQj6j svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-eOAhGkdXlUHxQj6j .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-eOAhGkdXlUHxQj6j .cluster-label text{fill:#333;}#mermaid-svg-eOAhGkdXlUHxQj6j .cluster-label span{color:#333;}#mermaid-svg-eOAhGkdXlUHxQj6j .label text,#mermaid-svg-eOAhGkdXlUHxQj6j span{fill:#333;color:#333;}#mermaid-svg-eOAhGkdXlUHxQj6j .node rect,#mermaid-svg-eOAhGkdXlUHxQj6j .node circle,#mermaid-svg-eOAhGkdXlUHxQj6j .node ellipse,#mermaid-svg-eOAhGkdXlUHxQj6j .node polygon,#mermaid-svg-eOAhGkdXlUHxQj6j .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-eOAhGkdXlUHxQj6j .node .label{text-align:center;}#mermaid-svg-eOAhGkdXlUHxQj6j .node.clickable{cursor:pointer;}#mermaid-svg-eOAhGkdXlUHxQj6j .arrowheadPath{fill:#333333;}#mermaid-svg-eOAhGkdXlUHxQj6j .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-eOAhGkdXlUHxQj6j .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-eOAhGkdXlUHxQj6j .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-eOAhGkdXlUHxQj6j .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-eOAhGkdXlUHxQj6j .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-eOAhGkdXlUHxQj6j .cluster text{fill:#333;}#mermaid-svg-eOAhGkdXlUHxQj6j .cluster span{color:#333;}#mermaid-svg-eOAhGkdXlUHxQj6j div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-eOAhGkdXlUHxQj6j :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 玩家 被调用 动作 构造函数 画布 键盘输入 状态机 定义开始 定义更新 定义渲染 定义键盘操作 定义移动 调用键盘 调用移动 调用渲染 根据状态机修改 从Map里读取键盘输入 考虑重力 Player AcGameObject construcOr animations ctx pressed_keys status start update render update_control update_move 两名玩家 A w a d space B arrowup arrowleft arrowright enter gravity vx vy timedelta 控制边界 通过这些图可以发现其实里面的逻辑关系比较复杂不同的函数变量在不断地调用 架构设计:一图胜千言 渲染矩形
1:25:41 之前是渲染矩形 可以看到目前没有任何地报错信息
现在貌似找到之前地错误的原因了因为一个单词拼写错了之前没有报错是因为没有找到这个变量所以页面显示不了任何信息
项目能正常跑起来就算成功了一半真的是真理呀
成功显示了虽然丑丑的但是非常开心哈哈哈后面就是把角色放大一点儿设置攻击背景等
放大调整帧率 很不错
竖直方向偏移量
移动的时候我们在竖直方向会有一个偏移量我们需要把这个竖直方向的偏移量消除因为不同的动图的图片高度是不相等的换句话说往右走和静止两者的高度是不相等的观察可以发现移动会比静止低一定的距离
设置一个偏移量的数组把左右移动加上 22 的偏移量即可这个偏移量是自己调试出来的
使用后退的动画
目前往右和往左都是同一个动画假设我们是左边的角色往右是前进往左是后退我们速度方向和 x 轴正方向不一致的时候设置为后退状态
if (this.status 1 this.derection * this.vx 0) {this.status 2;
}实现攻击的判断
在 Player 里面实现
if (space) {//把状态机转变为 4this.status 4;//攻击的时候不能移动this.vx 0;//从第零帧开始渲染,也就是渲染攻击的动态效果this.frame_current_cnt 0;}修改按键
因为空格键也是网页往下的按键所以点击空格攻击的时候网页也会往下不太好准备把空格键修改为 k 键注意 space 这个名称没有修改
space this.pressed_keys.has(k);频闪
我们在攻击结束之后角色会闪一下下面我们需要解决这个问题
是因为我们图片总共是有 frame_cnt 张我们播放到 frame_cnt-1 这张图片的时候下一帧要直接停下来了这样可以不会发生闪烁丝滑过渡 if (this.status 4 this.frame_current_cnt obj.frame_rate * (obj.frame_cnt - 1)) {//把状态更新为静止this.status 0;//重新开始渲染动画//this.frame_current_cnt 0;}使两名玩家对称 目前两名玩家是朝向一个方向的我们需要让这两名玩家面对同一个方向
通过变换坐标系实现翻转方法是网上搜 api 来实现 目前卡成这样子了担心出 bug 现在效果还行就是移动的时候出现了一些问题
现在完全实现了对称办法就是查一下怎么在 canvas 里面翻转图像然后把一些偏移量对称的图形的一些参数改一下目前的效果是这样子
修改跳跃的速率
写前端就是这样需要多次修改一些参数使得用户得到一个比较好的体验
//修改跳跃的参数,其他的是 5 帧播放一张图片跳跃的时候每 4 帧播放一张图片//一般浏览器是一秒 60 帧所以就是 0.0167 秒是一帧//5帧就是0.08秒大概4帧是0.07秒if (i 3) {obj.frame_rate 4;}修改完之后还行
修改背景图片 感觉还行主要是这个背景图片占满了整个屏幕角色无法正常落地但是不把网页往下翻其实是没有影响的目前有两个选择第一是保持现状第二是把背景缩小一些然后调一下参数使得角色可以落地还是选第一个吧
结语 『这世界太大勇敢的少年奔赴天涯。』—— 陈可心「荣耀同行」
