Как сделать так, чтобы два изображения выходили на выделение?

Question

У меня есть два облака, которые мне нужно переместить, чтобы они проходили по экрану в цикле, но, похоже, только одно облако делает это, и я не могу исправить другое, пожалуйста, помогите.

У меня тоже проблемы со снегопадом. Он начинает исчезать с экрана, как только я начинаю нажимать кнопку. Я знаю, что мой код не так хорош, но если вы сможете помочь мне решить мои ошибки, это очень поможет мне.

var bgImg = [];
var x = 0;
var j = 0;
var treePos = [];
var cloudPos = [];
var treeCnt = 5;
var cloudCnt = 5;
var walkImg = [];
var currWalker = 0;
var bgWalker = 0;
var walkH = 0;
var jumping = 0;
var bombImg, explodeImg; // new image variables
var bombXPos = 0; // location for bomb
var exploded = false;
var expW = 150;
var expH = 150;
var score = 0;
var skyBombsx = [];
var skyBombsy = [];
var skyBombsCnt = 50;
var explodeSound;
var windSound;
var BgmSound;
var walkingSound;
var jumpSound;

var birdImg = [];
var birdCurr = 0;
var birdYPos = 100;
var birdXPos = 100;
var birdVert = true;
var lightningImg = [];
var lightningCurr = 0;
var lightningYPos = 100;
var lightningXPos = 100;
var lightningVert = true;

var bgLast;
var energy = true;
var energyLevel = 10000;

var idleImg = [];
var idleCurr = 0;

var jumpImg = [];
var jumpCurr = 0;

var deadImg = [];
var deadCurr = 0;
var dead = false;

function preload() {
   //bgImg = loadImage('images/bg1.png');
   for(var j=0; j<120; j++) {
        var img = loadImage('images/bgg0' + (j+1) + '.png');
        bgImg[j] = img;
    }
    
    treeImg = loadImage('images/tree.png');
    cloudImg = loadImage('images/cloud.png');

    
    for(var i=0; i<10; i++) {
        var img = loadImage('images/fly/Layer ' + (i+1) + '.png');
        walkImg[i] = img;
    }
    
    for(var i=0; i<23; i++) {
        var img = loadImage('images/idle/Layer ' + (i+1) + '.png');
        idleImg[i] = img;
    }
    
    for(var i=0; i<20; i++) {
        var img = loadImage('images/shoot/Layer ' + (i+1) + '.png');
        jumpImg[i] = img;
    }
    
        for(var i=0; i<5; i++) {
        var img = loadImage('images/dead/Layer ' + (i+1) + '.png');
        deadImg[i] = img;
    }
    bombImg = loadImage('images/snow.png'); // load new images
    explodeImg = loadImage('images/explode.png');
    fliesImg = loadImage('images/flies.png');
    explodeSound = loadSound('audio/fly.wav');
    windSound = loadSound('audio/wind.mp3');
    windSound.playMode = 'sustain';
    BgmSound = loadSound('audio/bgm.wav');
    BgmSound.playMode = 'sustain';
    walkingSound = loadSound('audio/flapping.wav');
    walkingSound.playMode = 'sustain';
    jumpSound = loadSound('audio/canary.wav');
        for(var i=0; i<4;i++){
        var img = loadImage('images/bat/b' + (i+1) + '.png');
        birdImg[i] = img;
    }
    for(var i=0; i<9;i++){
        var img = loadImage('images/bat/l' + (i+1) + '.png');
        lightningImg[i] = img;
    }
}

function setup() {
    createCanvas(window.innerWidth, window.innerHeight); // 935 x 762
    for (var i=0; i<treeCnt; i++) {
        treePos[i] = random(200) + 300 * i;
    }
    for (var i=0; i<cloudCnt; i++) {
        cloudPos[i] = random(400) + 500 * i;
    }
    bombXPos = width + random(200); // randomise bomb location
    textSize(32);
    
    for (var i=0; i<skyBombsCnt; i++){
        skyBombsx[i] = random(window.innerWidth);
        skyBombsx[i] = random(window.innerWidth);
        skyBombsx[i] = random(window.innerWidth);
        skyBombsy[i] = 400 - 40 - random(window.innerHeight);
    }
    
}

function draw() {
        energyLevel--;
    if(!windSound.isPlaying()){
        windSound.play();
    }
    if(!BgmSound.isPlaying()){
        BgmSound.play();
    }
    //background(255);
    image(bgImg[bgWalker], 0, 0, window.innerWidth, window.innerHeight);
if (frameCount % 4 === 0) { // walk
        bgWalker = (bgWalker + 1) % 120;
    }
    scroll();
    bird();
    lightning();

    if(dead){
        console.log("dead");
        image(deadImg[deadCurr], width/2 - 100, 700 - walkH, 220, 180);
        if(deadCurr < 8){
            deadCurr++;
        }else{
            deadCurr = 0;
        }
    } else{
    walk();
    jump();
         if(bgLast == x){
            image(idleImg[idleCurr], width/2 - 100, 700 - walkH, 220, 180);
            if(idleCurr < 8){
                idleCurr++;
            }else{
                idleCurr = 0;
            }
        }
        else if(jumping == 1){
            if(jumpCurr < 9){
                image(jumpImg[jumpCurr], width/2 - 37, 560 - walkH);
                jumpCurr++;
                if(jumpCurr == 9){
                    jumpCurr = 0;
                }
            }
        }
        else{ 
    image(walkImg[currWalker], width/2 - 37, 560 - walkH);
        }
    bombsFall();
    collideCheck();
    //redraw the walker charracter
    
    }
    // draw bomb or explosion
    if (exploded === true) {
        image(explodeImg, width/2 - expW/2, 700 - expH/2, expW, expH);
        if (expW > 1) {
            expW--;
            expH--;
        }
    } else {
        image(fliesImg, bombXPos, 580, 50, 50);
    }
    // show score
    text("Score " + score, 10, 30);
    if(energyLevel > 0){
            text("Energy: " + energyLevel, 200, 30);
            fill(255, 255, 0);
        }else{
            text("Energy: Depleted", 200, 30);
            fill(255, 0, 0);
        }
        
        if(energyLevel == 0 && !dead) {
            console.log("first dead");
            dead = true;
        }
}

