程序员经验分享-hwhale

Matter.js 用于碰撞检测

2024-03-31

我对在这里提问还比较陌生，所以请耐心等待。我正在尝试使用 Matter.js 作为主要物理引擎创建一个自上而下的驾驶游戏。我希望红色汽车与绿色方块相撞。然而，我仍然坚持知道如何在我的游戏中实现 Matter.js。任何形式的回应将不胜感激！

<html>
<canvas width=1000 height=500 style='border:1px solid black'>
</canvas>

<body onload='start()'>
  <script src='matter.js'>
  </script>
  <script>
    function start() {
      var canvas = document.querySelector('canvas');
      var ctx = canvas.getContext('2d');

      var x = 100;
      var y = 100;
      var s = 0;
      var rot = 0;
      var rightPressed = false;
      var leftPressed = false;
      var upPressed = false;
      var downPressed = false;

      document.addEventListener("keydown", keyDownHandler, false);
      document.addEventListener("keyup", keyUpHandler, false);

      function keyDownHandler(e) {
        if (e.keyCode == 39) {
          rightPressed = true;
        } else if (e.keyCode == 37) {
          leftPressed = true;
        } else if (e.keyCode == 38) {
          upPressed = true;
        } else if (e.keyCode == 40) {
          downPressed = true;
        }
      }

      function keyUpHandler(e) {
        if (e.keyCode == 39) {
          rightPressed = false;
        } else if (e.keyCode == 37) {
          leftPressed = false;
        } else if (e.keyCode == 38) {
          upPressed = false;
        } else if (e.keyCode == 40) {
          downPressed = false;
        }
      }

      function car() {
        ctx.fillStyle = 'red';
        ctx.fillRect(-20, -20, 40, 40);
        ctx.beginPath();
        ctx.moveTo(-20, -19);
        ctx.lineTo(-20, -20);
        ctx.lineTo(0, -30);
        ctx.lineTo(20, -20);
        ctx.lineTo(20, -19);
        ctx.fill();
        ctx.closePath();
        ctx.fillStyle = 'black';
        ctx.fillRect(-25, -20, 5, 10);
        ctx.fillRect(-25, 10, 5, 10);
        ctx.fillRect(20, -20, 5, 10);
        ctx.fillRect(20, 10, 5, 10);
        ctx.fillRect(-15, -5, 30, 20);
      }

      function block() {
        ctx.fillStyle = 'green';
        ctx.fillRect(200, 100, 50, 50);
      }

      function draw() {
        requestAnimationFrame(draw);
        ctx.clearRect(0, 0, 1000, 500);
        if (s > 15) {
          s = 15;
        }
        if (s < -15) {
          s = -15;
        }
        if (upPressed) {
          s++;
        }
        if (downPressed) {
          s *= .9;
        }
        if (!upPressed) {
          s *= .99;
        }
        if (leftPressed) {
          rot -= s / 3;
        }
        if (rightPressed) {
          rot += s / 3;
        }
        ctx.fillText(upPressed, 10, 10);
        x += s * Math.cos(rot * Math.PI / 180);
        y += s * Math.sin(rot * Math.PI / 180);
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate((rot + 90) * Math.PI / 180);
        car();
        ctx.restore();
        block();
      }
      draw();
    }
  </script>
</body>

</html>

您将不得不重做大部分代码，但是移动代码可以相当容易地移动。

首先你需要制作一个新引擎并运行它：

//Create engine - All the game stuff
var Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Composites = Matter.Composites,
    Common = Matter.Common,
    World = Matter.World,
    Bodies = Matter.Bodies,
    Body = Matter.Body;

// create an engine
var engine = Engine.create(),
    world = engine.world;

// create a renderer
var render = Render.create({
    canvas: document.getElementById("canv"),
    engine: engine,
    options: {
        width: 500,
        height: 500,
        wireframes: false,
        background: '#6DDA4A'
    }
});
engine.world.gravity.y = 0;
Render.run(render);
// create runner
var runner = Runner.create();
Runner.run(runner, engine);

接下来，您应该创建一个新的汽车对象和块并将其添加到世界中。您可以将这些值编辑为您需要的值。 注意：rot 不是您需要的实际参数，我只是用它来设置汽车的旋转。

