js_拳皇(下)

news2024/12/24 10:23:45

文章目录

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

架构设计

一图胜千言

拳皇
碰撞检测
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.coloradmin.cn/o/1960681.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

塞尔维亚皇家科学与艺术学院向迪科维奇将军颁发奖章

2015 年 6 月 28 日&#xff0c;在托波拉文化中心礼堂&#xff0c;由塞尔维亚皇家科学家与艺术学院&#xff08;SKANU&#xff09;组织举行了一场颁奖仪式&#xff0c;向过去一年里为科学院做出无私贡献的杰出个人和集体表示感谢。 经塞尔维亚皇家科学与艺术学院一致决定&#…

RWKV 社区近期有哪些学术研究进展?

2024 年 5 月 7 日&#xff0c;我们呼吁大家使用 RWKV-6 替代 Mamba 进行科研。截至 7 月 29 日&#xff0c;来自全球各地的科研团队已经陆续发表了 7 篇基于 RWKV 架构、在各个领域进行深入研究的论文。 新的 RWKV 学术研究主要聚焦于具身智能、图像处理、模型架构三个方面。…

[Windows] 简单易用的图片去水印工具,Inpaint 9.1 单文件版

很多软件都有这个功能&#xff0c;但这个算法非常自然&#xff0c;软件小巧。 而且极为简单&#xff0c;涂鸦笔一抹&#xff0c;点绿色的《处理图像》 &#xff0c;一秒完成。 我从它6.0的版本一直用过来。现在这个是9.1 发现论坛里的 都是几年前的&#xff0c;全部都失效了。 …

【策略工厂模式】记录策略工厂模式简单实现

策略工厂模式 1. 需求背景2. 代码实现2.1 定义基类接口2.2 排序策略接口定义2.3 定义抽象类&#xff0c;实现策略接口2.4 具体的排序策略实现类2.5 实现策略工厂类2.6 控制类 3. 启动测试4. 总结 1. 需求背景 现在需要你创建一个策略工厂类&#xff0c;来根据策略实现各种排序…

达梦数据库的系统视图v$buffer_lru_first

达梦数据库的系统视图v$buffer_lru_first 达梦数据库系统视图V$BUFFER_LRU_FIRST的主要作用是显示所有缓冲区LRU链首页信息。这个视图帮助数据库管理员监控和管理缓冲池中LRU&#xff08;Least Recently Used&#xff0c;最近最少使用&#xff09;链的性能&#xff0c;通过查看…

专业级享受:2024年视频剪辑工具深度评测与推荐

说到视屏剪辑很多人都会想要到剪映吧&#xff0c;那剪映怎么剪辑视屏呢&#xff1f;剪映之外还有没有其他好用到视屏剪辑软件呢&#xff1f;这次就分享一些我自己用过到工具吧。 1.福昕视频编辑 链接直达>>https://www.pdf365.cn/foxit-clip/ 这个视频剪辑软件大大的…

【Stable Diffusion】(基础篇六)—— embedding

embedding 本系列博客笔记主要参考B站nenly同学的视频教程&#xff0c;传送门&#xff1a;B站第一套系统的AI绘画课&#xff01;零基础学会Stable Diffusion&#xff0c;这绝对是你看过的最容易上手的AI绘画教程 | SD WebUI 保姆级攻略_哔哩哔哩_bilibili 除了大模型和VAE之外…

普明服务小程序正式招募合伙人,共绘家政保洁行业新蓝图

随着家政保洁行业的快速发展和消费者对高品质服务需求的日益增长&#xff0c;普明服务小程序凭借其专业、高效、便捷的服务体验&#xff0c;迅速在市场上崭露头角。为了进一步拓展业务&#xff0c;提升品牌影响力&#xff0c;普明服务小程序现正式面向社会招募合伙人&#xff0…

你还在为PDF转Word烦恼?试试这四款免费工具吧!

悄咪咪问一句&#xff0c;大家在平时上班时最头疼的事情有哪些&#xff1f;我想会有很多朋友也有pdf如何在线转换word文档的免费方式&#xff0c;毕竟这些办公文档是非常常见的问题了&#xff0c;所以今天就专门准备这么一篇文章来分享我个人喜欢的四款好用工具&#xff1a; 第…

基于ChatGPT的“看图说话”

