js_拳皇(下)

文章目录

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

架构设计

一图胜千言

拳皇
碰撞检测
kof
血条
时钟

在这里插入图片描述

视频演示

拳皇

碰撞检测

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

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

//碰撞检测把角色抽象成矩形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 变量

全屏

该游戏全屏显示会更好一些,之后有时间可以设置一个网页上面的按钮,点击这个按钮,相当于触发全屏这个键

谷歌浏览器里面显示是全屏的,edge 浏览器显示是这个效果
在这里插入图片描述
并且之前卡住了可能不是我的问题,现在设置不能选中还是可以选中,可能是浏览器的兼容性问题

后续工作

后续就是部署上线这个项目,再增加一些界面,不断维护完善这个项目
添加链接描述

我是奥尔加·伊滋卡,几颗子弹不要紧的!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/387459.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信聊天记录丢失怎么办?3款数据恢复大师免费版,你选对了吗?

在这个网络时代&#xff0c;微信可不只是用来聊天的&#xff0c;它还帮我们处理工作、记录生活、保存美好回忆。但是&#xff0c;如果微信里的东西突然没了&#xff0c;那感觉就像是回到了没有网络的黑暗时期&#xff0c;让人焦虑又无助。别怕&#xff0c;今天咱们就来说说大家…

整箱排柜不返工?用易境通散拼系统就OK

想必困扰散货拼柜小伙伴们一大难题就是&#xff0c;怎么把错乱纷繁的货物有序地整箱排柜&#xff0c;并且要保证集装箱高效利用&#xff0c;运输成本尽量降低。这不仅要求操作者具备卓越的统筹规划能力&#xff0c;更需长期积累的实践经验和敏锐的应变能力。易境通散拼系统可以…

HarmonyOS NEXT星河版零基础入门到实战

文章目录 一、HarmonyOS NEXT介绍学习内容1、鸿蒙APP开发2、能力套件开发3、全场景开发适合人群 持续更新中✒️总结 一、HarmonyOS NEXT介绍 放弃安卓框架之后&#xff0c;HarmonyOS NEXT成为真正独立于安卓、iOS的操作系统&#xff0c;堪称是一场史无前例的脱胎换骨。在其众多…

NC 缺失的第一个正整数

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了就去分享给你的码吧。 描述 给定一个无重…

Python | Leetcode Python题解之第300题最长递增子序列

题目&#xff1a; 题解&#xff1a; class Solution:def lengthOfLIS(self, nums: List[int]) -> int:d []for n in nums:if not d or n > d[-1]:d.append(n)else:l, r 0, len(d) - 1loc rwhile l < r:mid (l r) // 2if d[mid] > n:loc midr mid - 1else:l…

6 Java的基本程序设计结构(基本语法5)- 面向对象进阶

文章目录 面向对象进阶一、 static 静态1 静态变量(1)基本定义和用法(2)静态变量内存图2 静态方法(1)基本定义和用法(2)工具类练习:按下面需求写一个工具类3 static注意事项4 重新认识main方法二、继承1 继承的概念2 继承的特点3 继承到底能继承父类中的哪些内容?4 继…

阿里云服务器 Ubuntu18.04 安装 mysql8.0并允许外部连接

参考教程&#xff1a; 官网教程 参考教程一 首先彻底删除mysql5.7 dpkg --list|grep mysql #查看 sudo apt-get remove mysql-common #卸载 sudo apt-get autoremove --purge mysql-server-5.7 #版本自己修改 dpkg -l|grep ^rc|awk {print$2}|sudo xargs dpkg -P #清除残留数…

【释放品牌魅力,开启营销新篇章】—— 短视频矩阵营销系统源码

【释放品牌魅力&#xff0c;开启营销新篇章】—— 短视频矩阵营销系统在这个数字化高速发展的时代&#xff0c;您是否还在为品牌曝光度不足、营销效果不佳而苦恼&#xff1f;来吧&#xff0c;让我们一起探索全新的解决方案——短视频矩阵营销系统&#xff01; 在这个数字化高速…

linux:基本权限

1、权限与用户之间的关系 在Linux系统中&#xff0c;针对文件定义了三种身份&#xff0c;分别是属主(owner)、属组(group)、其他人(others)&#xff0c;每一种身份又对应三种权限&#xff0c;分别是可读(readable)、可写(writable)、可执行(excutable)。 2、如何修改一个文件的…

硬件工程师笔面试真题汇总