var car = Bodies.rectangle(100, 100, 50, 80, {
    friction: 1,
    frictionAir: 0.1,
    rot: 0,
    restitution: 0,//Makes it so the car won't bounce off of objects
    render: {
        fillStyle: "#FF0000",
        /*sprite: {
            //You can use this to apply a background image to the car
            texture: "Path/To/Image.png",
            xScale: number,
            yScale: number
        }/**/
    }
});
var block = Bodies.rectangle(350, 100, 100, 400, {
    isStatic: true,//Makes block unmovable
    friction: 1,
    frictionAir: 0.1,
    rot: 0,
    restitution: 0,
    render: {
        fillStyle: "#0000FF",
        /*sprite: {
            texture: "Path/To/Image.png",
            xScale: number,
            yScale: number
        }/**/
    }
});
World.add(world, [car, block]);

要更新汽车，您可以使用body.setPosition or body.applyForce。既然是车，我就用body.applyForce这样在您停止按下按钮后汽车仍会继续行驶。旋转也可以通过body.setAngle or body.rotate。这次我要用body.setAngle所以转弯感觉更好。

function updateCar() {
    //Declare variables for velocity

    var speed = 5;
    var carRot = car.rot*180/Math.PI;
    var velY = speed * Math.cos(carRot * Math.PI / 180);
    var velX = speed * Math.sin(carRot * Math.PI / 180)*-1; 
    var pushRot = 0;
    //Update variables

    if (upPressed==false&&downPressed==false) {
        velY = 0;
        velX = 0;
    }
    else {
        //alert(carX+", "+carY);
    }
    if (downPressed == true) {
        velY *= -1;
        velX *= -1;
    }
    if (leftPressed) {
        pushRot = -0.1;
    }
    if (rightPressed) {
        pushRot = 0.1;
    }
    car.rot += pushRot;


    //Set position of car
    carX += velX;
    carY += velY;
    Body.applyForce(car, {x:carX,y:carY}, {x:velX/200,y:velY/200});
    Body.setAngle(car, car.rot);
    requestAnimationFrame(updateCar);
}
window.requestAnimationFrame(updateCar);

查看演示here https://codepen.io/Tians/pen/qwOOVE?editors=0110

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html5canvas

gamephysics

matterjs