重磅推荐专栏: 《大模型AIGC》 《课程大纲》 《知识星球》 本专栏致力于探索和讨论当今最前沿的技术趋势和应用领域,包括但不限于ChatGPT和Stable Diffusion等。我们将深入研究大型模型的开发和应用,以及与之相关的人工智能生成内容(AIGC)技术。通过深入的技术解析和实践经…

dockerd --debugr排查服务无法启动的异常

1、查看docker服务运行状态 [rootlocalhost ~]# systemctl status docker 2、使用dockerd --debug排查错误 [rootlocalhost ~]# dockerd --debug 3、使用dockerd --debug获取的错误 4、根错误在网上查找解决方法 上图错误为二进制安装docker服务&#xff0c;/usr/local/bin/…

从里到外刨析一台电脑的性能,认识电脑很重要,妈妈再也不用担心我买电脑被骗了

现如今时代随着技术的发展&#xff0c;骗子的手段也越来越高明&#xff0c;因此从里到外刨析一台电脑的性能&#xff0c;认识电脑很重要&#xff0c;特别是准备购买电脑的小伙伴&#xff0c;建议看完这篇文章&#xff0c;其他听别人说电脑的好坏都是虚的&#xff0c;只有自己真…

创新概念:柯尔莫哥洛夫-阿诺德网络

文章目录 一、说明二、基础概念三、kolmogorov-Arnold 网络性质3.1 KAN 的潜在优势3.2 挑战和注意事项 四、基本 KAN 超参数五、COLAB 代码六、注意点 一、说明 kolmogorov-Arnold 网络 (KAN) 是深度学习领域的一项“创新”&#xff0c;它提供了一种受现有 Kolmogorov-Arnold …

【时时三省】(C语言基础)循环语句do while循环

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ——csdn时时三省 do语句的语法 do 循环语句&#xff1b; while(表达式)&#xff1b; 表达式为真继续循环 表达式为假停止 示例: break和cobtinue的运用 示例: cobtinue会跳出这个括号 到while 接着一直循…

Python 【机器学习】 进阶 之 【实战案例】房价数据中位数分析 | 1/2(含分析过程)

Python 【机器学习】 进阶 之 【实战案例】房价数据中位数分析 | 1/2&#xff08;含分析过程&#xff09; 目录 Python 【机器学习】 进阶 之 【实战案例】房价数据中位数分析 | 1/2&#xff08;含分析过程&#xff09; 一、简单介绍 二、机器学习 1、为什么使用机器学习&a…

Qt6 qml文件导入系统组件时不再需要版本号

qt开发中&#xff0c;以往在Qt5中&#xff0c;我们导入quick组件的时候总是要写版本号&#xff0c;挺麻烦的&#xff0c;而现在Qt6中qml导入组件无需再使用版本号了。直接导入即可。 import QtQuick import QtQuick.Controls import QtQuick.Window 想要看是否有这个组件&…

【题解】2024牛客多校第5场

E 安 https://ac.nowcoder.com/acm/contest/81600/E 分析 简单博弈 / 思维题。 当 ai > bi 时&#xff0c;当前骑士一定存活。 当 ai < bi 时&#xff0c;当前骑士一定死亡。 为了使得自己存活的骑士尽可能多&#xff0c;若存在 ai bi 的情况&#xff0c;一定会选…

XXE-lab-master靶场:PHP_xxe

目录 有回显 测试回显位置 构建payload 无回显数据外带 构建payload 漏洞修复 XXE-lab是一个一个包含php,java,python,C#等各种语言版本的XXE漏洞靶场。 下载地址&#xff1a;https://github.com/c0ny1/xxe-lab 将PHPStudy的中间件与版本信息调制为 php-5.4.29Apache 以…

【测试】博客系统的测试报告

项目背景 个人博客系统采用了 SSM 框架与 Redis 缓存技术的组合 &#xff0c;为用户提供了一个功能丰富、性能优越的博客平台。 在技术架构上 &#xff0c;SSM 框架确保了系统的稳定性和可扩展性。Spring 负责管理项目的各种组件 &#xff0c;Spring MVC 实现了清晰的请求处理…

【Linux系统】POSIX信号量 线程池

PISIX信号量 概念 POSIX信号量和SystemV信号量作用相同&#xff0c;都是用于同步操作&#xff0c;达到无冲突的访问共享资源目的。 但POSIX可以用于线程间同步。 引入环形队列的概念 环形队列&#xff1a;当队列为空||为满时 head end&#xff0c;我们发现这样无法区分为空…