infinite loop of sprite left right in canvas

Question

I,m trying to make an infinite loop for moving a sprite left and right in a canvas in a game for my son. When the sprites arrives to the x desired I change the frame of the sprite to the left but I don´t know how to move to left again.. I have tried a bucle for, etc.. without results. Any help will be really apreciate. thanks in advance

function loop(){         
     if (game.coin.x < 400){game.coin.row=1; game.coin.x++; }
     if (game.coin.x == 400){game.coin.row=3;game.coin.frames=1;}
     };   loop();

Now works in this way

function myStartFunction() {
  myVar = setTimeout(function(){ game.azul.x+=1; }, 2000);
 if(game.azul.x > 200){myStopFunction();myStartFunctions(); };
}   
function myStartFunctions() {
  myVar = setTimeout(function(){ game.azul.x-=1; }, 2000);
 if(game.azul.x < 30){myStopFunction();};
}
function myStopFunction() {
  clearTimeout(myVar);
}
 myStartFunction(); 

Answer 1

Here is one very simple example:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var speed = 1
var pos = {x: 100, y: 20}

function draw() {  
  ctx.beginPath()
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.arc(pos.x, pos.y, 10, 0, 10);
  ctx.fill();
  
  pos.x += speed
  if (pos.x > 200 || pos.x < 50)
    speed *= -1
}

setInterval(draw, 50);

<canvas id="canvas" width=500></canvas>

When our object hits the boundaries:
if (pos.x > 200 || pos.x < 50)
We just "flip" the speed speed *= -1

---

Here is a slightly more complex example:

• using a class to define our objects
• two objects are drawn a red and blue circle
• click on the canvas will stop blue and click again restarts

class Item {
  constructor(pos, speed, bounds, color) {
    this.pos = pos
    this.color = color;
    this.speed = speed;
    this.bounds = bounds
    this.stopped = false
  }

  draw() {
    this.update()
    ctx.beginPath()
    ctx.fillStyle = this.color;
    ctx.arc(this.pos.x, this.pos.y, 10, 0, 10);
    ctx.fill();
  }

  update() {
    if (!this.stopped) {
      this.pos.x += this.speed
      if (this.pos.x > this.bounds[0] || this.pos.x < this.bounds[1])
        this.speed *= -1
    }
  }
  
  stop() {
    this.stopped = !this.stopped
  }
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  azul.draw();
  rojo.draw();
}

function stop() {
  azul.stop();
}


var canvas = document.getElementById("canvas");
canvas.onclick = stop
var ctx = canvas.getContext("2d");

var azul = new Item({x: 100,  y: 20}, 1, [200, 50], "blue");
var rojo = new Item({x: 80,  y: 100}, 2, [180, 70], "red");


setInterval(draw, 50);

<canvas id="canvas" width=500></canvas>