jjzjj

Javascript Canvas 碰撞检测

coder 2024-07-23 原文

我正在使用需要碰撞检测的 Canvas 在 Javascript 中构建游戏，在这种情况下，如果玩家 Sprite 击中盒子，则不得允许玩家穿过盒子。

我有一个名为 blockList 的全局数组，它包含绘制到 Canvas 上的所有框。它看起来像这样:

var blockList = [[50, 400, 100, 100]];

他们像这样被吸引到 Canvas 上:

c.fillRect(blockList[0][0], blockList[0][1], blockList[0][2], blockList[0][3]);

我还有一个播放器对象，它有一个更新方法和一个绘制方法。 Update 根据键盘输入等设置玩家的位置，主游戏循环使用 draw 将玩家绘制到 Canvas 上。玩家被画成这样:

this.draw = function(timestamp) {
        if(this.state == "idle") {
            c.drawImage(this.idleSprite, this.idleSprite.frameWidth * this.idleSprite.frameCount, 0, this.idleSprite.frameWidth, this.idleSprite.frameHeight, this.xpos, this.ypos, this.idleSprite.frameWidth, this.idleSprite.frameHeight);
            if(timestamp - this.lastDraw > this.idleSprite.updateInterval) {
                this.lastDraw = timestamp;
                if(this.idleSprite.frameCount < this.idleSprite.frames - 1) { this.idleSprite.frameCount++; } else { this.idleSprite.frameCount = 0; }
            }
        } else if(this.state == "running") {
            var height = 0;
            if(this.facing == "left") { height = 37; }
            c.drawImage(this.runningSprite, this.runningSprite.frameWidth * this.runningSprite.frameCount, height, this.runningSprite.frameWidth, this.runningSprite.frameHeight, this.xpos, this.ypos, this.runningSprite.frameWidth, this.runningSprite.frameHeight);
            if(timestamp - this.lastDraw > this.runningSprite.updateInterval) {
                this.lastDraw = timestamp;
                if(this.runningSprite.frameCount < this.runningSprite.frames - 1) { this.runningSprite.frameCount++; } else { this.runningSprite.frameCount = 0; }
            }
        }
    }

现在，播放器具有某些属性 player.xpos、player.ypos、player.width、player.height 。 block 具有相同的属性。所以我拥有实现碰撞检测所需的一切，我只是不知道该怎么做。我试过做这样的事情:

if(player.x > blockList[0][0] && player.y > blockList[0][1])

但它远非完美或可玩。

有谁知道可以根据两个对象是否发生碰撞来返回真或假的简单方法或函数？

最佳答案

我使用以下函数来检测两个矩形之间的碰撞:

rect_collision = function(x1, y1, size1, x2, y2, size2) {
  var bottom1, bottom2, left1, left2, right1, right2, top1, top2;
  left1 = x1 - size1;
  right1 = x1 + size1;
  top1 = y1 - size1;
  bottom1 = y1 + size1;
  left2 = x2 - size2;
  right2 = x2 + size2;
  top2 = y2 - size2;
  bottom2 = y2 + size2;
  return !(left1 > right2 || left2 > right1 || top1 > bottom2 || top2 > bottom1);
};

这确定是否有两个正方形，以 (x1, y1) 和 (x2, y2) 为中心，边长 2*size1和 2*size2 分别重叠。更改 left1、right1 等的定义以处理一般矩形而不只是正方形并使用不同的数据格式应该很容易。

具体来说，left1 是第一个正方形的左侧，right1 是右侧，等等。请注意，在我的坐标系中，y 轴是反转(top1 bottom1)。

关于Javascript Canvas 碰撞检测，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8017541/

JavascriptCanvascodethisrunningSpritecollision-detection

