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

js_拳皇（下）

news 来源：原创 2024/9/20 15:34:57

文章目录

架构设计
视频演示
碰撞检测
- 碰撞检测函数
构想
血条和计时器
全屏
后续工作

架构设计

一图胜千言

在这里插入图片描述

视频演示

拳皇

碰撞检测

之前设计角色的时候就是先把角色抽象成矩形，实现基本的动作之后再把动图贴上去，现在也是先把角色或者说手臂，拳头抽象成矩形，检测一方手臂的矩形和另一方角色的矩形是否重合，假设有重合部分，认为发生了碰撞，也就是有攻击发生

在这里插入图片描述
目前把页面缩小之后，角色是悬空的状态，昨天想偷懒，不想修改，但是这个还是不好，等之后有时间还是需要修改一下，应该修改也不难，把背景，还有一些竖直方向上的参数调整一下就好了

//碰撞检测把角色抽象成矩形this.ctx.fillStyle = 'blue';this.ctx.fillRect(this.x, this.y, this.width, this.height);

可以看到当前的角色抽象出来的矩形比角色本身要大一些

干脆现在就调整一些参数，假设现在不调整，之后拳头还没有打到对方就出现掉血了，不太合适

new Kyo(this, {x: 200,y: 0,width: 150,height: 270,color: "blue",id: 0,}),

我们角色的宽度和高度分别是 150 和 270 ，我们
在这里插入图片描述
用截图工具发现这个角色的边框是 225 和 407，

角色本身的宽度，高度分别是 179 和 312

//输出角色的宽度和高度console.log(this.width, this.height);

在这里插入图片描述
我们输出发现这个边框的宽度和角色的宽度高度其实是一致的，但是在屏幕里面显示大小不一致

刚刚看了很多同学的项目地址，很多上线的项目可能因为服务器或者域名没有续费，现在无法访问了

事实上，我们设置了背景画布大小的只有 game_map 里面一行代码

this.$canvas = $(`<canvas width="1280" height="720" tabindex=0></canvas>`);

现在我们稍微改一下这个参数
在这里插入图片描述
我们可以看到整个屏幕的大小是 1920 和 830 ，css 样式里面也设计了背景的宽度和高度

#kof {/* 前面是用 id 标记的 div ，所以这里选择出来 */width: 1280px;height: 720px;/* height: 600px; *//* height: 100%; */background-image: url(/static/images/background/0.gif);/* background-image: url('static/images/background/0.gif'); */background-size: 200% 100%;background-position: top;
}

我们都稍作调整，
在这里插入图片描述
我们可以看到，其实背景影响的是后面的，我们真正需要修改的是画布

现在感觉很可以，滚轮键不能再调整上下的游戏画面了，把参数设置为了这样子

this.$canvas = $(`<canvas width="1902" height="803" tabindex=0></canvas>`);

现在需要让角色到地面上来
在这里插入图片描述
现在还行，把参数设置为了这样，但是还有一个问题，初始的时候，右边的玩家太靠中间了，两名玩家不对称

现在这样子差不多

 this.players = [new Kyo(this, {x: 200 + 100 + 100,y: 0,width: 150,height: 270,color: "blue",id: 0,}),new Kyo(this, {x: 1560 - 100 - 100,y: 0,width: 150,height: 270,color: "red",id: 1,})];

在这里插入图片描述
我们把宽度和高度减小一部分之后，右边的玩家不是直接对称过去的，应该是写对称函数的时候有一些问题

现在差不多了，另外试了一下把两名角色交换位置，也没有影响

可以看到这个攻击距离非常细致

//抽象手臂this.ctx.fillStyle = 'red';this.ctx.fillRect(this.x + 120 - 5, this.y + 20 + 10 + 3, 100 + 5, 30 - 5 - 2);

在这里插入图片描述
对称之后两个人的攻击距离差不多了

碰撞检测函数

//碰撞检测is_collision(r1, r2) {if (Math.max(r1.x1, r2.x1) > Math.min(r1.x2, r2.x2)) {return false;}//把二维的转换成一维的就行if ((Math.max(r1.y1, r2.y1)) > Math.min(r1.y2, r2.y2)) {return false;}return true;}

r1 r2 分别表示红色矩形和蓝色矩形
在这里插入图片描述
目前攻击对方之后，对方一直播放被攻击的动画

//假设攻击的动画播放完了，就需要停止攻击//被攻击也只播放完一次if (this.status === 4 || this.status === 5) {if (this.frame_current_cnt === obj.frame_rate * (obj.frame_cnt - 1)) {//把状态更新为静止this.status = 0;//重新开始渲染动画//this.frame_current_cnt = 0;}}

在这里插入图片描述
把抽象的矩形去掉之后，可以正常攻击和被攻击

设置了一个倒地的特效，每次播放新的动画都需要从第零帧开始播放，之后可以实现一个平局和一个 KO 的特效，显示在游戏正中间

假设一名玩家在跳跃的过程中被攻击且被击败，尸体直接悬空了

给所有场景施加重力即可解决这个问题

 this.vy += this.gravity;

构想

该游戏可以像之前的 django 项目一样，在游戏开始之前，有一个游戏界面，部署到网站上面之后点击可以有一个跳转，之后可以实现一个游戏音乐

血条和计时器

本来可以直接实现在 index.html 里面，但是为了显得比较高端，可以用 jquery 来实现一个 html 变量，html 里面的代码非常短，非常清爽

this.root.$kof.append($(`<div class="kof-head-hp-0"></div><div class="kof-head-timer"></div><div class="kof-head-hp-1"></div>`));

刚刚设置的时候发现一件事情，自己浏览器的大小缩放到 67% 才是正常的游戏画面，但是我们需要的是，100% 的时候是显示正常的

该怎么调整呢？
在这里插入图片描述
终于算是差不多调好了，究极折磨，要是还需要重新实现一遍攻击函数，更加难受，幸好不用，现在是全屏 100% 大小

但是我们设置了上方的一个样式，在屏幕上面没有正常显示，但是我在使用的时候也没有使用 100% ，所以按道理应该可以正常显示的

发现是定义的时候出现了一些问题

this.root.$kof.append($(`<div class="kof-head"><div class="kof-head-hp-0"><div><div></div></div></div><div class="kof-head-timer">60</div><div class="kof-head-hp-1"><div><div></div></div></div></div>`));

我忘记把一个父类添加进来，导致 css 设置样式的时候找不到这个 html 变量