如何解决背景动画不适用于 Chrome,但适用于 Tor 浏览器
我使用 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: " + 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: " + 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。