Как сделать анимацию движения стрелок более плавной с помощью JavaScript ⇐ Jquery

[Гость]

Я пытаюсь создать игру, похожую на pacman, и пытаюсь сделать движение стрелки плавным с помощью переходов CSS, но вместо этого оно просто плавно переходит в другой блок. Как мне отредактировать код, чтобы сделать это плавная анимация при перемещении вместо движения пикселей

Вот мой код:

HTML:

Нажмите, чтобы играть Оценка: 0 Ваш лучший результат: 0 CSS:

тело { дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; гибкое направление: столбец; переполнение: скрыто; поле внизу: -20 пикселей; цвет фона: rgba(10, 7, 67, 1.00); } ч2 { цвет: RGB(246, 184, 30); размер шрифта: 25 пикселей; шрифт: светлее; преобразование текста: верхний регистр; текстовая тень: 1,5 пикселей 1,5 пикселей 0 rgba (239, 0, 0, 1,00); } #играть { позиция: абсолютная; маржа сверху: 80 пикселей; отступ: 15 пикселей 25 пикселей; цвет: rgba(10, 7, 67, 1,00); размер шрифта: 30 пикселей; межбуквенный интервал: 1 пиксель; преобразование текста: верхний регистр; цвет фона: RGB(246, 184, 30); граница: 2 пикселя сплошной rgba (239, 0, 0, 1,00); z-индекс: 100; курсор: указатель; } .сетка { дисплей: гибкий; flex-wrap: обертка; ширина: 560 пикселей; высота: 560 пикселей; нижнее поле: 80 пикселей; } .grid div { ширина: 20 пикселей; высота: 20 пикселей; } .pac-точка { цвет фона: rgba(247, 191, 80, 1.00); граница: 7 пикселей сплошной rgba (10, 7, 67, 1,00); радиус границы: 10 пикселей; размер коробки: граница-коробка; } .стена { цвет фона: темно-синий; } .power-пеллета { ширина: 10 пикселей; высота: 10 пикселей; цвет фона: белый; радиус границы: 50 пикселей; } .pac-man { цвет фона: желтый; радиус границы: 10 пикселей; граница: нет; преобразование: поворот (115 градусов); } .pac-man::раньше, .pac-man::after { позиция: абсолютная; содержание: ""; дисплей: блок; ширина: 10 пикселей; высота: 10 пикселей; } .pac-man::before { граница-радиус: 50 пикселей 0 0 0; цвет фона: rgba(10, 7, 67, 1.00); цвет границы: rgba(10, 7, 67, 1,00); } .pac-man::after { граница-радиус: 50 пикселей 0 0 0; цвет фона: желтый; Transform-Origin: внизу справа; преобразование: поворот (-90 градусов); анимация: есть .5с бесконечно; размер фона: 40%; фоновый повтор: без повтора; фоновая позиция: центр } @-webkit-keyframes едят { 0% { преобразование: поворот (-90 градусов); } 25% { преобразование: поворот (-45 градусов); } 50% { преобразование: поворот (0 градусов); } 75% { преобразование: поворот (-45 градусов); } 100% { преобразование: поворот (-90 градусов); } } @keyframes едят { 0% { преобразование: поворот (-90 градусов); } 50% { преобразование: поворот (0 градусов); } 100% { преобразование: поворот (-90 градусов); } } .игра закончена, .выиграл { позиция: абсолютная; маржа сверху: 80 пикселей; ширина: 396 пикселей; высота: 100 пикселей; граница: 2 пикселя сплошной rgba (239, 0, 0, 1,00); текстовая тень: 1px 1px 0 rgba(239, 0, 0, 1.00); цвет фона: RGB(246, 184, 30); цвет: rgba(10, 7, 67, 1,00); размер шрифта: 40 пикселей; z-индекс: 100; дисплей: гибкий; оправдание-содержание: центр; } .gameOver::after { содержание: «ИГРА ЗАКОНЧЕНА»; позиция: абсолютная; } .won::after { содержание: «ТЫ ВЫИГРАЛА!»; позиция: абсолютная; } .перезапуск { позиция: абсолютная; ширина: 150 пикселей; высота: 40 пикселей; маржа сверху: 100 пикселей; цвет фона: rgba(10, 7, 67, 1.00); граница: 2 пикселя сплошной rgba (239, 0, 0, 1,00); радиус границы: 5 пикселей; z-индекс: 200; курсор: указатель; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; размер шрифта: 22 пикселей; Расстояние между буквами: 1,5 пикселей; цвет: RGB(246, 184, 30); текстовая тень: 1px 1px 0 rgba(239, 0, 0, 1.00); } .restart:hover { преобразование: масштаб (1.1); } .restart::after { содержимое: «ПЕРЕЗАПУСК»; позиция: абсолютная; } .блинки { граница: 0; граница-радиус: 0 !важно; преобразование: поворот (0 градусов) ! важно; цвет фона: красный !важно; ширина: 10 пикселей; высота: 10 пикселей; } .мизинец { цвет фона: ярко-розовый !важно; граница: 0; граница-радиус: 0 !важно; преобразование: поворот (0 градусов) ! важно; } .inky { граница: 0; цвет фона: голубой !важно; граница-радиус: 0 !важно; преобразование: поворот (0 градусов) ! важно; } .клайд { граница: 0; цвет фона: оранжевый !важно; граница-радиус: 0 !важно; преобразование: поворот (0 градусов) ! важно; } .scared-призрак { граница: 0; граница-радиус: 0; цвет фона: белый !важно; } JS:

