1. //-----------------------------Boton Disparar---------------------
2. function botonDisparar(){
3.  ctx.strokeStyle = "rgba(15, 96, 12, 0.6)";
4.  ctx.lineWidth = 5;
5.  ctx.strokeRect(730, 320, 50, 50);//eje x, eje y, ancho y alto
6. }
7.  
8. function clickDisparar(){
9. //Añadimos un addEventListener al canvas, para reconocer el click
10. canvas.addEventListener("click",  
11.  //Una vez se haya clickado se activará la siguiente función
12.  function(e){
13.   /*Las siguientes 2 líneas lo que hacen és saber en que parte del canvas se ha clickado. Si ha clickado dentro del cuadrado se activará mover(). La operación que utilizamos es restar la parte izquierda que sobra desdel canvas hasta el explorador (cancas.offsetLeft) con el click (e.clientY)*/
14.   if(e.clientX-canvas.offsetLeft > 730
15.    && e.clientX-canvas.offsetLeft < 780){
16.    //Aqui lo mismo que en la anterior sólo que miramos alto y ancho del cuadrado
17.    if(e.clientY-canvas.offsetTop > 320
18.     && e.clientY-canvas.offsetTop < 380){
19.     //si ha clickado dentro del cuadro verde
20.     fire();  
21.    }
22.   }
23.  }
24.  ,false);}
25.  
26. //-------------Botones Movimiento +--------------------------------
27. function botonArriba(){
28.  ctx.strokeStyle = "rgba(15, 96, 12, 0.6)";
29.  ctx.lineWidth = 5;
30.  ctx.strokeRect(70, 280, 50, 50);//eje x, eje y, ancho y alto
31. }
32. function botonAbajo(){
33.  ctx.strokeStyle = "rgba(15, 96, 12, 0.6)";
34.  ctx.lineWidth = 5;
35.  ctx.strokeRect(70, 340, 50, 50);//eje x, eje y, ancho y alto
36. }
37. function botonDerecha(){
38.  ctx.strokeStyle = "rgba(15, 96, 12, 0.6)";
39.  ctx.lineWidth = 5;
40.  ctx.strokeRect(130, 310, 50, 50);//eje x, eje y, ancho y alto
41. }
42. function botonIzquierda(){
43.  ctx.strokeStyle = "rgba(15, 96, 12, 0.6)";
44.  ctx.lineWidth = 5;
45.  ctx.strokeRect(10, 310, 50, 50);//eje x, eje y, ancho y alto
46. }
47. //Arriba ctx.strokeRect(70, 280, 50, 50); eje x, eje y, ancho y alto
48. function clickArriba(){canvas.addEventListener("click",function(e){
49.   if(e.clientX-canvas.offsetLeft > 70 //igual eje x
50.   && e.clientX-canvas.offsetLeft < 120){ //igualeje x + ancho
51.     if(e.clientY-canvas.offsetTop > 280 //igual eje y
52.     && e.clientY-canvas.offsetTop < 330){ //igualeje y + alto
53.         //movimiento a a la arriba
54.         nave.y -= 30;
55.         if(nave.y < 0){nave.y = 0;}
56.    }
57.   }
58.  }
59.  ,false);}