目录 1、电阻 1&#xff09;上拉电阻的作用 2&#xff09;PTC热敏电阻作为电源电路保险丝的工作原理 2、电容 1&#xff09;电容的特性 2) 电容的特性曲线 3) 1uf的电容通常来滤除什么频率的信号 3、电感 4、二极管 1&#xff09;二极管特性 2&#xff09;二极管伏安…

基于SpringBoot+Vue的人事管理系统(带1w+文档)

基于SpringBootVue的人事管理系统(带1w文档) 基于SpringBootVue的人事管理系统(带1w文档) 人事管理管理方面的任务繁琐,以至于公司每年都在人事管理这方面投入较多的精力却效果甚微,人事管理系统的目标就是为了能够缓解人事管理工作方面面临的压力,让人事管理方面的工作变得更加…

【Python机器学习】决策树的构造——递归构建决策树

我们可以采用递归的原则处理数据集&#xff0c;递归结束的条件是&#xff1a;程序遍历完所有划分数据集的属性&#xff0c;或者每个分支下的所有实例都具有相同的分类。如果所有实例具有相同的分类&#xff0c;则得到一个叶子节点或者终止块。任何到达叶子节点的数据必然属于叶…

C++(week15): C++提高:(三)计算机网络

文章目录 一、计算机网络基础1.协议概念2.分层模型3.协议格式(1)以太网帧格式(2)IP段格式(3)TCP/UDP数据报格式4.TCP协议(1)TCP协议的特点(2)三次握手(3)四次挥手(4)SYN攻击5.状态迁移图的解析:11种状态6.TCP通信状态与程序结合分析二、网络编程(Socket编程)1.网络编程基础2.字…

测试人生 | 招聘严峻期从面试无力感,到一天2个offer的一些经验分享(内附美团、字节、快手等面试题)

本人是霍格沃兹北京测试开发学社线下3期学员&#xff0c;拥有3年测试工作经验&#xff0c;之前一直在某大厂外包做软件测试&#xff0c;期间主要是以功能测试为主。 经过一个月的高强度找工作奋战&#xff0c;最终拿下了3家公司offer&#xff0c;选择了一家自己很满意的公司。…

nginx的反向代理及负载均衡

nginx的反向代理 安装包链接https://nginx.org/download/nginx-1.26.1.tar.gz yum -y install gcc gcc-c pcre-devel openssl-devel [rootstaticserver ~]# tar -xzvf nginx-1.26.1.tar.gz [rootstaticserver nginx-1.26.1]#./configure --prefix/usr/local/nginx --userngi…

Graph RAG:知识图谱赋能大语言模型的新范式

一、前言 大模型技术在经过一年多的飞速迭代和发展&#xff0c;以 ChatGPT 为代表的大语言模型&#xff08;LLM&#xff09;凭借其强大的文本生成能力&#xff0c;在各个领域掀起了一场 AI 应用的革命。然而&#xff0c;狂欢过后&#xff0c;人们逐渐意识到 LLM 并非无所不能。…

时常在面试中被问到的JVM问题

文章目录 JVM 和 JDK、JRE 有什么区别&#xff1f;JVM 是如何工作的&#xff1f;JVM 主要组件JVM 执行流程JVM 的工作示例 说一下类加载机制类加载器&#xff08;Class Loader&#xff09;示例 什么是双亲委派模型&#xff1f;&#xff08;Parent Delegation Model&#xff09;…

cookie与session的关系

登录时:存入redis的格式是key:value 登录时的session 再次请求时:查询请求头中带了cookie的session是和登录时第一次的一致,不管是第几个请求,和缓存的cookie的session做对比 退出时--依然会带着这个sessionid 1.cookie和session: 客户端--------------------企业代…

跨平台AI模型部署神器:FastDeploy实战Yolov5

简介 FastDeploy 是一款易用、高效的 AI 模型部署工具。 它旨在简化 AI 模型从训练到部署的整个流程,支持在多种硬件和操作系统上进行模型推理。 特点如下: 多平台支持 : FastDeploy 支持在云、边、端等多种环境中部署模型,包括但不限于 Windows、Linux、Android、iOS …

短剧出海分销推广系统,海外短剧CPS分润机制方案介绍

随着国内短剧市场的蓬勃发展&#xff0c;其独特的叙事风格和快节奏的内容形式不仅在国内赢得了广泛好评&#xff0c;更逐渐跨越国界&#xff0c;吸引了全球观众的关注。海外短剧系统CPS分销推广是一种创新的营销模式&#xff0c;它主要依靠按销售分润&#xff08;Cost Per Sale…