DIGI

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Collision and Hit Detection</title>
<link rel="stylesheet" href="./style.css">
<style>
#mycanvas{
	background:white;
}

body{
	margin:20px;
	background:rgba(0,0,0,0.3);
}    
</style>
</head>
<body>
<body>
<canvas id="mycanvas" width="750" height="350" ></canvas>
    <button id="left">Mover izquierda</button>
    <button id="right">Mover derecha</button>
    <button id="fire">Disparar misil</button><br/>
<h2 id="status"></h2>
</body>
    
<script>
function initDraw(){
    var ctx=document.getElementById("mycanvas").getContext("2d");
    var recW=ctx.canvas.width;
    var recH=ctx.canvas.height;
    var enemies=[{"id":"e1","x":100,"y":-20,"w":50,"h":30,"bg":"megenta"},
                {"id":"e2","x":100,"y":-60,"w":50,"h":30,"bg":"blue"},
                {"id":"e3","x":100,"y":-100,"w":50,"h":30,"bg":"purple"},
                {"id":"e4","x":300,"y":-20,"w":50,"h":30,"bg":"megenta"},
                {"id":"e5","x":300,"y":-60,"w":50,"h":30,"bg":"blue"},
                {"id":"e6","x":300,"y":-100,"w":50,"h":30,"bg":"purple"},
                {"id":"e7","x":500,"y":-20,"w":50,"h":30,"bg":"megenta"},
                {"id":"e8","x":500,"y":-60,"w":50,"h":30,"bg":"blue"},
                {"id":"e9","x":500,"y":-100,"w":50,"h":30,"bg":"purple"}  
];

function renderEnemies(){
 for(var i=0;i<enemies.length;i++){
        var b=enemies[i];
        ctx.fillStyle=b.bg;
        ctx.fillRect(b.x,b.y +=.5,b.w,b.h);
    }
}

}
    }
}
	ctx.canvas.addEventListener("click",function(e){
        var mx=e.clientX-ctx.canvas.offsetLeft;
        var my=e.clientY-ctx.canvas.offsetTop;
     
     for(var i=0;i<enemies.length;i++){
        var b=enemies[i];
        if(mx>=b.x && mx<=b.x+b.w && my>b.y && my<b.y+b.w){
            var status=document.getElementById("status");
            status.innerHTML="You touched the "+b.id;
        }
     }
    });
 var launch=new launcher();
 launch.y=280;
 
function animate(){
ctx.clearRect(0,0,recW,recH);
renderEnemies();
launch.render();
 
}
var interval=setInterval(animate,30);
var left=document.getElementById("left");
var right=document.getElementById("right");
var fire=document.getElementById("fire");
left.addEventListener("mousedown",function(e){
    
    launch.dir="left";
    console.log(launch.dir);
});
left.addEventListener("mouseup",function(e){
   launch.dir="";
});

right.addEventListener("mousedown",function(e){
    launch.dir="right";
    //launcher.x +=5;
});

right.addEventListener("mouseup",function(e){
 launch.dir="";
});

window.addEventListener("keydown",function(e){
  e.preventDefault();
 if(e.which=="37"){
    launch.dir="left";
 }else if(e.which=="39"){
    launch.dir="right";
 }
});

fire.addEventListener("mousedown",function(e){
    launch.missiles.push({"x":launch.x+launch.w*0.5,"y":launch.y,"w":3,"h":10,"bg":"red"});
});

}

window.addEventListener("load",function(){
	initDraw();
});
</script>

</body>
</html>