#javascript #html #css #arrays
#javascript #HTML #css #массивы
Вопрос:
Итак, я создаю игру, в которой движется космический корабль, и он должен избегать изображения огненного шара, чтобы выиграть. Моя проблема в том, что у меня снова и снова повторяется только один огненный шар. Вместо этого я хотел бы иметь много огненных шаров, которые умножаются с течением времени. Я думаю, мне нужно включить массив и использовать метод push (), но я попытался, и это не сработало. Если бы кто-нибудь мог мне помочь, я был бы очень признателен. Спасибо
//Fireball script
function fireballScript(offset) {
return Math.floor(Math.random() * (window.innerWidth - offset))
}
let fireballMovement = {
x: fireballScript(fireball.offsetWidth),
y: 0
}
const fireLoop = function () {
fireballMovement.y = 1
fireball.style.top = fireballMovement.y 'px'
if (fireballMovement.y > window.innerHeight) {
fireballMovement.x = fireballScript(fireball.offsetWidth)
fireball.style.left = fireballMovement.x 'px'
fireballMovement.y = 0
fireball.setAttribute('hit', false)
}
}
fireball.style.left = fireballMovement.x 'px'
let fireballSpeed = setInterval(fireLoop, 1000 / 250)
let fireball = document.querySelector("#fireball")
<img src = "Photo/fireball.png" id = "fireball" >
//Stop game on collision
function checkCollision() {
if (detectOverlap(spaceship, fireball) amp;amp; fireball.getAttribute('hit') == 'false') {
hits
fireball.setAttribute('hit', true)
alert("lost")
}
setTimeout(checkCollision, 1)
}
var detectOverlap = (function () {
function getPositions(spaceship) {
var pos = spaceship.getBoundingClientRect()
return [[pos.left, pos.right], [pos.top, pos.bottom]]
}
function comparePositions(p1, p2) {
let r1 = p1[0] < p2[0] ? p1 : p2
let r2 = p1[0] < p2[0] ? p2 : p1
return r1[1] > r2[0] || r1[0] === r2[0]
}
return function (a, b) {
var pos1 = getPositions(a),
pos2 = getPositions(b)
return comparePositions(pos1[0], pos2[0]) amp;amp; comparePositions(pos1[1], pos2[1])
}
})()
let spaceship = document.querySelector("#icon")
<img src = "Photo/Spaceship1.png" id="icon">
PS: Я задавал этот вопрос дюжину раз, но я никогда не мог получить ответ, который был бы включен в мой код. Было бы очень полезно, если бы кто-нибудь мог это исправить … еще раз спасибо
Комментарии:
1. Если чего-то не хватает (например, вы говорите, что мой код неполон, не стесняйтесь просить меня опубликовать больше кода). В любом случае, я думаю, что опубликовал то, что подходит для ответа на вопрос…
Ответ №1:
У вас должен быть массив огненных шаров
var fireballs = [];
Создайте конструктор для fireballs вместо того, чтобы помещать их непосредственно в html
function fireball(x, y) {
movementX = x;
movementY = y;
}
Затем вставьте новые изображения в массив с динамическими значениями положения. Чтобы добавить их в документ, вам нужно добавить их к родительскому элементу. Если <body> это родительский элемент, вы бы сделали это:
let f = new fireball(10, 20)
fireballs.push(f)
document.body.appendChild(f)
В вашем обновлении выполните итерацию по файерболам и обновите их движение.
fireballs.forEach((fireball) => {
// update position for each fireball
});
Комментарии:
1. Это очень любезно, Дэн Маллин, но возможно ли включить это в мой код? Большое спасибо. (если вам нужен весь код, просто спросите)
2. К сожалению, код требует некоторого серьезного рефакторинга для поддержки нескольких файерболов. Я сталкивался с этой проблемой несколько раз в первых нескольких играх, которые я создал. Основная идея состоит в том, чтобы использовать весь код, который вы написали для перемещения одного огненного шара в
forEach()функцию. Вы делаете одно и то же для каждого огненного шара, так что вы можете практически просто скопировать / вставить имеющийся у вас код в эту функцию. Создайте функцию перемещения для обработки перемещения, затем просто вызывайте свои функции последовательно. Переместить, проверить коллизию и т.д.3. @Thomas — Dan предоставил здесь очень хороший ответ. Вам нужно уйти и попрактиковаться в использовании массивов и групп объектов. Если Дэн напишет весь код за вас, то вы ничему не научитесь, и вы не напишете игру, а Дэн напишет.
4. Ли Тейлор, ты прав, я не многому научусь, если буду только копировать и вставлять, но я не закончу игру вовремя, если буду делать это в одиночку… итак, мое единственное решение — скопировать и вставить хороший ответ, чтобы завершить игру… надеюсь, вы понимаете.