为什么我的新if语句破坏了我的函数?

Question

我是javascript新手。我刚刚制作了一款非常简单的游戏，其中一个骑士跳过一块石头，然而，这块石头是一个无限的动画。我试图添加各种岩石速度，但由于某种原因，我的新代码破坏了我的游戏。这是我的完整代码:https://codepen.io/flyingchicken22/pen/BadBLre这是我添加的代码(与我的其他代码片段:CSS:

#rock {
height: 50px;
width: 50px;
position: relative;
top: 122px;
left: 550px;
background-image: url("http://pixelartmaker-data-78746291193.nyc3.digitaloceanspaces.com/image/da268f06e621b21.png");
background-size: cover;
}
.rockAnimationFast {
animation: rockAnimationFast 0.75s linear;
}
.rockAnimationMedium {
animation: rockAnimationMedium 1s linear;
}
.rockAnimationSlow {
animation: rockAnimationSlow 1.5s linear;
}
@keyframes rockAnimationFast {
0%{left: 500px;}
100%{left: -50px;}
}
@keyframes rockAnimationMedium {
0%{left: 500px;}
100%{left: -50px;}
}
@keyframes rockAnimationSlow {
0%{left: 500px;}
100%{left: -50px;}
}

JAVASCRIPT:

function play() {
let dead = false
if (dead==false) {
let falseVar = false
while (falseVar == false) {

console.log("working")
function rockAnimationSlow() {
document.getElementById("rock").classList.add('rockAnimationSlow')
setTimeout(() => {
document.getElementById("rock").classList.remove('rockAnimationSlow')
}, 1500);
}

function rockAnimationMedium() {
let rock = document.getElementById("rock")
rock.classList.add('rockAnimationMedium')
setTimeout(() => {
rock.classList.remove('rockAnimationMedium')
}, 1000);
}

function rockAnimationFast() {
let rock = document.getElementById("rock")
rock.classList.add('rockAnimationFast')
setTimeout(() => {
rock.classList.remove('rockAnimationFast')

}, 750);
}
let randRockSpeed = Math.floor(Math.random() * 10)


if (randRockSpeed <= 3) {
rockAnimationFast()
}

if (randRockSpeed <= 7 && randRockSpeed > 3) {
rockAnimationMedium()

}

if (randRockSpeed <= 10 && randRockSpeed > 7) {
rockAnimationSlow()
}
}
}
}

非常感谢!

Answer 1

破坏代码的不是if语句，而是你的无限while循环(我假设你正在使用它来动画游戏)。然而，动画需要以不同的方式处理，因为无限循环基本上会无限期地阻塞主线程，导致浏览器崩溃。通常使用requestAnimationFrame。下面是它在你的例子中的实际效果:

let dead = false

function update() {
if (dead == false) {
let falseVar = false

console.log("working")
function rockAnimationSlow() {
document.getElementById("rock").classList.add('rockAnimationSlow')
setTimeout(() => {
document.getElementById("rock").classList.remove('rockAnimationSlow')
}, 1500);
}
function rockAnimationMedium() {
let rock = document.getElementById("rock")
rock.classList.add('rockAnimationMedium')
setTimeout(() => {
rock.classList.remove('rockAnimationMedium')
}, 1000);
}
function rockAnimationFast() {
let rock = document.getElementById("rock")
rock.classList.add('rockAnimationFast')
setTimeout(() => {
rock.classList.remove('rockAnimationFast')
}, 750);
}
let randRockSpeed = Math.floor(Math.random() * 10)

if (randRockSpeed <= 3) {
rockAnimationFast()
}
if (randRockSpeed <= 7 && randRockSpeed > 3) {
rockAnimationMedium()
}
if (randRockSpeed <= 10 && randRockSpeed > 7) {
rockAnimationSlow()
}
}
}

function play() {
dead = false
update()
//transfers jump animation to script
function jump() {
knight.classList.add('jump-animation')
setTimeout(() => {
knight.classList.remove('jump-animation')
}, 500)
}
//When any key is pressed, run jump animation
document.addEventListener('keypress', () => {
if (!knight.classList.contains('jump-animation') && dead == false) {
jump();
}
})
//game loop

var gameLoop = setInterval(() => {
score.innerText++
}, 50)
}
let score = document.getElementById('score')


var gameLoop1 = setInterval(() => {

const knight = document.getElementById('knight')
const rock = document.getElementById('rock')

const knightTop = parseInt(window.getComputedStyle(knight).getPropertyValue('top'))
const rockLeft = parseInt(window.getComputedStyle(rock).getPropertyValue('left'))

if (rockLeft < 0) {
rock.style.display = 'none'
} else {
rock.style.display = ''
}
if (rockLeft < 90 && rockLeft > 50 && knightTop > 79) {
dead = true
}
const deathAnimation = document.getElementById("deathAnimation")
const game = document.getElementById("game")
if (dead == true) {
clearInterval(gameLoop)
clearInterval(gameLoop1)
game.classList.add(deathAnimation)
document.getElementById("reload").style.animationPlayState = "running"
document.getElementById("game").style.animationPlayState = "running"
document.getElementById("rock").style.animationPlayState = "paused"
document.getElementById("gameOver").style.animationPlayState = "running"
}
let scoreNum = document.getElementById("score")
if (scoreNum == 1000) {
//ENTER NEXT STAGE
console.log("1000")
}
}, 50)
function reload() {
location.reload()
}

