I would like to know how to have the background image looping infinitely.

chuckopo

I am creating a top-down 2D infinite side-scrolling runner game. But I am struggling trying to have the background image looping infinitely, I want it to look like the background is moving from top to the bottom. Would anyone know how to do that? I am using javascript by the way.

function gameScreen(){

  var score;
  var samurai;
  var ninjas;
  var planks;
  var backgroundImg;
  var pauseAreaClicked;
  var isPaused;
  var pauseCreated;
  var gameOverCreated;
  var firstRun;

  this.setup = function(){
    createCanvas(windowWidth, windowHeight);
    gameTheme.loop();
    samurai = new Samurai();
    ninjas = [];
    planks = [];
    score = 0;
    bg = bg1;
    //Create the Pause Button
    pauseAreaClicked = false;
    firstRun = true;
    isPaused = false;
    pauseButton = createButton("||");
    pauseButtonCSSSetup(pauseButton, 0.6);
    pauseButton.mousePressed(pauseGame);
  }

  this.keyPressed = function(){
    if(keyCode == RIGHT_ARROW){
      samurai.switchLanes("right");
    }

    else if(keyCode == LEFT_ARROW){
      samurai.switchLanes("left");
    }

    else if(keyCode == UP_ARROW){
      samurai.attack();
    }
  }

  this.reset = function(){
    this.setup();
  }

  this.getScore = function(){
    return score;
  }

  this.draw = function(){
    if(isPaused){
      gameTheme.stop();
      return;
    }

    //Background Setup
    background(bg);

    //Text
    fill(255);
    textAlign(CENTER, CENTER);
    textSize(25);
    text("Score: " + score, windowWidth/2, windowHeight * .05)

    //Watch for framerate
    // var fps = frameRate();
    // stroke(0);
    // text("FPS:" + fps.toFixed(2), windowWidth / 2, height - 20);

    samurai.update();
    samurai.show();

    if(frameCount % 10 == 0){
      samurai.animate();
    }

    //Update enemy position every frame.
    for(var i = ninjas.length - 1; i >= 0; i--){
      ninjas[i].show();
      ninjas[i].update();

      //If enemies go offscreen delete them to free up memory.
      if(ninjas[i].offscreen()){
        ninjas.splice(i, 1);
        if(score > 0)
          score -= ninjas[i].getHealth();
      }

      if(ninjas[i].collision(samurai) && !ninjas[i].isPushed()){
        if(samurai.attacking){
          //Slice sound
          sliceSound.play();

          score++;
          ninjas[i].loseHealth();
          if(ninjas[i].getHealth() >= 1){
            ninjas[i].pushBack();
          }
        }
        else{
          clear();
          removeElements();
          if(gameOverCreated){
            var oOver = this.sceneManager.findScene(gameOverScene).oScene;
            oOver.reset();
          }

          gameOverCreated = true;
          gameTheme.stop();

          this.sceneManager.showScene(gameOverScene);
        }
        if(!ninjas[i].isPushed()){
          ninjas.splice(i, 1);
        }
      }
    }
  }

  this.mousePressed = function(){
    if(!pauseAreaClicked){
      if(mouseX > (windowWidth / 2) * 1.5){
        samurai.switchLanes("right");
      }

      else if(mouseX < (windowWidth / 2) * 0.5){
        samurai.switchLanes("left");
      }

      else{
        samurai.attack();
      }
    }

    else{
      if(isPaused){
        isPaused = false;
      }

      else{
        isPaused = true;
        if(pauseCreated){
          oPause = this.sceneManager.findScene(pauseScreen).oScene;
          oPause.reset();
        }

        pauseCreated = true;
        gameTheme.stop();
        this.sceneManager.showScene(pauseScreen);
      }

      pauseAreaClicked = false;
    }
  }

    /**
      CSS STYLING FOR BUTTONS :D
    */
  function pauseButtonCSSSetup(button, YpositionMultiple){
    button.style("width", "35px");
    button.style("height", "35px");
    button.style("text-align", "center");
    button.style("font-size", "125%");
    button.style("font-weight", "bold")
    button.style("color", "#FFF");
    button.style("background", "00000000");
    button.style("border-radius", "4px");
    button.style("display", "inline-block");
    button.style("border", "none");
    button.style("outline", "none");

    //NOT CSS
    //Center Button
    button.position(windowWidth  >> 6, windowHeight/100);
  }

  function pauseGame(){
    pauseAreaClicked = true;
  }

  this.unpause = function(){
    gameTheme.loop();
    isPaused = false;
  }
}

GoToLoop

http://p5js.ProcessingTogether.com/sp/pad/export/ro.GrwKUsycNrY