let restartButton = document.createElement("button"); пусть оценка = 0; пусть toWin = 0; document.getElementById("play").addEventListener("click", function game() { const ScoreDisplay = document.getElementById("оценка"); константная ширина = 28; // 28*28 = 784 квадрата const сетка = document.querySelector(".grid") константный макет = [ 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 3, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 3, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 1, 1, 0, 1, 1, 1, 4, 1, 4, 1, 1, 1, 0, 1, 1, 1, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 0, 1, 4, 4, 4, 4, 4, 4, 4, 1, 0, 1, 4, 4, 4, 4, 4, 4, 4, 2, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 4, 1, 1, 2, 1, 1, 4, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 0, 4, 4, 1, 2, 2, 2, 1, 4, 4, 0, 4, 4, 4, 4, 4, 4, 4, 4, 2, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 4, 1, 1, 1, 1, 1, 4, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 4, 4, 4, 4, 4, 4, 1, 0, 1, 4, 4, 4, 4, 4, 4, 4, 1, 0, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 1, 1, 0, 1, 4, 1, 1, 1, 1, 1, 4, 1, 0, 1, 1, 1, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 3, 0, 1, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 1, 0, 3, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4 ]; // 0 = пак-точка; 1 = стена; 2 = логово призраков; 3 = силовая гранула; 4 = пусто; константные квадраты = []; // Рисуем сетку функция createBoard() { for (let i = 0; i Number(window.localStorage.getItem(higher))) { window.localStorage.clear(); bestScore = оценка; window.localStorage.setItem(выше, bestScore); } bestScoreDisplay.innerHTML = window.localStorage.getItem(выше); } лучшийScoreCount(); // Стартовая позиция Pac-Man пусть pacmanCurrentIndex = 546; Squares[pacmanCurrentIndex].classList.add("pac-man"); // Перемещаем Pac-Man функция movePacman(e) { Squares[pacmanCurrentIndex].classList.remove("pac-man"); переключатель (e.keyCode) { случай 37: if (pacmanCurrentIndex % width !== 0 && !squares[pacmanCurrentIndex - 1].classList.contains("wall") && !squares[pacmanCurrentIndex - 1].classList.contains("логово призраков")) { pacmanCurrentIndex -= 1; Squares[pacmanCurrentIndex].style.transform = "scaleX(-1) Rotate(95deg)"; // Если Pac-Man находится на левом выходе если (pacmanCurrentIndex - 1 === 363) { pacmanCurrentIndex = 391; } } перерыв; случай 38: if (pacmanCurrentIndex - ширина >= 0 && !squares[pacmanCurrentIndex - ширина].classList.contains("стена") && !squares[pacmanCurrentIndex - ширина].classList.contains("логово призраков")) { pacmanCurrentIndex -= ширина; Squares[pacmanCurrentIndex].style.transform = "scaleY(1)"; } перерыв; случай 39: if (pacmanCurrentIndex % width < width - 1 && !squares[pacmanCurrentIndex + 1].classList.contains("wall") && !squares[pacmanCurrentIndex + 1].classList.contains("логово призраков")) { pacmanCurrentIndex += 1; Squares[pacmanCurrentIndex].style.transform = "scaleY(1) Rotate(95deg)"; // Если Pac-Man находится на правом выходе если (pacmanCurrentIndex + 1 === 392) { pacmanCurrentIndex = 364; } } перерыв; случай 40: if (pacmanCurrentIndex + ширина < ширина * ширина && !squares[pacmanCurrentIndex + ширина].classList.contains("стена") && !squares[pacmanCurrentIndex + ширина].classList.contains("логово призраков")) { pacmanCurrentIndex += ширина; Squares[pacmanCurrentIndex].style.transform = "повернуть (190 градусов)"; } перерыв; } Squares[pacmanCurrentIndex].classList.add("pac-man"); pacDotEaten(); мощностьПеллетЕатен(); проверкаForGameOver(); проверкаФорвин(); } document.addEventListener("keydown", movePacman); // Перемещение Pac-Man на мобильных устройствах (проведите пальцем вверх-вниз-влево-вправо) вар начальныйX = ноль; вар начальныйY = ноль; функция startTouch(e) { начальныйX = e.touches[0].clientX; начальныйY = e.touches[0].clientY; } функция moveTouch(e) { если (начальныйX === ноль) { возвращаться; } если (начальныйY === ноль) { возвращаться; } вар currentX = e.touches[0].clientX; вар currentY = e.touches[0].clientY; вар diffX = начальныйX - текущийX; вар diffY = начальныйY - текущийY; Squares[pacmanCurrentIndex].classList.remove("pac-man"); if (Math.abs(diffX) > Math.abs(diffY)) { если (diffX > 0) { // Проведите пальцем влево if (pacmanCurrentIndex % width !== 0 && !squares[pacmanCurrentIndex - 1].classList.contains("wall") && !squares[pacmanCurrentIndex - 1].classList.contains("логовище призраков")) { pacmanCurrentIndex -= 1; Squares[pacmanCurrentIndex].style.transform = "scaleX(-1) Rotate(95deg)"; // Если Pac-Man находится на левом выходе если (pacmanCurrentIndex - 1 === 363) { pacmanCurrentIndex = 391; } } } еще { // Проведите пальцем вправо if (pacmanCurrentIndex % width < width - 1 && !squares[pacmanCurrentIndex + 1].classList.contains("wall") && !squares[pacmanCurrentIndex + 1].classList.contains("логово призраков")) { pacmanCurrentIndex += 1; Squares[pacmanCurrentIndex].style.transform = "scaleY(1) Rotate(95deg)"; // Если Pac-Man находится на правом выходе если (pacmanCurrentIndex + 1 === 392) { pacmanCurrentIndex = 364; } } } } еще { если (diffY > 0) { // Проведите пальцем вверх if (pacmanCurrentIndex - ширина >= 0 && !squares[pacmanCurrentIndex - ширина].classList.contains("стена") && !squares[pacmanCurrentIndex - ширина].classList.contains("логово призраков")) { pacmanCurrentIndex -= ширина; Squares[pacmanCurrentIndex].style.transform = "scaleY(1)"; } } еще { // Проведите вниз if (pacmanCurrentIndex + ширина < ширина * ширина && !squares[pacmanCurrentIndex + ширина].classList.contains("стена") && !squares[pacmanCurrentIndex + width].classList.contains("логово призраков")) { pacmanCurrentIndex += ширина; Squares[pacmanCurrentIndex].style.transform = "повернуть (190 градусов)"; } } } Squares[pacmanCurrentIndex].classList.add("pac-man"); начальныйX = ноль; начальныйY = ноль; е.preventDefault(); pacDotEaten(); мощностьПеллетЕатен(); проверкаForGameOver(); проверкаФорвин(); } document.querySelector(".grid").addEventListener("touchstart", startTouch, false); document.querySelector(".grid").addEventListener("touchmove", moveTouch, false); // Когда Pac-Man ест Pac-Dot функция pacDotEaten() { if (squares[pacmanCurrentIndex].classList.contains("pac-dot")) { оценка++; дляWin++; Squares[pacmanCurrentIndex].classList.remove("pac-dot"); } ScoreDisplay.innerHTML = оценка; } // Когда Pac-Man ест Power-Pellet функция powerPelletEaten() { if (squares[pacmanCurrentIndex].classList.contains("power-pellet")) { оценка += 10; для победы += 10; Ghosts.forEach(ghost => Ghost.isScared = true); setTimeout (unScareGhosts, 7000); Squares[pacmanCurrentIndex].classList.remove("power-pellet"); } ScoreDisplay.innerHTML = оценка; } // Создаем шаблон призрака класс Призрак { конструктор (имя класса, startIndex, скорость) { это.ИмяКласса = ИмяКласса; this.startIndex = startIndex; this.speed = скорость; this.currentIndex = startIndex; this.timerId = NaN; this.isScared = ложь; } } константные призраки = [ новый Призрак("мигающий", 322, 290), новый Призрак("мизинец", 378, 380), новый Призрак("чернильный", 377, 200), новый Призрак("клайд", 379, 250) ] // Вернем цвета призракам функция unScareGhosts() { Ghosts.forEach(ghost => Ghost.isScared = false) } // Рисуем призраков на сетке Ghosts.forEach(призрак => { квадраты[ghost.currentIndex].classList.add(ghost.className); Squares[ghost.currentIndex].classList.add("призрак"); }) // Перемещаем призраков Ghosts.forEach(призрак => moveGhost(призрак)); функция moveGhost(призрак) { const направления = [-1, +1, ширина, -ширина]; пусть направление = направления [Math.floor(Math.random() * направления.длина)]; Ghost.timerId = setInterval(function () { if (!squares[ghost.currentIndex + направление].classList.contains("призрак") && !squares[ghost.currentIndex + направление].classList.contains("стена")) { квадраты[ghost.currentIndex].classList.remove(ghost.className); Squares[ghost.currentIndex].classList.remove("призрак", "испуганный призрак"); Ghost.currentIndex += направление; Squares[ghost.currentIndex].classList.add(ghost.className, "призрак"); } else if (ghost.currentIndex - 1 === 363) { Squares[ghost.currentIndex].classList.remove(ghost.className, "призрак"); призрак.текущийИндекс = 391; Squares[ghost.currentIndex].classList.add("призрак"); } else if (ghost.currentIndex + 1 === 392) { Squares[ghost.currentIndex].classList.remove(ghost.className, "призрак"); призрак.текущийИндекс = 364; Squares[ghost.currentIndex].classList.add("призрак"); } еще { направление = направления[Math.floor(Math.random() * направления.длина)] } если (ghost.isScared) { Squares[ghost.currentIndex].classList.add("испуганный призрак"); } if (squares[pacmanCurrentIndex].classList.contains("испуганный призрак")) { Squares[ghost.currentIndex].classList.remove(ghost.className, "призрак", "испуганный призрак"); Ghost.currentIndex = Ghost.startIndex; оценка += 100; ScoreDisplay.innerHTML = оценка; Squares[ghost.currentIndex].classList.add(ghost.className, "призрак"); } проверкаForGameOver(); }, призрак.скорость) } // Проверка окончания игры функция checkForGameOver() { if (squares[pacmanCurrentIndex].classList.contains("призрак") && !squares[pacmanCurrentIndex].classList.contains("испуганный-призрак")) { Ghosts.forEach(призрак => ClearInterval(ghost.timerId)); document.removeEventListener("keydown", movePacman); лучшийScoreCount(); ScoreDisplay.innerHTML = оценка; let gameOver = document.createElement("div"); gameOver.classList.add("gameOver"); document.body.append(gameOver); restartButton.classList.add("перезапуск"); document.body.append(restartButton); document.getElementById("играть").removeEventListener("клик", игра); restartButton.addEventListener("click", () => { window.location.reload(false) }) } } // Проверка на победу функция checkForWin() { если (toWin === 186) { Ghosts.forEach(ghost => ClearInterval(ghost.timerId)); document.removeEventListener("keydown", movePacman); лучшийScoreCount(); ScoreDisplay.innerHTML = оценка; let youWon = document.createElement("div"); youWon.classList.add("выиграл"); document.body.append(выВыиграли); restartButton.classList.add("перезапуск"); document.body.append(restartButton); document.getElementById("играть").removeEventListener("клик", игра); restartButton.addEventListener("click", () => { window.location.reload(false) }) } } }) Не обращайте внимания на цифры в файле JS, это всего лишь сетка, поскольку я не использую Canvas или SVG