如何让两个不同的文本元素在Javascript页面上随机移动

所以我一直在读这篇文章，我发现它最接近我想要的。基本上，我想要两个不同的文本元素，两个不同的单词在页面上随机移动，当它们接触时也会相互反弹

我试图编辑代码，使其为黑色，只有一个文本元素。然而，我怎样才能同时包含第二个文本元素和另一个随机移动的单词呢

另外，我如何将其更改为Roboto Mono字体

//返回随机RGB颜色字符串： 函数随机颜色{ var hex=Math.floorMath.random*0x1000000.toString 16； 返回+000000+hex.0； } //时间步长dt的穷人盒子物理更新： 功能DopPhysisBox，宽度，高度，dt{ 对于let i=0；iwidth，则为else{ box.x=宽度-box.width； box.dx=-box.dx； } 如果box.y<0{ 方框y=0； box.dy=-box.dy； }否则，如果box.y+box.height>height{ box.y=高度-box.height； box.dy=-box.dy； } } //处理长方体碰撞： 对于let i=0；ibox2.x==box1.dxbox2.y==box1.dy多个文本框很容易：

将初始化框零件更改为包含多个

// Initialize random boxes:
var boxes = [];
var boxCount = 2
for (var i = 0; i < boxCount; i++) { 

我不认为roboto在canvas元素中可用。我可能错了 不过，monospace是可用的

编辑

如果需要不同的单词，可以使用另一个数组：

var words = ['motion','designer']
for (var i = 0; i < words.length; i++) {

有关用法，请参见代码段：

//返回随机RGB颜色字符串： 函数随机颜色{ var hex=Math.floorMath.random*0x1000000.toString 16； 返回+000000+hex.substrhex.length； } //时间步长dt的穷人盒子物理更新： 功能DopPhysisBox，宽度，高度，dt{ 对于let i=0；iwidth，则为else{ box.x=宽度-box.width； box.dx=-box.dx； } 如果box.y<0{ 方框y=0； box.dy=-box.dy； }否则，如果box.y+box.height>height{ box.y=高度-box.height； box.dy=-box.dy； } } //处理长方体碰撞： 对于let i=0；ibox2.x==box1.dxbox2.y==box1.dy非常感谢你的帮助，离我想要的已经很近了。。然而，我怎么能有两个不同的词“运动”和“设计师”？有时它们在代码中也会重叠

var words = ['motion','designer']
for (var i = 0; i < words.length; i++) {

box.width = context.measureText(words[i]).width;