如何減少螢屏外的影片時間-有解無憂

我有一部影片，當黑色容器穿過紅色時，其持續時間會減少，但這會產生故障。有什么方法可以消除其中的毛刺。

我試圖延遲更改，直到路徑由紅色完成，但仍然面臨故障。

delayInAnimeSub = ourVillanAnimeDuration * (ourVillanFigXValue / window.innerWidth)
animeDelayAmount = Math.abs(delayInAnimeSub.toFixed(2) - 0.2).toFixed(2);

我計算了紅色從左側的剩余距離并獲得完成該距離的持續時間并將其添加到延遲。但它仍然顯示故障。

下面的代碼片段中發生了什么

黑匣子是由space（跳躍），<（向左移動），>（向右移動）控制的英雄。

紅色是小人（惡魔），它具有從右側移動到左側的影片，并具有一定的影片持續時間。

每當英雄越過紅色時，紅色會變得更快（通過嘗試減少影片持續時間），但是這個紅色會出現故障并且從任何地方開始（而不是從它應該在的地方開始）。

我想提高紅色的速度，但面對故障，所以試圖延遲影片持續時間的變化，直到紅色穿過螢屏，但這似乎不起作用

let ourHeroFig = document.getElementById("ourHero");
let ourVillanFig = document.getElementById("obstacleBar");
let gameScoreDigits = document.getElementById("gameScoreDigits");
let valueXCoordinate = "";
let obstacleBarCrossed = true;

document.body.addEventListener('keydown', function(e) {
  let ourHeroFigXValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('left'));
  let ourHeroFigYValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('bottom'));
  if (e.code === "ArrowRight") {
    valueXCoordinate = ourHeroFigXValue   100;

  } else if (e.code === "KeyA" || e.code === "ArrowLeft") {
    if (ourHeroFigXValue > ourHeroFig.offsetWidth   90) {
      valueXCoordinate = ourHeroFigXValue - 100;
    } else {
      valueXCoordinate = 0;
    }
  } else if (e.code === "Space") {
    ourHeroFig.classList.add("animateHero");
    setTimeout(function() {
      ourHeroFig.classList.remove("animateHero");
    }, 700)
  }
  changePosition();

})

function changePosition() {
  ourHeroFig.style.left = valueXCoordinate   'px'
}

let delayInAnimeSub = ""
setInterval(
  function() {
    let ourHeroFigXValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('left'));
    let ourHeroFigYValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('bottom'));
    let ourVillanFigXValue = parseInt(getComputedStyle(ourVillanFig).getPropertyValue('left'));
    let ourVillanFigYValue = parseInt(getComputedStyle(ourVillanFig).getPropertyValue('bottom'));
    let gameOverValueX = Math.abs(ourVillanFigXValue - ourHeroFigXValue);
    let gameOverValueY = Math.abs(ourVillanFigYValue - ourHeroFigYValue);

    if (gameOverValueX < ourVillanFig.offsetWidth && gameOverValueY < ourVillanFig.offsetHeight) {
      console.log("yes touched");
      ourVillanFig.classList.remove("animateVillan");
      obstacleBarCrossed = false;
    } else if (obstacleBarCrossed && gameOverValueX < ourVillanFig.offsetWidth) {
      ourVillanAnimeDuration = parseFloat(getComputedStyle(ourVillanFig).getPropertyValue('animation-duration'));
      delayInAnimeSub = ourVillanAnimeDuration * (ourVillanFigXValue / window.innerWidth)
      animeDelayAmount = Math.abs(delayInAnimeSub.toFixed(2) - 0.2).toFixed(2);
      console.log(animeDelayAmount, ourVillanAnimeDuration, ourVillanFigXValue)
      if (ourVillanAnimeDuration <= 2) {
        ourVillanAnimeDuration = 2
      }
      setTimeout(() => {
        ourVillanFig.style.animationDuration = ourVillanAnimeDuration - 0.1   "s";
      }, animeDelayAmount);
    }
    // console.log(gameOverValueX,gameOverValueY)
  }, 10);

#ourHero {
  width: 20px;
  height: 100px;
  background-color: black;
  position: fixed;
  bottom: 0;
  left: 0;
  transition: 0.1s;
}

