$(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>
