0

Учу javascript, хочу сделать мини-игру в браузере, есть корабль который должен стрелять пулями, хочу чтобы при каждом клике создавался новый div block( пуля ), но не могу это сделать так как, при каждом клике он просто заменяет старый div на новый...

help me!(

вот код:

var container = document.getElementById("container")
var bullet = document.getElementById("bullet")
var numberBullet = 0;
var speed = 0;
var check = 0;

document.onclick = function() {
//создание пули
container.innerHTML = "<div id='bullet' class = 'bullet' </div>"
var bullet = document.getElementById("bullet")

if(numberBullet > 10) {
    numberBullet = 0 
}

//координаты пули
var x = event.clientX
var y = event.clientY
bullet.style.left = x + 'px';
bullet.style.top = y + 'px';


var timer = setInterval(move,50)
function move() {
    speed -= 10
    bullet.style.top = y + speed + 'px'
    console.log(speed)

    if(speed < -500) {
        clearInterval(timer)
        speed = 0
    }
}

//удаление пули
setTimeout(rem,2600)
function rem() {
    bullet.remove();
}

//console.log(x,y)

}

1 ответ 1

0

var ship = document.querySelector('.ship');

ship.addEventListener('click', shoot);

function shoot() {
  var bullet = document.createElement('div');
  bullet.classList.add('bullet');

  var shipCoordinates = ship.getBoundingClientRect();
  var bulletPosLeft = shipCoordinates.right;
  var bulletPosTop = shipCoordinates.top + shipCoordinates.height / 2;

  bullet.style.left = bulletPosLeft + 'px';
  bullet.style.top = bulletPosTop + 'px';

  document.body.append(bullet);
  eraseBullet(bullet);
}

function eraseBullet(bullet) {
  setTimeout(() => {
    bullet.remove();
  }, 1000)
}
body {
  overflow: hidden;
}

.ship {
  height: 100px;
  width: 200px;
  background-color: black;
  clip-path: polygon(50% 0%, 89% 56%, 100% 63%, 67% 100%, 50% 100%, 9% 99%, 0 69%, 28% 55%);
}

.bullet {
  position: absolute;
  width: 20px;
  height: 10px;
  background-color: black;
  animation: piu-piu 1s forwards;
}

@keyframes piu-piu {
  to {
    transform: translateX(1000px);
  }
}
<div class="ship"></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.