.animateHero {
  animation: animateHero 0.7s linear;
}

@keyframes animateHero {
  0% {
    bottom: 0;
  }
  50% {
    bottom: 350px;
  }
  100% {
    bottom: 0;
  }
}

#obstacleBar {
  width: 20px;
  height: 100px;
  background-color: red;
  position: fixed;
  bottom: 0;
  left: 50vw;
}

.animateVillan {
  animation: animateVillan 5s linear infinite;
}

@keyframes animateVillan {
  0% {
    left: 110vw;
  }
  100% {
    left: 0;
  }
}

<div id="ourHero"></div>
<div id="obstacleBar" class="animateVillan"></div>

提前感謝您的幫助

uj5u.com熱心網友回復：

一種方法是使用Animation.playbackRate但它仍然是實驗性的。

let VillRate = 1
...

// inside the collision check

if (VillRate < 20) {
  ourVillanFig.getAnimations()[0].playbackRate  = 0.2
  VillRate  = 0.5
}

在下面的代碼段中，紅色的速度會在每次接觸黑色時增加直到某個點。您可以根據需要調整該行為。

let ourHeroFig = document.getElementById('ourHero')
let ourVillanFig = document.getElementById('obstacleBar')
let gameScoreDigits = document.getElementById('gameScoreDigits')
let valueXCoordinate = ''
let obstacleBarCrossed = true

let VillRate = 1

document.body.addEventListener('keydown', function(e) {
  let ourHeroFigXValue = parseInt(
    getComputedStyle(ourHeroFig).getPropertyValue('left')
  )
  let ourHeroFigYValue = parseInt(
    getComputedStyle(ourHeroFig).getPropertyValue('bottom')
  )
  if (e.code === 'ArrowRight') {
    valueXCoordinate = ourHeroFigXValue   100
  } else if (e.code === 'KeyA' || e.code === 'ArrowLeft') {
    if (ourHeroFigXValue > ourHeroFig.offsetWidth   90) {
      valueXCoordinate = ourHeroFigXValue - 100
    } else {
      valueXCoordinate = 0
    }
  } else if (e.code === 'Space') {
    ourHeroFig.classList.add('animateHero')
    setTimeout(function() {
      ourHeroFig.classList.remove('animateHero')
    }, 700)
  }
  changePosition()
})

function changePosition() {
  ourHeroFig.style.left = valueXCoordinate   'px'
}

let delayInAnimeSub = ''
setInterval(function() {
  let ourHeroFigXValue = parseInt(
    getComputedStyle(ourHeroFig).getPropertyValue('left')
  )
  let ourHeroFigYValue = parseInt(
    getComputedStyle(ourHeroFig).getPropertyValue('bottom')
  )
  let ourVillanFigXValue = parseInt(
    getComputedStyle(ourVillanFig).getPropertyValue('left')
  )
  let ourVillanFigYValue = parseInt(
    getComputedStyle(ourVillanFig).getPropertyValue('bottom')
  )
  let gameOverValueX = Math.abs(ourVillanFigXValue - ourHeroFigXValue)
  let gameOverValueY = Math.abs(ourVillanFigYValue - ourHeroFigYValue)

  if (
    gameOverValueX < ourVillanFig.offsetWidth &&
    gameOverValueY < ourVillanFig.offsetHeight
  ) {
    if (VillRate < 20) {
      ourVillanFig.getAnimations()[0].playbackRate  = 0.2
      VillRate  = 0.5
    }
  }
}, 10)

#ourHero {
  width: 20px;
  height: 100px;
  background-color: black;
  position: fixed;
  bottom: 0;
  left: 0;
  transition: 0.1s;
}

.animateHero {
  animation: animateHero 0.7s linear;
}

@keyframes animateHero {
  0% {
    bottom: 0;
  }
  50% {
    bottom: 350px;
  }
  100% {
    bottom: 0;
  }
}

#obstacleBar {
  width: 20px;
  height: 100px;
  background-color: red;
  position: fixed;
  bottom: 0;
  left: 50vw;
}

.animateVillan {
  animation: animateVillan 5s linear infinite;
}

@keyframes animateVillan {
  0% {
    left: 110vw;
  }
  100% {
    left: 0;
  }
}

<div id="ourHero"></div>
<div id="obstacleBar" class="animateVillan"></div>

uj5u.com熱心網友回復：

我試過這個：

 if (ourVillanFigXValue < 10) {
    ourVillanFig.style.animationDuration = ourVillanAnimeDuration - 0.1   "s";
  }

它作業正常，但是當時間減少到4s它之后，紅色不會從末尾開始，而是從中間開始。幾乎從中間開始3s

let ourHeroFig = document.getElementById("ourHero");
let ourVillanFig = document.getElementById("obstacleBar");
let gameScoreDigits = document.getElementById("gameScoreDigits");
let valueXCoordinate = "";
let obstacleBarCrossed = true;

document.body.addEventListener('keydown', function(e) {
  let ourHeroFigXValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('left'));
  let ourHeroFigYValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('bottom'));

  if (e.code === "ArrowRight") {
    valueXCoordinate = ourHeroFigXValue   100;

  } else if (e.code === "KeyA" || e.code === "ArrowLeft") {
    if (ourHeroFigXValue > ourHeroFig.offsetWidth   90) {
      valueXCoordinate = ourHeroFigXValue - 100;
    } else {
      valueXCoordinate = 0;
    }
  } else if (e.code === "Space") {
    ourHeroFig.classList.add("animateHero");
    setTimeout(function() {
      ourHeroFig.classList.remove("animateHero");
    }, 700)
  }
  changePosition();

})

function changePosition() {
  ourHeroFig.style.left = valueXCoordinate   'px'
}

let delayInAnimeSub = ""
setInterval(
  function() {
    let ourHeroFigXValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('left'));
    let ourHeroFigYValue = parseInt(getComputedStyle(ourHeroFig).getPropertyValue('bottom'));
    let ourVillanFigXValue = parseInt(getComputedStyle(ourVillanFig).getPropertyValue('left'));
    let ourVillanFigYValue = parseInt(getComputedStyle(ourVillanFig).getPropertyValue('bottom'));
    let gameOverValueX = Math.abs(ourVillanFigXValue - ourHeroFigXValue);
    let gameOverValueY = Math.abs(ourVillanFigYValue - ourHeroFigYValue);

    if (ourVillanFigXValue < 10) {
      ourVillanFig.style.animationDuration = ourVillanAnimeDuration - 0.1   "s";
    }
    if (gameOverValueX < ourVillanFig.offsetWidth && gameOverValueY < ourVillanFig.offsetHeight) {
      console.log("yes touched");
      ourVillanFig.classList.remove("animateVillan");
      obstacleBarCrossed = false;
    } else if (obstacleBarCrossed && gameOverValueX < ourVillanFig.offsetWidth) {
      ourVillanAnimeDuration = parseFloat(getComputedStyle(ourVillanFig).getPropertyValue('animation-duration'));
      console.log(ourVillanFigXValue < 0, ourVillanAnimeDuration)

      if (ourVillanAnimeDuration <= 2) {
        ourVillanAnimeDuration = 2
      }
    }
    // console.log(gameOverValueX,gameOverValueY)
  }, 10);

#ourHero {
  width: 20px;
  height: 180px;
  background-color: black;
  position: fixed;
  bottom: 0;
  left: 0;
  transition: 0.1s;
}

.animateHero {
  animation: animateHero 0.7s linear;
}

@keyframes animateHero {
  0% {
    bottom: 0;
  }
  50% {
    bottom: 350px;
  }
  100% {
    bottom: 0;
  }
}

#obstacleBar {
  width: 20px;
  height: 180px;
  background-color: red;
  position: fixed;
  bottom: 0;
  left: 50vw;
}

.animateVillan {
  animation: animateVillan 5s linear infinite;
}

@keyframes animateVillan {
  0% {
    left: 110vw;
  }
  100% {
    left: 0;
  }
}

<div id="ourHero"></div>
<div id="obstacleBar" class="animateVillan"></div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/354869.html

標籤：javascript html css 动画片

上一篇：小部件不會與其他小部件重疊

下一篇：如何按下一個組件并使其在ReactNative中旋轉180度？