有关Javascript Canvas 碰撞检测的更多相关文章

  1. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  2. ruby - 检测由 RSpec、Ruby 运行的代码 - 2

    我想知道我的代码是否在rspec下运行。这可能吗？原因是我正在加载一些错误记录器，这些记录器在测试期间会被故意错误(expect{x}.toraise_error)弄得乱七八糟。我查看了我的ENV变量，没有(明显的)测试环境变量的迹象。 最佳答案 在spec_helper.rb的开头添加:ENV['RACK_ENV']='test'现在您可以在代码中检查RACK_ENV是否经过测试。 关于ruby-检测由RSpec、Ruby运行的代码，我们在StackOverflow上找到一个类似的问题

  3. ruby - 使用 Ruby Daemons gem 检测停止 - 2

    我正在使用rubydaemongem。想知道如何向停止操作添加一些额外的步骤？希望我能检测到停止被调用，并向其添加一些额外的代码。任何人都知道我如何才能做到这一点？ 最佳答案 查看守护程序gem代码，它似乎没有用于此目的的明显扩展点。但是，我想知道(在守护进程中)您是否可以捕获守护进程在发生“停止”时发送的KILL/TERM信号...？trap("TERM")do#executeyourextracodehereend或者你可以安装一个at_exit钩子(Hook):-at_exitdo#executeyourextracodehe

  4. ruby - Ruby 脚本如何检测到它正在 irb 中运行？ - 2

    我有一个定义类的Ruby脚本。我希望脚本执行语句BoolParser.generate:file_base=>'bool_parser'仅当脚本作为可执行文件被调用时，而不是当它被irbrequire(或通过-r在命令行上传递)时。我可以用什么来包装上面的语句，以防止它在我的Ruby文件加载时执行？ 最佳答案 条件$0==__FILE__...!/usr/bin/ruby1.8classBoolParserdefself.generate(args)p['BoolParser.generate',args]endendif$0==_

  5. Ruby 无法检测字符串中的换行符 - 2

    我有以下字符串，我想检测那里的换行符。但是Ruby的字符串方法include?检测不到它。我正在运行Ruby1.9.2p290。我哪里出错了？"/'ædres/\nYour".include?('\n')=>false 最佳答案 \n需要在双引号内，否则无法转义。>>"\n".include?'\n'=>false>>"\n".include?"\n"=>true 关于Ruby无法检测字符串中的换行符，我们在StackOverflow上找到一个类似的问题： h

  6. 【自动驾驶环境感知项目】——基于Paddle3D的点云障碍物检测 - 2

    文章目录1.自动驾驶实战：基于Paddle3D的点云障碍物检测1.1环境信息1.2准备点云数据1.3安装Paddle3D1.4模型训练1.5模型评估1.6模型导出1.7模型部署效果附录show_lidar_pred_on_image.py1.自动驾驶实战：基于Paddle3D的点云障碍物检测项目地址——自动驾驶实战：基于Paddle3D的点云障碍物检测课程地址——自动驾驶感知系统揭秘1.1环境信息硬件信息CPU:2核AI加速卡:v100总显存:16GB总内存:16GB总硬盘:100GB环境配置Python:3.7.4框架信息框架版本:PaddlePaddle2.4.0（项目默认框架版本为2.3

  7. ruby - 重新连接 tcpsocket(或如何检测已关闭的套接字) - 2

    我有一个连接到服务器的ruby​​tcpsocket客户端。在发送数据之前如何检查套接字是否已连接？我是否尝试“拯救”断开连接的tcpsocket，重新连接然后重新发送？如果是这样，有没有人有一个简单的代码示例，因为我不知道从哪里开始:(我很自豪我设法在rails中获得了一个持久连接的客户端tcpsocket。然后服务器决定杀死客户端，一切都崩溃了；)编辑我已经使用此代码解决了一些问题-如果未连接，它将尝试重新连接，但如果服务器已关闭则不会处理这种情况(它将继续重试)。这是正确方法的开始吗？谢谢defself.write(data)begin@@my_connection.write(

  8. css - 检测到 Sass 更改但 style.css 仅在我保存时每 5 到 7 次被覆盖 - 2

    我在一台Windows764位机器上使用Sass和Ruby(最新版本)，我正在我的家庭服务器上处理一个共享文件夹。(但是，我不得不承认问题本身也出现在服务器上，因为我试图安装Ruby并直接-watch服务器上的文件)。问题如下:如果我第一次保存，检测到变化，我的style.css被直接覆盖。之后，我总是需要保存多达7次才能覆盖style.css。每次都会检测到更改，但不会编译任何内容。这是一个屏幕:>>>Sassiswatchingforchanges.PressCtrl-Ctostop.overwritestyle.css>>>Changedetectedto:E:/Websites

  9. ruby-on-rails - 检测 Rails 是否正在运行站点 - 2

    我所在的团队负责管理公司面向公众的云平台。我们拥有大量运行面向互联网的VM的用户群。我想对我们的地址空间进行自动扫描，看看是否有人在运行Rails应用程序，这样我就可以通知他们升级他们的Rails版本，以避免本周出现的严重安全漏洞。我注意到在某些Apache部署中，有一个有用的PassengerHeader:X-Powered-By:PhusionPassenger(mod_rails/mod_rack)2.0.3然而，这并不可靠。我想知道是否有一种可靠的方法来检测在Web服务器后面运行的Rails，无论是使用响应header还是某种可以确定的GET/POST。谢谢!

  10. ruby - 正则表达式 - 这个用于素数检测的正则表达式的复杂性是多少？ - 2

    这行ruby​​代码检测素数(太棒了!)。("1"*n)!~/^1?$|^(11+?)\1+$/#wherenisapositiveinteger详细信息在这篇博文中解释http://www.noulakaz.net/weblog/2007/03/18/a-regular-expression-to-check-for-prime-numbers/我很好奇它在BIG-O表示法中的表现。有人帮忙吗？ 最佳答案 根据经验数据，它似乎是O(n2)。我对前10000个质数中的每100个运行Ruby代码。以下是结果:蓝点是记录的时间，橙色线是

随机推荐