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

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($(".bullet").position().top - $(".enemy").position().top){
$(el).remove()
console.log("true")
}
})
})
}
  • Вопрос задан
  • 188 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Razo1199 Автор вопроса
$(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 )
    }































});<code lang="html">
<!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>
</code>
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы