我只是在使用 js 測驗基本的側滾動條功能。我從來沒有做過這樣的事情，所以我真的不知道我在做什么，但是我很難在互聯網上找到任何與我正在經歷的事情非常相似的東西。這是帶有游戲的 git 頁面的鏈接https://fgvand94.github.io/side-scroller-test/。我沒有使用畫布或任何東西。IDK 如果我需要讓它按我想要的方式作業。我只是想在關鍵輸入上進行塊移動。這是我的 JS 代碼
const block = document.querySelector('.block');
let right = false;
let left = false;
const move = (e) =>{
if (e.keyCode === 37) {
left = true
}
if (e.keyCode === 39) {
right = true;
}
blockmove();
}
const move2 = () => {
right = false;
left = false;
}
let x = 0;
const blockmove = () => {
if (right) {
x = .05;
block.style.left = `${x}px`;
}
if (left) {
x -= .05;
block.style.left = `${x}px`;
}
requestAnimationFrame(blockmove)
}
document.addEventListener('keydown', move);
document.addEventListener('keyup', move2);
requestAnimationFrame(blockmove);
當我移動時，它需要一秒鐘左右才能開始以適當的速度移動。大約一秒鐘后速度保持穩定，但如果你來回移動速度由于某種原因開始增加。我不知道為什么。
uj5u.com熱心網友回復：
left和rightCSS 屬性通常由瀏覽器渲染器四舍五入，因此只有當完整的四舍五入像素發生更改時，您才會看到對這些屬性所做的更改。
您將x值增加0.05，這將需要至少出現 10 次才能達到0.5（~170ms @60FPS），然后再出現 20 次（~240ms）才能達到下一步1.5。
但是，每次觸發新按鍵時，您的代碼都會啟動一個新回圈，因此在第二次按鍵時，x實際上會增加0.1，第三次增加0.15等等。使整個事情運行得越來越快（直到它消耗了太多資源并開始讓它再次減速）。請記住，按住鍵會定期觸發新事件，這可以解釋您感覺到的“1 秒”延遲。
要克服這個問題，請啟動一個requestAnimationFrame回圈，并定義您想要移動物件的速度。
此外，雖然第一次練習可能看起來有點復雜，但我應該注意requestAnimationFrame以螢屏重繪 率運行，這意味著兩個不同的監視器將使您的影片以不同的速度運行。
為此，我們目前最好的方法是使用增量時間：
const block = document.querySelector('.block');
const speed = 50 / 1000; // 50px per second
let right = false;
let left = false;
const move = (e) => {
e.preventDefault();
if (e.keyCode === 37) {
left = true
}
if (e.keyCode === 39) {
right = true;
}
}
const move2 = (e) => {
e.preventDefault();
if (e.keyCode === 37) {
left = false
}
if (e.keyCode === 39) {
right = false;
}
}
let lastTime = performance.now();
let x = 0;
const blockmove = (time) => { // rAF passes a timestamp
// representing the last v-sync event
const delta = (time - lastTime) * speed;
lastTime = time;
if (right) {
x = delta;
block.style.left = `${x}px`;
}
if (left) {
x -= delta;
block.style.left = `${x}px`;
}
requestAnimationFrame(blockmove)
}
document.addEventListener('keydown', move);
document.addEventListener('keyup', move2);
// start the animation loop only once
requestAnimationFrame(blockmove);body {
display: flex;
}
.block {
background: red;
height: 200px;
width: 200px;
position: relative;
}<div class="block"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/407181.html
標籤：