Javascript 对象碰撞-6ren

Javascript 对象碰撞

转载作者：行者123 更新时间：2023-11-30 14:30:10

26

4

我有一个简单的 javascript 程序。

你可以在其中移动一个正方形。

如果正方形与物体发生冲突，一个像素将跳回。

它有效。但如果两个对象彼此相邻，它将不起作用。此代码的示例。如果平方 y 坐标为 200 并且接近银则它不会碰撞。

我该如何解决？

我该如何解决？如果有人可以提供更简单的解决方案，那么谢谢。

<body onload="Start()">
  <script>
    function Start() {
      myAvatar = new component("black", 30, 30, 50, 50);
      components = {
        silverMine: new component("grey", 30, 30, 300, 170),
        forest: new component("green", 30, 30, 300, 200),
      }
      Field.start();
    }

    var Field = {
      field: document.createElement("canvas"),
      start: function() {
        this.field.height = 800;
        this.field.width = 800;
        this.context = this.field.getContext("2d");
        document.body.insertBefore(this.field, document.body.childNodes[0]);
        this.interval = setInterval(fieldUpdate, 10);

        window.addEventListener('keydown', function(e) {
          Field.keys = Field.keys || [];
          Field.keys[e.keyCode] = (e.type == "keydown");
        })

        window.addEventListener('keyup', function(e) {
          Field.keys[e.keyCode] = (e.type == "keydown");
        })
      },

      clear: function() {
        this.context.clearRect(0, 0, this.field.width, this.field.height);
      }
    }

    function component(color, width, height, x, y) {
      this.color = color;
      this.width = width;
      this.height = height;
      this.x = x;
      this.y = y;

      this.componentUpdate = function() {
        ctx = Field.context;
        ctx.save();
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
        ctx.restore();
      }
    }

    function collision(a) {
      for (var prop in components) {
        c = components[prop];
        com = prop;

        if ((a.x == c.x - c.width) && (a.y >= c.y - c.width && a.y <= c.y - c.width + 60)) {
          console.log("balról");
          return true;
        }
        if ((a.x == c.x + c.width) && (a.y >= c.y - c.width && a.y <= c.y - c.width + 60)) {
          console.log("jobbrol");
          return true;
        }
        if ((a.y == c.y - c.width) && (a.x >= c.x - c.width && a.x <= c.x - c.width + 60)) {
          console.log("felülröl");
          return true;
        }
        if ((a.y == c.y + c.width) && (a.x >= c.x - c.width && a.x <= c.x - c.width + 60)) {
          console.log("alulrol");
          return true;
        }

        if ((a.x == c.x - c.width + 1) && (a.y >= c.y - c.width && a.y <= c.y - c.width + 60)) {
          a.x = c.x - c.width;
          console.log("5");
          return true;
        }
        if ((a.x == c.x + c.width - 1) && (a.y >= c.y - c.width && a.y <= c.y - c.width + 60)) {
          a.x = c.x + c.width;
          console.log("6");
          return true;
        }
        if ((a.y == c.y - c.width + 1) && (a.x >= c.x - c.width && a.x <= c.x - c.width + 60)) {
          a.y = c.y - c.width;
          console.log("7");
          return true;
        }
        if ((a.y == c.y + c.width - 1) && (a.x >= c.x - c.width && a.x <= c.x - c.width + 60)) {
          a.y = c.y + c.width;
          console.log("8");
          return true;
        }

      }

      return false;
    }

    function fieldUpdate() {
      Field.clear();
      if (Field.keys && Field.keys[37]) {
        myAvatar.x--;
      }
      if (Field.keys && Field.keys[38]) {
        myAvatar.y--;
      }
      if (Field.keys && Field.keys[39]) {
        myAvatar.x++;
      }
      if (Field.keys && Field.keys[40]) {
        myAvatar.y++;
      }
      collision(myAvatar);
      myAvatar.componentUpdate();
      for (var prop in components) {
        components[prop].componentUpdate();
      }
    }
  </script>
</body>

</html>

最佳答案

主要问题是您可以同时在 x 和 y 方向上移动，因为某些检测会出现 off by 1 类型的错误。因此，当您位于顶部正方形底部下方一个像素时，它实际上会检测到与该正方形在 y 方向上的碰撞，并且只会阻止 y 移动但允许 x 移动。

这是一个不允许碰撞的更改，尽管它确实会“卡住”在某些地方:

function fieldUpdate() {
  Field.clear();
  var oldX = myAvatar.x;
  var oldY = myAvatar.y;
  if (Field.keys && Field.keys[37]) {
    myAvatar.x--;
  }

  if (Field.keys && Field.keys[39]) {
    myAvatar.x++;
  }

  if (collision(myAvatar)) {
    myAvatar.x = oldX;
    myAvatar.y = oldY;
  }

  var oldX = myAvatar.x;
  var oldY = myAvatar.y;

  if (Field.keys && Field.keys[40]) {
    myAvatar.y++;
  }      

  if (Field.keys && Field.keys[38]) {
    myAvatar.y--;
  }

  if (collision(myAvatar)) {
    myAvatar.x = oldX;
    myAvatar.y = oldY;
  }

  myAvatar.componentUpdate();
  for (var prop in components) {
    components[prop].componentUpdate();
  }
}

