Игра танки на JavaScrit и jQuery как написать столкновение снаряда с танком противника?

{
$(document).ready(function() 


    function movemytank(){

        $(document).keydown(function(event){
            if(event.key == "ArrowLeft" && $("#myTank").position().left > 0){
                $("#myTank").css({
                    left:"-=10px"
                })
            }

            if(event.key == "ArrowRight" && $("#myTank").position().left + $("#myTank").width() < $("#game").width()){
                $("#myTank").css({
                    left:"+=10px"
                })
            }


            if(event.keyCode == 13){
                $(`<img src="img/bullet.png" class="bullet">`).css({
                    left:$('#myTank').position().left +25  
                }).appendTo('#game')
            }



        })


    }

    let k
    let a
    let b

    function movebullet(){
        k = setInterval(function(){
            $(".bullet").each(function(index,el){
                b = $(el)
                $(el).animate({
                    top:"-=10px"
                },10)
                if($(el).position().top < 0){
                    $(el).remove()
                }
                $(".enemy").each(function(el,i){
                    a = $(i)
                })
                if(a.position().top+70 >= $(el).position().top && $("#game").width() - a.position().left+70 - $("#game").width() - b.position().left <= 70) {
                a.remove()
                }
               
                console.log($("#game").width() - a.position().left+70 - $("#game").width() - b.position().left)
                console.log($("#game").width() - a.position().left+70 +" enemy")
                console.log($("#game").width() - b.position().left +"bullet")
            })
        })
    }






    let h
    function createenemy(){
        h = setInterval(function(){
            $(`<img src="img/tank2.png" class="enemy">`).css({
                left:rand($("#game").width())

            }).appendTo("#game")
            
        },2500)
    }




    let l 
    function moveenemy(){
        l = setInterval(function(){
            $(".enemy").each(function(index,el){
                $(el).animate({
                    top:"+=3px"
                },100)
            // console.log($(el).position().left , $(el).position().top +" enemy")
                if($(el).position().top + 70 > $("#myTank").position().top){
                    clearInterval(k)
                    clearInterval(l)
                    clearInterval(h)
                    $(document).off("keydown")
                    $(".enemy").remove()
                    $(".bullet").remove()
                    alert("GAME OVER")
                }
            })
        })
    }








    $(".start").click(function(event){
        $(".startgame").fadeOut(1000,function(){
            alert("start of game")
            movemytank()
            movebullet()
            createenemy()
            moveenemy()

        })
    })






    function rand(a){
        return Math.floor(Math.random() * a )
    }


});
<!DOCTYPE html>
<html>
<head>
  <title>GAME</title>
  <link rel="stylesheet" href="style/style.css">
</head>
<body>
  <div id="game">
    
    <img src="img/tank.png" id="myTank">
  </div>
  <div class="startgame">
    <center>
      <button class="start">START</button>
    </center>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type ="text/javascript" src="js/script.js"></script>
</html><code lang="css">
  *{
  padding:0;
  margin:0;
  }
  
  #game{
  position:relative;
  width:80%;
  margin:auto;
  height:100vh;
  background:url(../img/grass.jpg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  }
  
  
  .startgame{
  position:absolute;
  width:80%;
  height:100vh;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  background:orange;
  display:flex;
  justify-content: center;
  align-items:center;
  /*display:none;*/
  }
  
  
  
  .start{
  padding:10px 30px;
  background:#00aeab;
  border-radius:12px;
  outline:none;
  
  
  }
  
  
  
  #myTank{
  width:70px;
  height:70px;
  position:absolute;
  bottom:0;
  left:45%;
  transform:rotate(90deg);
  }
  
  .bullet{
  width:25px;
  height:4px;
  position:absolute;
  bottom:60px;
  transform:rotate(90deg);
  }
  
  .enemy{
  width:70px;
  height:70px;
  position:absolute;
  transform:rotate(180deg);
  
  }
</code>
  • Вопрос задан
  • 354 просмотра
Пригласить эксперта
Ответы на вопрос 1
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Надо создать коллайдеры у танков и летящих пуль, и обработать нужное вам событие при их взаимодействии.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
26 мая 2020, в 02:01
4500 руб./за проект
26 мая 2020, в 00:42
10000 руб./за проект
25 мая 2020, в 22:16
3000 руб./за проект