首页 / JAVASCRIPT / javascript – HTML Canvas游戏：2D碰撞检测

javascript – HTML Canvas游戏：2D碰撞检测

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – HTML Canvas游戏：2D碰撞检测，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2134字，纯文字阅读大概需要4分钟。

内容图文

我需要编写一个非常简单的2D HTML画布游戏,其中包含一个角色和一些墙壁.地图(俯视图)是一个多维数组(1 =墙)

map = [
  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
  [1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0],
  [1,0,0,1,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,1,0,0,0,0,1,0,1,1,1,1,1,1,0,0,0,0,0,0,0,1],
  [1,0,0,1,0,0,0,0,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,1],
  [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,1,1],
  [1,1,1,0,1,1,1,1,1,1,0,1,1,1,1,1,1,0,0,1,1,0,1,1],
  [1,1,1,0,1,1,1,1,1,1,0,1,1,1,1,0,0,0,0,1,1,0,1,1],
  [0,0,0,0,1,1,1,1,1,1,0,1,1,1,1,0,0,1,1,1,1,0,1,1],
  [1,1,1,0,1,1,1,1,0,0,0,1,1,1,0,0,0,1,1,1,1,0,1,1],
  [1,1,1,0,0,0,0,0,0,0,0,1,1,0,0,1,1,1,0,0,0,0,1,1],
  [1,1,1,1,1,1,1,1,1,1,0,1,1,0,0,0,0,0,0,1,0,0,1,1],
  [1,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,1],
  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];

角色不应该走过墙壁……所以他应该只走“0”.我已经得到了地图渲染和角色的行走部分工作得很好,但我还不知道如何检查碰撞.

可以在JSBin找到一个非常简单的版本.您可以使用箭头键或WASD移动(黑色方块).

我已经尝试过使用这样的东西进行非常简单的碰撞检测：

function checkCollision( x, y ) {
  if ( map[ Math.round( x ) ][ Math.round( y ) ] !== 0 ) {
    return true; // Collision
  }
  return false;
}

但这并不常用(见JSBin).使用Math.round,角色和墙壁重叠……如果我使用Math.ceil或Math.floor,那就更糟了.

有什么方法可以改善这种“碰撞检测”,这样角色就不能走过红墙了？

解决方法:

您的播放器可能随时在地图中重叠四个方块.因此,您需要检查所有四个方格中的碰撞(对应于角色的左上角,右上角,左下角,右下角).为了让它“挤压”通过走廊(假设角色与瓷砖的大小相同),您可能还需要将其调整一个或两个像素(因此下面的1 / config.tileSize).

function checkCollision( x, y ) {
  var x1 = Math.floor(x + 1 / config.tileSize), 
      y1 = Math.floor(y + 1 / config.tileSize),
      x2 = Math.floor(x + 1 - 1 / config.tileSize), 
      y2 = Math.floor(y + 1 - 1 / config.tileSize);
  if (map[y1][x1] !== 0 || map[y2][x1] !== 0 || map[y1][x2] !== 0 || 
      map[y2][x2] !== 0) {
    return true; // Collision
  }
  return false;
}

查看此版本的JSBin

内容总结

以上是互联网集市为您收集整理的javascript – HTML Canvas游戏：2D碰撞检测全部内容，希望文章能够帮你解决javascript – HTML Canvas游戏：2D碰撞检测所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/809001.html

来源：【匿名】