如果您修复了 1 个错误，它也应该不会卡住。

另外一个问题是你在几个地方有 c.y - c.width。这些应该很可能是 c.y - c.height。如果您制作非方形形状，这将是一个问题。

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

26

4

0

文章推荐： c# - 最小起订量方法调用顺序

文章推荐： C#正则表达式硬盘问题

文章推荐： javascript - 使用插件重新初始化数据表？

jQuery 碰撞
我正在用 jQuery Collision 编写这个游戏，它使用键盘按键来移动 div，当一个 div 接触另一个 div 时，它应该防止重叠。我到底该怎么做？ HTML ----
Java 2D 碰撞
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: Java 2D Collision? 嘿，大家好，我有另一篇关于这个问题的帖子刚刚消失了，所以我想我会尝试得到一些关
Java 2D 碰撞？
嘿伙计们，我正在制作一个 2D java 游戏，我正在尝试找出如何制作一个好的碰撞代码。我目前正在使用以下代码: public void checkCollision() { Rect
java - 碰撞 - 识别物体何时停止碰撞
我的意思是，当我与实体的侧面碰撞并想要跳跃时，我无法向右/向左移动，因为当我与右侧/左侧的实体碰撞时，我有一个标志可以防止这种情况发生，例如所以: 这是我用来检测碰撞的代码: public void
python - Sprite 碰撞
所以我正在运行 collide_mask 检查，以删除与玩家 Sprite 碰撞时的生物实例。它工作得很好。 pygame.sprite.spritecollide(player, mobs, Tru
2D 碰撞 - 检测侧面
我正在研究我的砖 block splinter 机，并制作一个适当的碰撞系统，以便使球逻辑地切换方向，我必须检测球与砖 block 的哪一侧碰撞。这是我当前的脚本: int sprite_collid
swift - 碰撞 --> 不要与颜色开关等任何东西发生碰撞
我做了一个类似颜色切换的游戏。唯一的问题是玩家与每种颜色发生碰撞...... 这是我从github上获取的代码: https://github.com/prometheon/MLNimbleNinja
javascript - Canvas 碰撞？
测试我的游戏，当用户和怪物发生碰撞时，我希望弹出警报但没有成功: function die() { for (var i = 0; i < monster.length; i++) { i
c++ - vector 碰撞
我对 vector 很陌生，这是我第一次真正使用它们进行碰撞检查。这是我的项目，我对如何实现碰撞感到困惑。我目前的碰撞检查和响应代码似乎是……糟糕的设计。这是我的代码: for(auto it =
javascript - Canvas 碰撞
我是 javascript 的新手，正在尝试找出如何与球和木板发生碰撞，这将停止游戏并提醒玩家“你输了”。但我只想让红球击中木板，让蓝球不接触地继续前进。这是我正在处理的代码。 (我不介意你是否可以帮
Android OnClickListener 碰撞？
很抱歉提出奇怪的问题，我还是 Android 编程的新手。我有以下代码: import android.content.DialogInterface.OnClickListener; import
iphone - UIPanGestureRecognizer 碰撞
我有 6 个 UIImageView，每个都连接到 UIPanGestureRecognizer，它们都连接到相同的方法。方法是: - (IBAction)handlePan:(UIPanGestur
python - 使用视锥体检查边界框相交/碰撞
我想根据某些对象的轴对齐边界框检查视锥体，以粗略检查这些对象是否在视野中。速度不是什么大问题。最佳答案我发现构建视锥体的世界空间模型并检查与它的 bbox 碰撞是错误的方法。一个更简单的方法是以
ios - Spritekit 碰撞
我项目中的所有这些代码都运行良好，但我遇到了一些问题。当飞机接触到屏幕的边界时，它会在接触后开始旋转。我不知道如何让它在碰到屏幕边界时不旋转。只有在我使用时才会出现这个问题: plane.physic
ios - 获取已删除实体的关系。 (碰撞)
在应用程序启动时，我在后台线程中删除旧的 CoreData 行，下面是我的代码。我的问题类似于城市街道问题。所以，我有两个实体，Street 和 City，我有一个关系 City > Street，因
ios - *碰撞*通过位掩码
我试图不接触穴居人和其他带有碰撞位掩码的图像，但我的穴居人击中了一切。 func addCaveManBitMasks(){ caveManNode.physicsBody?.category
javascript - HTML5 - 碰撞
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
python - PyGame 碰撞？
如何在 PyGame 中找到字符和图像之间的碰撞？我已经从图像中绘制了一个玩家，并从瓷砖中绘制了墙壁，那么我如何检测这些碰撞？最佳答案如果你使用pygame Rect类来表示对象的边界，您可以使用
c - ftok() 碰撞
我正在使用 ftok() 为 C 应用程序使用的共享内存段生成标识符。我有问题，在一个盒子上我与 root 使用的标识符发生冲突。在这种情况下，我可以通过破解代码来修复它，但我想要一个更强大的解决方案
javascript - 与物体(墙壁)碰撞
这个问题在这里已经有了答案: JavaScript: Collision detection (10 个回答) 10 个月前关闭。检测 2 个物体(墙壁)碰撞的好方法。是的，不仅仅是检测，还有进一步

首页

博学

6Ren·AI

商城

Javascript 对象碰撞