背景动画不适用于 Chrome，但适用于 Tor 浏览器

Question

我使用 js css ad html 创建了一个游戏，它在桌面上运行很酷，但背景动画不起作用，如果运行正常，应该从右向左无限次移动。 有人可以帮助我的响应能力。我尝试过 webkit、moz 等，当我点击播放按钮时，背景仍然变成白色。我的游戏链接是 impnotes.epizy.com

//varibale declaration
var lives = 0;
var totalScore = 0;
var mask = document.getElementById("reward");
var bg = document.getElementById("bg");
var score = document.getElementById("sc");
var jumper = document.getElementById("box")
var obstacle = document.getElementById("hurdle");
//this will create a jump function which adds jump animation
//class to the jumper div and will remove it after 700ms or 0.7s
function jump() {
    jumper.classList.add("jump");
    setTimeout(() => {
        jumper.classList.remove("jump");
    }, 1000);
}
//this will wait for a keypress and if the key is pressed
//it will check wether the div has jump animation or not
//if not then it will add jump animation
document.addEventListener("keypress", () => {
    if (!jumper.classList.contains("jump")) {
        jump();
    }
});
//it will check wether jumper and obstacle are colliding
//if yes then it will stop the game and will show the
//final score
setInterval(() => {
    var jumperLoc =
        parseInt(window.getComputedStyle(jumper)
            .getPropertyValue("bottom"));
    var obstacleLoc =
        parseInt(window.getComputedStyle(obstacle)
            .getPropertyValue("left"));
    /*var maskLoc =
        parseInt(window.getComputedStyle(mask)
            .getPropertyValue("left"));*/

    if (jumperLoc < 50 && obstacleLoc < 140 && obstacleLoc > 2){
        if (lives<1){
            obstacle.classList.remove("move");
            stop();
            bg.classList.remove("bganim");
            pause.style.display = "none";
            play.style.display = "block";
            score.innerHTML = "Score: " + totalScore + "<br>Game Over";
        }}
       /* else{
            lives=0;
        }
    }
    if (maskLoc < 140) {
        lives = 1;
        mask.style.display = "none";
        console.log(lives);
    }*/
},50);
//score
var interval = null;
function incre() {
    interval = setInterval(() => {
        totalScore = totalScore + 10;
        score.innerHTML = "Score:&nbsp;" + totalScore;
       /* //mask
        if (totalScore == 10) {
            mask.classList.add("maskMove");
        }
       /* if(totalScore==40){
            lives=0;
            console.log(lives +"left");
        }*/
    }, 2000);
}
//stop score incrementing
function stop() {
    clearInterval(interval);
}
//play and pause
var play = document.getElementById("play");
var pause = document.getElementById("pause");
play.addEventListener('click', function () {
    play.style.display = "none";
    pause.style.display = "block";
    bg.classList.add("bganim");
    obstacle.classList.add("move");
    totalScore = 0;
    score.innerHTML = "Score:&nbsp;" + totalScore;
    incre();
})
pause.addEventListener('click', function () {
    pause.style.display = "none";
    play.style.display = "block";
    obstacle.classList.remove("move");
    bg.classList.remove("bganim");
    stop();
})

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cont {
  width: 800px;
  height: 300px;
  border: 2px solid black;
  background-image: url("city.jpg");
  background-size: 800px 330px;
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  background-position: 0px 0px;
}

.bganim {
  -webkit-animation: bgmove 3s linear infinite;
  animation: bgmove 3s linear infinite;
}

@-webkit-keyframes bgmove {
  0% {
    -webkit-background-position: 0px 0px;
  }
  100% {
    -webkit-background-position: -800px 0px;
  }
}

@keyframes bgmove {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: -800px 0px;
  }
}

.jumper {
  width: 90px;
  height: 100px;
  background-image: url("man.png");
  background-size: 90px 100px;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  left: 50px;
}

.jump {
  animation: jump 1s linear;
  animation-timing-function: ease-in-out;
}

@keyframes jump {
  0%,
  100% {
    bottom: 0px;
  }
  50%,
  75% {
    bottom: 150px;
  }
}

.obstacle {
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url("corona.png");
  background-size: 60px 60px;
}

.move {
  animation: move 3s linear infinite;
}

@keyframes move {
  0% {
    right: 0px;
  }
  100% {
    right: 850px;
  }
}

.play {
  position: absolute;
  height: 50px;
  width: 50px;
  border: none;
  cursor: pointer;
  top: 0;
  left: 0;
  outline: none;
  background: transparent;
}

#pause {
  display: none;
}

#play {
  display: block;
}

.score {
  height: 50px;
  width: 150px;
  position: absolute;
  text-align: center;
  top: 20px;
  left: 300px;
  font-weight: 700;
  font-size: 23px;
}

.mask {
  width: 70px;
  height: 50px;
  position: absolute;
  border: 1px solid black;
  bottom: 30px;
  right: -70px;
  background-image: url("mask.png");
  background-size: 70px 50px;
}

.maskMove {
  animation: maskMove 1s linear 1;
}

@keyframes maskMove {
  0% {
    right: -70px;
  }
  100% {
    right: 800px;
  }
}

<div id="bg" class="cont" onclick="jump()">
  <div id="box" class="jumper"></div>
  <div id="hurdle" class="obstacle"></div>
  <div class="mask" id="reward"></div>
  <button class="play">
    <i id="play" class="fa fa-play fa-2x"></i>
    <i id="pause" class="fa fa-pause fa-2x "></i>   
  </button>
  <div id="sc" class="score">
    Score:0
  </div>
</div>