function scroll() {
    //image(bgImg[j], x, 0);
    image(bgImg[j], x + bgImg[j], 0);
    /// update tree positions
    for (var i=0; i<treeCnt; i++) {
        image(treeImg, treePos[i], 583, 150, 80);
    }
    
     for (var i=0; i<treeCnt; i++) {
        image(cloudImg, cloudPos[i], 683, 150, 80);
    }
}

function bird() {
    if(birdYPos < 200 && birdVert == true){
        birdYPos++;
        if(birdYPos == innerWidth){
            birdVert = false;
        }
    }
    if(birdVert == false){
        if(birdYPos > 0){
            birdYPos-=2;
        }else{
            birdVert = true;
        }
    }
    if(bgLast == x){
        birdXPos++;
        if(birdXPos > width + 200){
            birdXPos = -100;
        }
    }
    
    image(birdImg[birdCurr], birdXPos, birdYPos, 100, 100);
    if(birdCurr < 3) {
        birdCurr++;
    }else{
        birdCurr = 0;
    }
}
    
function lightning() {

    
    if(lightningYPos < 200 && lightningVert == true){
        lightningYPos++;
        if(lightningYPos == 200){
            lightningVert = false;
        }
    }
    if(lightningVert == false){
        if(lightningYPos > 0){
            lightningYPos-=1;
        }else{
            lightningVert = true;
        }
    }
    if(bgLast == x){
        lightningXPos++;
        if(lightningXPos > width + 200){
            lightningXPos = -100;
        }
    }
    
        image(lightningImg[lightningCurr], 500, 100, 100, 100);
    if(lightningCurr < 3) {
        lightningCurr++;
    }else{
        lightningCurr = 0;
    }
    
}


function walk() {
  if (keyIsDown(RIGHT_ARROW)) { // walk?
    if (keyIsDown(SHIFT) && energy) {
        x -= 6;
        energyLevel-=60;
        //if(!runningSound.isPlaying()){
        //    runningSound.play();
        //}
        birdXPos-=2;
    }
           
      if (x > -width) {
        x -= 4;
        energyLevel-=2;
        if(!walkingSound.isPlaying()){
            walkingSound.play();
        }
    } else x = 0;
      for (var i=0; i<treeCnt && i<cloudCnt; i++) {
             if (keyIsDown(SHIFT)){
          treePos[i] -= 6;
        cloudPos[i] -= 6; }
          else{
        treePos[i] -= 3;
        cloudPos[i] = -3;// scroll left// scroll left
          }
            if (treePos[i] < -300 && cloudPos[i] < -300) { // reposition the tree
                treePos[i] = width + random(300);
                cloudPos[i] = width + random(100);
        }
    }
    if (frameCount % 5 === 0) { // walk
        currWalker = (currWalker + 1) % 10;
    }
        
    //update falling bombs positions
    for(var i=0; i<skyBombsCnt;i++){
        skyBombsx[i] -= 6;
    }
    // update bomb position
    bombXPos -= 6;
    if (bombXPos < -40) {
        bombXPos = width + random(window.innerWidth); // update pos
        expW = 150;
        expH = 150;
        exploded = true;
        score++;
    }
  }
}

function jump() {
    if (keyIsDown(UP_ARROW) && jumping === 0) { // jump?
        jumping = 1;
        if(!jumpSound.isPlaying()){
            jumpSound.play();
        }
    }
    switch(jumping) {
        case 1: // up
            if (walkH < 70) { walkH += 2;
            } else { jumping = -1;}
            break;
        case -1: // down
            if (walkH > 0) { walkH -= 2;
            } else { jumping = 0;}
            break;
    }
}

function collideCheck() {
    if (bombXPos < width/2 + 10 && bombXPos > width/2 - 10 && jumping === 0) {
        exploded = true;
        score = 1;
        explodeSound.play();
    }
}

function bombsFall() { //makes bombs fall from sky even when no movement
    for (var i=0; i < skyBombsCnt; i++) {
        image(bombImg, skyBombsx[i], skyBombsy[i], 30, 30);
        skyBombsy[i] += 3;
        if(skyBombsy[i] > window.innerWidth){
            
        }
        if(skyBombsy[i] > 400 + 100){
            skyBombsy[i] = -200;
            skyBombsx[i] = random(window.innerWidth);
        }
    }
}