Matter.js 用于碰撞检测 的相关文章

  • 如何使用 JavaScript 创建链接？

    我有一个标题字符串和一个链接字符串 我不知道如何将两者放在一起以使用 JavaScript 在页面上创建链接 任何帮助表示赞赏 我试图解决这个问题的原因是因为我有一个 RSS 源并且有一个标题和 URL 列表 我想将标题链接到 URL 以使

  • 在新的 Google 协作平台 <嵌入 HTML> 中使用 localStorage 和 IndexedDB 不起作用

    我正在尝试将新的 Google 协作平台用于我开发的网页 但是 我在存储本地数据时遇到了问题 本地文件在 Windows 和 Apple safari chrome 中运行良好 从 Google 协作平台尝试一下 没有什么乐趣 此外 在 s

  • Chrome 中的性能问题

    我目前正在从事一个相对较大的项目 使用 AngularJs 构建 应用程序的一部分是一个表单 您可以向其中添加任意数量的页面 不幸的是 添加了很多不必要的垃圾 即表示表单模型的对象可能会变得非常大 在某些时候 Chrome 基本上无法处理它

  • 如何更改 Google Maps v3 API for Directions 中的开始和结束标记图像

    我使用 DirectionsRender 绘制了一条路线 但我不知道如何用我自己的标记替换通用的 Google 标记 我知道并在正常的谷歌地图情况下使用它 但发现很难用开始和结束的方向标记来做到这一点 如果这是一个愚蠢的问题 感谢您的任何建

  • 可以在初始 DOM 解析期间/之前修改 DOM 吗？

    是否可以在初始 DOM 解析期间或之前修改 DOM 或者我是否必须等到 DOM 被解析和构建之后才能与其交互 更具体地说 是否有可能阻止 DOM 中的脚本元素使用用户脚本 内容脚本或 Chrome 或 Firefox 中的类似脚本运行 在解

  • 磁模拟

    假设我在 n m 像素的 2D 表面上有 p 个节点 我希望这些节点相互吸引 使得它们相距越远吸引力就越强 但是 如果两个节点之间的距离 比如 d A B 小于某个阈值 比如 k 那么它们就会开始排斥 谁能让我开始编写一些关于如何随时间更新

  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我

  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre

  • Chrome 扩展程序在代码中使用 client_secret

    我正在开发具有自己的 oAuth 授权的 Google Chrome 扩展 当然 我必须使用 client id 和 client secret 作为请求令牌 有什么办法可以向用户隐藏这些数据吗 由于此请求只是 javascript 源代码

  • 如何解决 Typescript 构建中的错误“找不到模块 'jquery'”

    我目前在 ts 文件的顶部有这个import require jquery 我这样做是因为我试图在我的打字稿文件中使用 jquery 但我似乎无法编译它 因为它返回标题中所述的错误 我正在使用 ASP NET CORE 脚本文件夹 tsco

  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后

  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov

  • Vuejs 2：去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不

  • 可以设置标题样式吗？ （并且使用CSS或js？）[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点

  • Javascript 假值（null、未定义、false、空字符串：“”或 '' 和 0）和比较（==）运算符 [重复]

    这个问题在这里已经有答案了 当我使用任何一个值时 null undefined false 0 in a if陈述 它总是被评估为谬误 false 另外 这些值的否定 null undefined false 0 in a if语句总是被评

  • Firebase 函数 onWrite 未被调用

    我正在尝试使用 Firebase 函数实现一个触发器 该触发器会复制数据库中的一些数据 我想观看所有添加的内容votes user vote 结构为 我尝试的代码是 const functions require firebase func

  • 如何使用 crypto-js 解密 AES ECB

    我正在尝试将加密数据从 flash 客户端 发送到服务器端的 javascript 在 asp 中作为 jscript 运行 有几个 javascript Aes 库 但它们实际上没有文档记录 我正在尝试使用 crypto js 但无法让代

  • 在 JavaScript 循环之外声明变量可以提高速度和内存？

    C 也有类似的问题 但我们没有看到 JavaScript 的任何问题 在循环内声明变量是否可以接受 假设循环有 200 次迭代 使用样本 2 相对于样本 1 是否有性能要求 内存和速度 我们使用 jQuery 来循环 它提高了我们将 var

  • 从 FileReader 设置背景图像样式

    我正在寻找一种解决方案 允许我从文件上传输入中获取文件并通过设置 document body style backgroundImage 来预览它 以下代码用于在 Image 元素中显示预览 function setImage id tar

  • 如何在执行新操作时取消先前操作的执行？

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro

随机推荐

  • 单元格背景视差就像 iOS7 天气应用程序中一样

    如果您查看 iPhone 上的 iOS 7 天气应用程序 您会发现当您滚动时 UITableViewCells 的背景也会滚动 每个都独立于其余部分 我正在尝试弄清楚它是如何完成的 有任何想法吗 答案是 void scrollTable U

  • Three.js：为 BufferGeometry 设置索引/索引的正确方法？

    我正在尝试在 BufferGeometry 中设置每个面的 UV 索引 我从几何开始 我的几何体的每个面都有一个face materialIndex对应于紫外线指数 我正在尝试将其转换为 BufferGeometry 然后映射到face m

  • 在 SELECT INTO 之前使用 SELECT COUNT(*) 是否比使用异常慢？

    My 最后一个问题 https stackoverflow com questions 18111127 is the use of the returning into clause faster than a separate sele

  • `typedef struct foo {int bar};` 的合法性

    这个问题源于这个问题是一个结构体 类型还是未命名变量 https stackoverflow com questions 31877661 is a struct a type or an unnamed variable 在这个问题中 O

  • 如何计算协方差矩阵

    这个问题似乎令人惊讶地晦涩难懂 我在将其发布到此处之前询问了谷歌 我发现的最接近答案的是 协方差矩阵计算 https stackoverflow com questions 3307082 covariance matrix computa

  • Haxe 编译器可以将任何 C# 代码转换为 Haxe 吗？

    首先 我对 Haxe 非常陌生 所以我在这里问超级菜鸟问题 我有两个问题 1 我的第一个问题是我知道Haxe编译器可以从Haxe转换为任何其他语言 支持 但是它可以将其他语言 支持 的源代码转换为Haxe吗 2 如果它能做到这一点 它的能力

  • 获取切换RadioButton用户值

    在我的javafx项目代码中是这样的 如何获取我需要的radioButton字符串值 但就像那样 我今天点击 输出是打印Today如此 Today 昨天 Duration 如何从这个输出group selectedTogglePropert

  • Django 应用程序是否可以知道用户的 Windows 域名？

    我需要制作一个简单的知识库类型应用程序以在公司内部网络中使用 为了使最终用户使用起来简单快捷 我想部分跳过所有登录 因为它只对我们信任的内部网络用户可见 并自动从用户中提取域用户名并放入它进入数据库 不希望人们浪费时间手动输入他们的名字 他

  • 如何强制win10打开虚拟平板键盘？

    我有一个需要虚拟键盘的应用程序 但是 当我点击我的一些TextBoxes 它们不会使虚拟键盘出现 我尝试过使用这个 System Diagnostics Process Start osk exe 但这会打开另一个键盘 该键盘在TextBo

  • 在 onBackStackChanged() 内调用时，SDK 25.1.0 在 CommitNow 上崩溃。谷歌错误？

    我有一个活动 有 2 个片段FragmentMainOne and FragmentMainTwo每当onBackStackChanged 叫做 public class MainActivity extends AppCompatActi

  • 当小部件包装在 InteractiveViewer 中时，Flutter onPanStart 会延迟调用

    我只有一个简单的容器 其右侧中心有一个调整大小手柄 这意味着可以使用该手柄调整容器的大小 它被包裹在里面InteractiveViewer widget import package flutter material dart import

  • 使用nested_form获取对象值

    我有一个嵌套表单 订单付款 我想在编辑视图中测试嵌套表单 fields for 中的值 但问题是我无法检查每个 我只能这样做 您现在是否可以检查每个 例如 如果我理解这个问题 那么您正在编辑订单并拥有fields for对于付款并想要获取与

  • .c 文件中的 C99 内联函数

    我在 c 中定义了我的函数 没有标头声明 如下所示 inline int func int i return i 1 然后在下面的同一个文件中我使用它 i func i 在链接过程中 我得到了 对 func 的未定义引用 为什么 The i

  • Raspbian 的软浮动版本无法启动

    我在这里下载了 Raspbian 的硬浮动图像 http www raspberrypi org downloads http www raspberrypi org downloads 我将推荐的硬浮动映像复制到 SD 卡上 并且 Ras

  • VSCode 是否应该报告从编译中排除的 TS 文件的错误？

    我提交了这个错误报告 https github com Microsoft vscode issues 53733 issuecomment 403153218使用 VSCode 因为我已经排除了 spec编译中的文件 因为我不想将这些文件

  • 自动任务和静态任务有什么区别，为什么我们不能通过引用传递静态任务

    静态任务和自动任务有什么区别 program class ref int index value class holding values int ass array task assign value int value int inde

  • LinearSVC.coef_ 中的 n_classes 顺序

    我正在与 LinearSVC 合作将文本数据分为 3 类 输入数据是每个单词的 tfidf 分数 我有兴趣了解单词对分类的 贡献 第一个问题是我可以使用 coef 吗 文档指出 coef 数组 形状 n features 如果 n clas

  • 使用 cakephp 获取名称显示在下拉列表中

    我想在下拉列表中显示我们所有项目负责人的姓名 项目负责人只是公司的部分员工 这是我的表格 project leaders id hr employee id 1 18 projects id name project leader id 1

  • R 基本函数根据长度对字符串向量进行排序

    我想知道 R 基础包中是否已经有一个函数可以对字符串向量进行排序 同时考虑每个元素的长度 当然还有字典顺序 例如在一个sort调用一些包含您将拥有的年龄组的向量 v lt c 00 04 05 09 10 14 100 104 105 10

  • Matter.js 用于碰撞检测

    我对在这里提问还比较陌生 所以请耐心等待 我正在尝试使用 Matter js 作为主要物理引擎创建一个自上而下的驾驶游戏 我希望红色汽车与绿色方块相撞 然而 我仍然坚持知道如何在我的游戏中实现 Matter js 任何形式的回应将不胜感激

热门标签