html {
background-color: black;
}
#score {
font-family: 'Press Start 2P', cursive;
text-align: center;
color: rgba(102, 255, 0, 0.993);
}
#game {
width: 600px;
height: 300px;
border: 2px solid black;
margin: auto;
background-image: url("https://t3.ftcdn.net/jpg/01/73/79/26/360_F_173792623_516juhwjkCCZJ9OyesyH7hf7r9zsyH5u.jpg");
background-size: cover;
animation: deathAnimation 2s;
animation-play-state: paused;
animation-fill-mode: forwards;
}
@keyframes deathAnimation {
0% {
filter: none;
}
100% {
filter: grayscale(100%);
}
}
#knight {
height: 100px;
width: 75px;
position: relative;
top: 171px;
left: 50px;
background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/f57b5304-de59-49e3-b0f9-cc29a2458425/dcgy8i3-e6dac283-04a7-40e5-a333-cc645e172df7.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2Y1N2I1MzA0LWRlNTktNDllMy1iMGY5LWNjMjlhMjQ1ODQyNVwvZGNneThpMy1lNmRhYzI4My0wNGE3LTQwZTUtYTMzMy1jYzY0NWUxNzJkZjcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.0LapCzRi5sQjkqzwB5lwWQT_XH1BM4rSMZt7jrflMLk");
background-size: cover;
}
#h3 {
font-family: 'Press Start 2P', cursive;
color: rgba(102, 255, 0, 0.993);
text-align: center;
}
#rock {
height: 50px;
width: 50px;
position: relative;
top: 122px;
left: 550px;
background-image: url("http://pixelartmaker-data-78746291193.nyc3.digitaloceanspaces.com/image/da268f06e621b21.png");
background-size: cover;
}
.rockAnimationFast {
animation: rockAnimationFast 0.75s linear;
}
.rockAnimationMedium {
animation: rockAnimationMedium 1s linear;
}
.rockAnimationSlow {
animation: rockAnimationSlow 1.5s linear;
}
@keyframes rockAnimationFast {
0% {
left: 500px;
}
100% {
left: -50px;
}
}
@keyframes rockAnimationMedium {
0% {
left: 500px;
}
100% {
left: -50px;
}
}
@keyframes rockAnimationSlow {
0% {
left: 500px;
}
100% {
left: -50px;
}
}
.jump-animation {
animation: jump 0.5s;
}
@keyframes jump {
0% {
top: 171px;
}
50% {
top: 70px;
}
75% {
top: 70px;
}
100% {
top: 171px;
}
}
#gameName {
font-family: 'Press Start 2P', cursive;
text-align: center;
color: rgba(102, 255, 0, 0.993);
font-size: 300%;
}
#gameOver {
font-family: 'Press Start 2P', cursive;
text-align: center;
color: black;
animation: gameOver 2s infinite;
animation-play-state: paused;
}
@keyframes gameOver {
0% {
color: black;
}
50% {
color: rgba(102, 255, 0, 0.993);
}
100% {
color: black
}
}
#reload {
background: url("https://static.thenounproject.com/png/191594-200.png");
margin: 200;
margin-left: auto;
margin-right: auto;
width: 300px;
height: 300px;
background-size: cover;
animation: reload 5s, move 0.5s infinite;
animation-fill-mode: forwards;
animation-play-state: paused;
}
@keyframes reload {
0% {
filter: none
}
100% {
filter: invert(100%)
}
}
@keyframes move {
0% {
transform: rotate(0deg)
}
50% {
transform: rotate(10deg)
}
90% {
transform: rotate(0deg)
}
93% {
transform: rotate(0deg)
}
95% {
transform: rotate(0deg)
}
100% {
transform: rotate(0deg)
}
}
#play {
margin-left: 1150px;
margin-right: auto;
width: 300px;
height: 300px;
background-image: url("https://art.pixilart.com/a9b70c683c2aed9.png");
background-size: cover;
}
#companyName {
width: 10px;
height: 5px;
color: #7bafd4;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
margin-right: 500px;
margin-bottom: 0px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="game">
<div id="knight"></div>
<div id="rock"></div>
</div>
<h1 id="score">0</h1>
<h3 id="highScore"></h3>
<h1 id="gameName">KNIGHT HOPPER</h1>
<h1 id="gameOver">Game Over</h1>
<div id="play" onclick="play()"></div>
<div id="reload" onclick="reload()"></div>
<div id="companyName">flyingchicken</div>
<script src="script.js"></script>
</body>
</html>

虽然你的代码中仍然存在一些错误(例如gamelloop变量需要不同的处理)，但我相信你的项目是在正确的轨道上。

如果你还在为其他bug而挣扎，请告诉我，我很乐意帮助你。