如何使 Matter.js 的最小示例工作?

2023-11-22

我正在尝试使用Matter.js 物理库。我正在使用他们的“入门”教程,但找不到画布。

这是我的html:

<html>
<head>
<meta charset="UTF-8">
<title>Physics test</title>
</head>
<script type="text/javascript" src="./lib/matter-0.8.0.js"></script>
<script type="text/javascript">
// Matter.js module aliases
var Engine = Matter.Engine,
    World = Matter.World,
    Bodies = Matter.Bodies;

// create a Matter.js engine
var engine = Engine.create(document.body);

// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

// add all of the bodies to the world
World.add(engine.world, [boxA, boxB, ground]);

// run the engine
Engine.run(engine);
</script>
<body>
</body>
</html>

控制台显示以下错误:

" [Matter] warn: No "render.element" passed, "render.canvas" was not inserted into document."

我尝试创建 render.element 和 render.canvas,但我是盲目行动。一个“让您入门的最小示例”应该已经可以工作了。我究竟做错了什么?


通过部分演示,我发现大部分代码应该在一个函数中,在页面加载中调用,例如:

<body onload='Start()'>

and

function Start() {
    // create a Matter.js engine
    var engine = Engine.create(document.getElementById('canvas-container'));

    // create two boxes and a ground
    var boxA = Bodies.rectangle(400, 200, 80, 80);
    var boxB = Bodies.rectangle(450, 50, 80, 80);
    var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

    // add all of the bodies to the world
    World.add(engine.world, [boxA, boxB, ground]);

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

如何使 Matter.js 的最小示例工作? 的相关文章

随机推荐

  • 将字节数组转换为 int 的更快方法

    有没有比更快的方法BitConverter ToInt32将字节数组转换为 int 值 我实际上尝试了几种不同的方法将四个字节转换为 int BitConverter ToInt32 new byte w x y z 0 BitConver
  • ffmpeg av libs 可以返回准确的 PTS 吗?

    我正在使用使用 IBBP GOP 序列的 mpeg 流 这 DTS PTS 前 4 个 AVPacket 返回的值如下 I 0 3 B 1 1 B 2 2 P 3 6 I 帧上的 PTS 看起来是合法的 但 B 帧上的 PTS 不可能是正确
  • Python错误:“NoneType”对象没有属性“find_all”

    我正在改编一个网络抓取程序 http danielfrg com blog 2013 04 01 nba scraping data disqus thread 将 ESPN 的棒球数据抓取到 CSV 中 但是 当我运行第二段代码来编写游戏
  • 带有符号链接的 mod_xsendfile

    我在 Rails 3 应用程序中使用 xsendfile 时遇到问题 我使用 capistrano 来管理部署 在每个版本中 都有一个指向共享 资产目录的符号链接 例如 var www site releases 1234 assets g
  • 部署应用程序引擎应用程序时如何处理敏感配置信息?

    示例 我有一个应用程序需要访问提供身份验证令牌的 API myApi MyApi token my private sensible token 我想避免在属于项目一部分的配置文件中包含该私有令牌 我想到的一个解决方案是在一个单独的代理应用
  • 当Java自动更新时更新Windows路径变量?

    这个问题询问如何在 Windows 中设置路径变量以包含 Java bin 目录 从而允许您在提示符下使用 javac 命令 针对此问题发布的解决方案指出您应该对最新 Java 安装的绝对路径进行硬编码 在这种情况下 它恰好是c progr
  • 如何在不同的包中使用两个同名的类? [复制]

    这个问题在这里已经有答案了 如何访问不同包中具有相同名称的两个类 foo bar myClass class and foo myClass class 所有这些都在同一个班级中 TestRunner Suite class SuiteTe
  • 使用 pgAdmin 进行远程 PostgreSQL 连接

    我正在尝试通过基于 Ubuntu 16 04 的服务器上运行的 PostgreSQL 建立远程连接 到目前为止 当我单击 pgAdmin 上的 保存 按钮时 它有点冻结 什么也不做 输入 manage py runserver My dro
  • 处理 BeautifulSoup CSS 选择器中的冒号

    输入 HTML div style display flex div class half style font size 6 width 33 apple div div class half style font size 6 text
  • iOS Swift,Enum CaseIterable 扩展

    我正在尝试为枚举编写一个扩展CaseIterable这样我就可以获得原始值的数组而不是案例 但我并不完全确定如何做到这一点 extension CaseIterable static var allValues String get ret
  • Parcelable 中的 Parcel 读/写操作时变量顺序是否重要?

    我有以下实现Parcelable class public class DemoModel implements Parcelable private String para1 private int para2 public DemoMo
  • 在 T-SQL 中使用环境变量

    如何在 T SQL 脚本中读取系统环境变量的值 这是在 SQL Server 2005 上运行 要 读取 T SQL 脚本中系统环境变量的值 您可以将 SQL Management Studio 设置为使用 sqlcmd 模式 然后你可以像
  • Shell脚本:如何删除目录中除文件中列出的文件之外的所有文件?

    我有一个目录 temp 包含许多文件和子目录 并且在某些目录中 可能还包含其他文件和子目录 另外 在目录 temp 它包含一个特殊的txt文件 名为kept txt 它列出了其中包含的一些直接文件和子目录 temp 现在我想删除下面的所有其
  • Rails 4 中的左外连接

    我有3个型号 class Student lt ActiveRecord Base has many student enrollments dependent destroy has many courses through studen
  • 自引用外键约束和删除

    在 SQL Server 中处理自引用外键约束的推荐方法是什么 桌子型号 fiData引用 tabData 中的先前记录 如果我删除引用的记录fiData 数据库抛出异常 DELETE 语句与 SAME TABLE REFERENCE 冲突
  • 在边框半径图像背景上添加边框渗透

    我在蓝色背景的图像上添加黑色边框 这样做时 似乎在边框内部添加了非常明显的背景彩色轮廓 有办法摆脱这个吗 我使用的代码很简单 border radius 100 border 3px solid rgb 0 0 0 您可以通过向任何图像添加
  • 如何让匿名用户编辑 Google Drive Realtime 文档?

    我想创建一个网页 使用Google 云端硬盘实时 API允许用户匿名编辑多个文本字段 由于可能有多个用户同时访问该页面 因此我想防止某人的编辑被另一个用户覆盖 而第一个编辑者不知道他的编辑已被覆盖 然而 从快速开始 似乎需要使用 Googl
  • 如何在pandas中按列表删除行[重复]

    这个问题在这里已经有答案了 现在我有数据框和列表 A B 1 a 2 b 3 c 4 d 5 e list a b c 我想通过 df B 引用列表来删除行 我想在下面 df A B 4 d 5 e 我怎样才能得到这个结果 您可以使用isi
  • imghdr / python - 无法检测某些图像的类型(图像扩展)

    我正在使用 Python 脚本从 imgur com 下载大量图像 因为我拥有该格式的所有链接http imgur com id 我必须通过将原始网址替换为来强制下载它们http i imgur com id gif 然后保存所有图像 不带
  • 如何使 Matter.js 的最小示例工作?

    我正在尝试使用Matter js 物理库 我正在使用他们的 入门 教程 但找不到画布 这是我的html