Javascript 使画布文本对象相互反弹并由数组创建

我最近开始在一个网站上工作，学习HTML/CCS/JS，我发现我不知道如何执行。基本上，我希望当前移动并从窗口边框反弹的浮动文本也能相互反弹。我还认为数组可以设置要生成多少文本对象。这里是我的网站，以供参考的文字如何反弹

下面是控制文本对象和颜色的JavaScript

setInterval（函数（）{
myContainer=document.getElementById（“colortext”）；
displayRandomColor（）；
函数getRandomColor（）{
r=数学地板（数学随机（）*256）；
g=数学地板（数学随机（）*256）；
b=数学地板（数学随机（）*256）；
hexR=r.toString（16）；
hexG=g.toString（16）；
hexB=b.toString（16）；
如果（hexR.length==1）{
hexR=“0”+hexR；
}
如果（hexG.length==1）{
hexG=“0”+hexG；
}
如果（hexB.length==1）{
hexB=“0”+hexB；
}
hexColor=“#”+hexR+hexG+hexB；
返回hexColor.toUpperCase（）；
}
函数displayRandomColor（）{
myRandomColor=getRandomColor（）；
}
}, 450);
myRandomColor=000000；
var语境；
var x=Math.floor（Math.random（）*window.outerWidth）；
var y=Math.floor（Math.random（）*window.outerHeight）；
var x1=Math.floor（Math.random（）*window.outerWidth）；
var y1=Math.floor（Math.random（）*window.outerHeight）；
var x2=Math.floor（Math.random（）*window.outerWidth）；
var y2=Math.floor（Math.random（）*window.outerHeight）；
var x3=Math.floor（Math.random（）*window.outerWidth）；
var y3=Math.floor（Math.random（）*window.outerHeight）；
var x4=Math.floor（Math.random（）*window.outerWidth）；
var y4=Math.floor（Math.random（）*window.outerHeight）；
var x5=Math.floor（Math.random（）*window.outerWidth）；
var y5=Math.floor（Math.random（）*window.outerHeight）；
var x6=Math.floor（Math.random（）*window.outerWidth）；
var y6=Math.floor（Math.random（）*window.outerHeight）；
var x7=Math.floor（Math.random（）*window.outerWidth）；
var y7=Math.floor（Math.random（）*window.outerHeight）；
var x8=Math.floor（Math.random（）*window.outerWidth）；
var y8=Math.floor（Math.random（）*window.outerHeight）；
var x9=Math.floor（Math.random（）*window.outerWidth）；
var y9=Math.floor（Math.random（）*window.outerHeight）；
var dx=Math.floor（Math.random（）*15）；
var dy=Math.floor（Math.random（）*15）；
var dx1=Math.floor（Math.random（）*15）；
var dy1=数学地板（数学随机（）*15）；
var dx2=Math.floor（Math.random（）*15）；
var dy2=数学地板（数学随机（）*15）；
var dx3=数学地板（数学随机（）*15）；
var dy3=数学地板（数学随机（）*15）；
var dx4=数学地板（数学随机（）*15）；
var dy4=数学地板（数学随机（）*15）；
var dx5=Math.floor（Math.random（）*15）；
var dy5=数学地板（数学随机（）*15）；
var dx6=数学地板（数学随机（）*15）；
var dy6=数学地板（数学随机（）*15）；
var dx7=数学地板（数学随机（）*15）；
var dy7=数学地板（数学随机（）*15）；
var dx8=数学地板（数学随机（）*15）；
var dy8=数学地板（数学随机（）*15）；
var dx9=Math.floor（Math.random（）*15）；
var dy9=数学地板（数学随机（）*15）；
函数init（）{
context=myCanvas.getContext（'2d'）；
设置间隔（抽签，10）；
}
函数绘图（）{
clearRect（0,0，window.outerWidth，window.outerwight）；
context.beginPath（）；
context.fillStyle=myRandomColor；
context.font=“64px fixedsys”；
上下文。填充文本（“书呆子”，x，y）；
closePath（）；
context.beginPath（）；
context.fillStyle=myRandomColor；
context.font=“64px fixedsys”；
上下文。填充文本（“书呆子”，x1，y1）；
closePath（）；
context.fill（）；
context.beginPath（）；
context.fillStyle=myRandomColor；
context.font=“64px fixedsys”；
上下文。填充文本（“书呆子”，x2，y2）；
closePath（）；
context.beginPath（）；
context.fillStyle=myRandomColor；
context.font=“64px fixedsys”；
上下文。填充文本（“书呆子”，x3，y3）；
closePath（）；
context.beginPath（）；
context.fillStyle=myRandomColor；
context.font=“64px fixedsys”；
上下文。填充文本（“书呆子”，x4，y4）；
closePath（）；
context.fill（）；
context.beginPath（）；
context.fillStyle=myRandomColor；
context.font=“64px fixedsys”；
填充文本（“书呆子”，x5，y5）；
closePath（）；
context.beginPath（）；
context.fillStyle=myRandomColor；
context.font=“64px fixedsys”；
填充文本（“书呆子”，x6，y6）；
closePath（）；
context.beginPath（）；
context.fillStyle=myRandomColor；
context.font=“64px fixedsys”；
填充文本（“书呆子”，x7，y7）；
closePath（）；
context.fill（）；
context.beginPath（）；
context.fillStyle=myRandomColor；
context.font=“64px fixedsys”；
填充文本（“书呆子”，x8，y8）；
closePath（）；
context.beginPath（）；
context.fillStyle=myRandomColor；
context.font=“64px fixedsys”；
填充文本（“书呆子”，x9，y9）；
closePath（）；
如果（x<0 | | x>window.outerWidth）dx=-dx；
如果（y<0 | | y>window.outerHeight）dy=-dy；
x+=dx；
y+=dy；
如果（x1<0 | | x1>window.outerWidth）dx1=-dx1；
如果（y1<0 | | y1>window.outerHeight）dy1=-dy1；
x1+=dx1；
y1+=dy1；
如果（x2<0 | | x2>window.outerWidth）dx2=-dx2；
如果（y2<0 | | y2>window.outerHeight）dy2=-dy2；
x2+=dx2；
y2+=dy2；
如果（x3<0 | | x3>window.outerWidth）dx3=-dx3；
如果（y3<0 | | y3>window.outerHeight）dy3=-dy3；
x3+=dx3；
y3+=dy3；
如果（x4<0 | | x4>window.outerWidth）dx4=-dx4；
如果（y4<0 | | y4>window.outerHeight）dy4=-dy4；
x4+=dx4；
y4+=dy4；
如果（x5<0 | | x5>window.outerWidth）dx5=-dx5；
if（y5<0 | | y5>window.outerHeight）dy5=-dy5；
x5+=dx5；
y5+=dy5；
如果（x6<0 | | x6>window.outerWidth）dx6=-dx6；
if（y6<0 | | y6>window.outerHeight）dy6=-dy6；
x6+=dx6；
y6+=dy6；
如果（x7<0 | | x7>window.outerWidth）dx7=-dx7；
如果（y7<0 | | y7>window.outerHeight）dy7=-dy7；
x7+=dx7；
y7+=dy7；
如果（x8<0 | | x8>window.outerWidth）dx8=-dx8；
如果（y8<0 | | y8
function textObject(color, width, height){

    this.color = color;
    this.x = Math.floor(Math.random()*width);
    this.y = Math.floor(Math.random()*height);
    this.dx = Math.floor(Math.random()*15);
    this.dy = Math.floor(Math.random()*15);

    this.show = function(context){
        context.beginPath();
        context.fillStyle = this.color;
        context.font = "64px fixedsys";
        context.fillText("nerd", this.x, this.y);
        context.closePath();
    }

    this.move = function(){
        this.x += dx;
        this.y += dy;
    }
}

var words = [];
for(var i=0; i<10; i++){
    words.push(new textObject(getRandomColor(), window.outerWidth, window.outerHeight));
}

function collisionDetection(arr){

    //checking for collision with the window boundaries
    for(var i=0; i<arr.length; i++){
        if(arr[i].x<0 || arr[i].x>window.outerWidth){
            arr[i].dx = - arr[i].dx;
        }
        if(arr[i].y<0 || arr[i].y>window.outerHeight){
            arr[i].dy = -arr[i].dy;
        }
    }
}

function draw(){

    context.clearRect(0, 0, window.outerWidth, window.outerHeight);
    for(var i=0; i<words.length; i++){
        words[i].show(context);
        words[i].move();
    }
    collisionDetection();
}

for(i=0; i<arr.length; i++){
    for(var j=0; j<arr.length; j++){
        if(i!=j){
            if(Math.abs(arr[i].x-arr[j].x) <= length){
                arr[i].dx = -arr[i].dx;
                arr[j].dx = -arr[j].dx;
            }
            if(Math.abs(arr[i].y-arr[j].y) <= height){
                arr[i].dy = -arr[i].dy;
                arr[j].dy = -arr[j].dy;
            }
        }
    }
}

var box = {x: 0, y: 0, width: 10, height: 10, dx: 1, dy: 1};
boxes.push(box);

for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  // Do something with the i-th box...
}