Estoy haciendo un pequeño sitio web de desplazamiento lateral. Quiero usar un png como 3 elementos en los que se puede hacer clic en el mapa, cada uno de los cuales activa un modal, pero antes de eso estoy tratando de hacer que se desplacen junto con el objeto de fondo y supongo que no entiendo cómo calcular sus límites y qué pasar a la función.

Mi idea aproximada para la lógica de límite de flecha derecha

Y mi tiro en la oscuridad (tratando de seguir el método que usé para desplazar el fondo):

 class ClickSign { constructor(Background, gameWidth, position, modalId) { this.image = document.getElementById('clickImage'); this.bgWidth = Background.width; // Canvas width this.gameWidth = gameWidth; this.position = position; this.modal = document.getElementById(modalId); this.xi = this.position.x; this.width = 43; this.height = 39; this.speed = 5; } // Draw sprite on canvas draw(context) { context.drawImage(this.image, this.position.x, this.position.y, this.width, this.height); } update(input) { clickSign1.draw(ctx); // === MOVEMENT === // If left key && x is less than ??? if (input.keys.indexOf('ArrowLeft') != -1 && this.position.x < this.bgWidth - (this.gameWidth - this.xi)) { this.position.x += this.speed; } if (input.keys.indexOf('ArrowRight') != -1 && this.position.x > this.xi - this.gameWidth) { this.position.x -= this.speed; } } const clickSign1 = new ClickSign(background, canvas.width, {x: 958, y: 364}, "WelcomeModal");