Я пытаюсь изменить существующий JS / HTML5 шмуп Джареда Миллса до go по вертикали и изменить спрайты. Сменить спрайты легко. Логи c мстлы работает. Однако у меня много проблем с рендерингом кадров и обнаружением столкновений. Код "кажется" работает ... но кадры не получаются в правильном направлении.
Вот мой соответствующий код (остальные не активны. Все, что я сделал, это спам, пробел, чтобы «выстрелить» (вызов fireLaser ()). Пожалуйста, смотрите прикрепленный анимированный GIF. Предположим, холст 400x400 пикселей
fireLaser() {
let laser = createLaserElement()
mainPlayArea.appendChild(laser)
moveLaser(laser)
}
function createLaserElement() {
let xPosition = parseInt(window.getComputedStyle(shooter).getPropertyValue('left')) // assume 180px
let yPosition = parseInt(window.getComputedStyle(shooter).getPropertyValue('top')) // assume 350px
let newLaser = document.createElement('img')
newLaser.src = 'images/bullet.png' // green paw
newLaser.classList.add('laser')
newLaser.style.left = `${xPosition-40}px` // should be +10, but...
newLaser.style.top = `${yPosition-20}px`
return newLaser
}
function moveLaser(laser) {
let laserInterval = setInterval(() => {
let yPosition = parseInt(laser.style.top)
let monsters = document.querySelectorAll(".monster")
monsters.forEach(monster => {
if (checkLaserCollision(laser, monster)) {
monster.src = "images/explosion.png" // dead skull
monster.classList.remove("monster")
monster.classList.add("dead-monster")
scoreCounter.innerText = parseInt(scoreCounter.innerText) + 100
}
})
if (yPosition <= 40) { // shot didn't hit anything and reached the tp
laser.remove() // erase it
} else {
laser.style.top = `${yPosition - 4}px` // move 4 pixels up
}
}, 10)
}
Запись моей "кошачьей" стрельбы, но движения не было ...
Как будто "лазер" был смещен вбок "cat" и другие визуализации "лазера". Поскольку каждый из них стирается, следующий как-то "смещается" назад. Я проверил .left в Chrome Inspector ... Они все одинаковые. Так что это ТОЛЬКО в рендеринг. Я подозреваю, что -40 x-offset в createLaserElement не является необходимым. Но если у меня его нет, выстрел вылетает из задней части этой кошки. Что, кажется, не имеет смысла.
Что я делаю не так?