Estoy arreglando un antiguo juego que hice sobre la clásica serpiente come manzanas. Las manzanas y el jugador eran rectángulos y funcionaba esta función:
if (( rect["x"]>apple[i]["x"]-a_width && rect["x"]<apple[i]["x"]+a_width ) &&
(rect["y"]>apple[i]["y"]-a_height && rect["y"]<apple[i]["y"]+a_height) ){
Esto me funcionaba correctamente, pero cuando quise cambiar la formas de las manzanas de rectángulos a circulo, ya no me reconoce cuando toco una manzana.
Código completo:
<html>
<head>
<title>Prueba</title>
</head>
<body>
<canvas width="500px" height="500px" style="border:4px solid black;"></canvas>
<script>
var rect={
x:10,
y:10,
width:20,
height:20,
address:40
};
var apple=[];
var canvas=document.querySelector("canvas");
var ctx=canvas.getContext("2d");
const
/*Direcciones: Expresada usando el codigo de las teclas del teclado.*/
TOP=38,
BOTTOM=40,
LEFT=37,
RIGHT=39,
/*Flags:*/
PAUSE=80,
SQUAL=0,
MAYOR=1,
MENOR=-1,
ENTER=13,
/*Dimensiones:*/
MAX_WIDTH_CANVAS=500,
MAX_HEIGHT_CANVAS=500,
/*Times:*/
TIME_GHOST=20000,//El tiempo que la serpiente permanecerá siendo fanstasma durante el juego.
TIME_BONUS=100,/*Es para definir el tiempo en que cada manzana se creará las manzanas en tiempo de bono.*/
MAX_TIME_BONUS=8000,/*El tiempo maximo en que durara el bono de las manzanas.*/
/*Funciones:*/
FUNCTION_TRUE=function(){return true;}/*Funcion que siempre debuelve true.;)*/
;
const a_width=20,a_height=20,radio=Math.sqrt(a_width * a_width + a_height * a_height)/2;
document.body.addEventListener("keydown",function(e){
/***@todo: hacer que cuando se regrese del juego este evento cambie a otro que controle los botones.*/
e.keyCode=(e.keyCode>='A' && e.keyCode<='Z')?(95-e.keyCode)+32:e.keyCode;
switch(e.keyCode){
case LEFT://Tecla de la frecha izquierda o key left.
rect["address"]=LEFT;
break;
case RIGHT://Tecla de la frecha derecha o key right.
rect["address"]=RIGHT;
break;
case TOP://Tecla de la frecha arriba o key up.
rect["address"]=TOP;
break;
case BOTTOM://Tecla de la frecha abajo o key bottom.
rect["address"]=BOTTOM;
break;
default:/***@todo; cuando tengas toda esta funcion lista quitar este default.*/
alert(e.keyCode);
}
});
function move(){
speed=3;
switch(rect["address"]){
case LEFT://Tecla de la frecha izquierda o key left.
rect["x"]-=speed;
break;
case RIGHT://Tecla de la frecha derecha o key right.
rect["x"]+=speed;
break;
case TOP://Tecla de la frecha arriba o key up.
rect["y"]-=speed;
break;
case BOTTOM://Tecla de la frecha abajo o key bottom.
rect["y"]+=speed;
break;
default:/***@todo; cuando tengas toda esta funcion lista quitar este default.*/
console.error("Direccion no valida");
}
}
function draw(){
ctx.beginPath();
ctx.fillStyle = "green";
ctx.fillRect(rect["x"], rect["y"], rect["width"], rect["height"]);
ctx.fill();
for (let i in apple){
ctx.arc(apple[i]["x"],apple[i]["y"],radio,0,(Math.PI/180) *360);
}
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
}
function analize(){
if (rect["x"]>MAX_WIDTH_CANVAS || rect["x"]<0 || rect["y"]>MAX_HEIGHT_CANVAS || rect["y"]<0){//Se sale de la pared, asi que pierde el juego.
alert("Game over.");
clearInterval(move_interval);
clearInterval(appleInterval);
}else{
for (let i in apple){
if ((rect["x"]>apple["x"]-a_width && rect["x"]<apple["x"]+a_width ) &&
(rect["y"]>apple["y"]-a_height && rect["y"]<apple["y"]+a_height)){//Come una manzana.
alert("Yommy");
ctx.clearRect(apple["x"],apple["y"],a_width,a_height);
apple=remove_indice(apple,i);
}
}
}
}
function createApple(){
apple[apple.lenght]={
x:Math.random()*MAX_WIDTH_CANVAS,
y:Math.random()*MAX_HEIGHT_CANVAS,
};
}
function main(){
ctx.clearRect(rect["x"],rect["y"],rect["width"],rect["height"]);//A juro debemos borrar al jugador antes de moverlo.
move();
analize();
draw();
}
var move_interval=setInterval(main,170);
var appleInterval=setInterval(createApple,4000);
createApple();//Primera manzana
function remove_indice(last_array,delete_indice){
let new_array=[];
let i_new_array=0;//Indice del nuevo array.
for (let i in last_array){
if ( i==delete_indice ){
continue;
}
new_array[i_new_array]=last_array[i];
i_new_array++;
}
return new_array;
}
</script>
</body>
</html>
Nota: Es solo una versión de prueba no mi juego completo, porque es muy largo.
for (let i in apple){ ctx.fillStyle = "blue"; ctx.fillRect(apple[i]["x"]-radio, apple[i]["y"]-radio, radio*2, radio*2); ctx.fill(); ctx.arc(apple[i]["x"],apple[i]["y"],radio,0,(Math.PI/180) *360); }
espero te sirva de guia =D