Necesito ayuda con este, necesito mover rectángulos en diferentes direcciones
Los rectángulos tienen un ancho y/o alto máximo de 90 píxeles
Los rectángulos tienen un ancho y/o alto mínimo de 45 píxeles
Los puntos de generación 0 y 3 tienen un valor X de ¼ del ancho del lienzo
Los puntos de generación 1 y 2 tienen un valor X de ¾ del ancho del lienzo
Los puntos de generación 0 y 1 tienen un valor Y de ¼ de la altura del lienzo
Los puntos de generación 2 y 3 tienen un valor Y de ¾ de la altura del lienzo
window.onload = function() { var canvas = document.getElementById("canvasId") var ctx = canvas.getContext("2d") var width = canvas.width = window.innerWidth var height = canvas.height = window.innerHeight var particle = { x: 200, y: 150, r: 90, create: function(x, y, r, dx, dy) { var obj = Object.create(this) obj.x = x obj.y = y obj.r = r obj.dx = dx obj.dy = dy obj.c = getRandomColor(), obj.g = 0.4 return obj }, move: function() { this.x -= this.dx this.y -= this.dy if (this.x + this.r > width || this.x - this.r < 0) { this.dx = this.dx * -1 } if (this.y + this.r > height || this.y - this.r < 0) { this.dy = this.dy * -1 } } } function randomSign() { return Math.random() < 0.5 ? -1 : 1 } var p = [] const numParticles = 1 for (let i = 0; i < numParticles; i++) { p[i] = particle.create( width / 2, height / 2, Math.random() * 25 + 5, Math.random() * 15 * 2, Math.random() * 15 * -1 ) } update(); function random(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } function update() { ctx.clearRect(0, 0, width, height) for (let i = 0; i < numParticles; i++) { ctx.beginPath() // arc(x, y, radius, startAngle, endAngle, clockwise) ctx.rect(p[i].x - 220, p[i].y, p[i].r * 9, 200, 150) ctx.rect(p[i].x - 220, p[i].y - 500, p[i].r * 6, 200, 150) ctx.rect(p[i].x + 150, p[i].y - 500, p[i].r * 6, 200, 150) ctx.rect(p[i].x + 150, p[i].y, p[i].r * 6, 200, 150) ctx.fillStyle = p[i].c ctx.fill() ctx.stroke() ctx.closePath() p[i].move() } requestAnimationFrame(update); } function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } } <canvas id="canvasId"></canvas>Simplifiqué gran parte de su código para enfocarme solo en mover objetos en diferentes direcciones.
En su código tiene una matriz p , para cada uno de ellos dibuja cuatro rectángulos, no estoy seguro de por qué está haciendo eso, parece que debería estar dibujando solo uno, tal vez pueda explicar mejor qué estaba tratando de lograr.
Aquí hay un punto de partida para mover objetos en diferentes direcciones.
var canvas = document.getElementById("canvasId") var ctx = canvas.getContext("2d") class particle { constructor(x, y, dx, dy) { this.x = x this.y = y this.dx = dx this.dy = dy } move() { this.x -= this.dx this.y -= this.dy if (this.x + 20 > canvas.width || this.x < 0) this.dx *= -1 if (this.y + 20 > canvas.height || this.y < 0) this.dy *= -1 ctx.beginPath() ctx.rect(this.x, this.y, 20, 20) ctx.fill() } } var p = [] p.push(new particle(10, 10, -1, 1.5)) p.push(new particle(50, 50, 1, 2)) p.push(new particle(80, 80, 2, -1)) function update() { ctx.clearRect(0, 0, canvas.width, canvas.height) p.forEach((e) => { e.move() }) requestAnimationFrame(update); } update(); <canvas id="canvasId" width=160 height=160></canvas>