[SOLUCIONADO] bucle

[nenu_racso90]

hola buenas estoi aciendo un juego en camvas y tengo un rectangulo con estas
propiedades var enemy=new Rectangle(40,210,10,10);
como puedo hacer que se mueva a x=150 pixel a pixel o cada poco y cuando yegue a 150 vuelva sobre sus pasos a la posicion inicial y crear asi un bucle?muchas gracias y perdon por las molestias

[Alexis88]

Si se va a mover mediante el teclado, tendrías que trabajar con el evento keypress y por cada vez que se pulse una determinada tecla, mueves al elemento la cantidad de píxeles deseada, pero si lo que deseas es que el movimiento sea automático, utiliza el método setInterval con el cual podrás ejecutar una función de manera cíclica y cuando el elemento se haya desplazado los 150 píxeles, lo colocas en la posición original. Podrías apoyarte usando una variable que vaya guardando la posición del elemento por cada vez que se desplace y luego solo realizas una condición para verificar si ya se desplazó o no los 150 píxeles.

Saludos

[nenu_racso90]

si eso quiero que mueva automaticamente de un lao a otro pero no se como se realiza eso no se mucho de javascript puedes ayudarme con un ejemplo¿

[Alexis88]

Te dejé un enlace que te llevará hacia una página con información sobre el método setInterval. Revísalo, tiene un ejemplo y su respectiva explicación.

Saludos

[nenu_racso90]

hice algo asi.
if(dir==1){ enemy.x++2;} que mueve el valor de x a la derecha como consigo que al yegar el valor de x a 150 haga una funcion que que creo k podria sere enemy.x--2; vuelva a x 40 que es el valor inicial de x en la variable del dibujo en camvas

[Bordex]

He realizado tu código, te dejo una captura, todas las lineas están comentadas con su explicación por lo que creo que te sera facil entenderlo, de no hacerlo te respondere otra vez ;)

[nenu_racso90]

muchisimas gracias Bordex

[nenu_racso90]

window.addEventListener('load',init,false);
var canvas=null,ctx=null;
var player=new Rectangle(90,0,10,10);
var enemy=new Rectangle(40,240,10,10);

var food=new Rectangle(0,80,10,30);
var food1=new Rectangle(170,80,10,30);
var food2=new Rectangle(0,200,10,30);
var food3=new Rectangle(170,200,10,30);
var lastPress=null;
var pressing=[];
var pause=false;
var gameover=false;
var score=0;
var vidas=3;
var KEY_ENTER=13;
var KEY_LEFT=37;
var KEY_RIGHT=39;
var KEY_R=82;
var KEY_ESPACE=32;
var dir=0;

function init(){
canvas=document.getElementById('canvas');
ctx=canvas.getContext('2d');
run();
repaint();

}

function run(){
setTimeout(run,100);
act();
reset();
}

function repaint(){
requestAnimationFrame(repaint);
paint(ctx);

}




function reset(){
score=0;
vidas=3;
gameover=false;
pause=false;
dir=0;
player=new Rectangle(90,0,10,10);

enemy=new Rectangle(40,240,10,10);

}

function act(){
if(!pause){





if(dir==0){
if(pressing[KEY_RIGHT])
{pressing=null;}

if(pressing[KEY_LEFT])
{pressing=null;}

if(lastPress==KEY_ENTER){
lastPress=null;}
;}


if(gameover){
dir=0;

if(lastPress==KEY_ENTER){
lastPress=null;}

if(lastPress==KEY_ESPACE){
reset();}

if(pressing[KEY_RIGHT])
{pressing=null;}

if(pressing[KEY_LEFT])
{pressing=null;}
}



if(lastPress==KEY_ESPACE){
dir=1;
lastPress=null;}

if(lastPress==KEY_R){
reset();
lastPress=null;
}

//move enemy




// Move Rect
if(dir==1){
player.y+=2;}

if(pressing[KEY_RIGHT])
{player.x+=5;}

if(pressing[KEY_LEFT])
{player.x-=5;}

// Out Screen
if(player.x>canvas.width-10)
{player.x=canvas.width-10;}

if(player.y>canvas.height){
vidas--;
player=new Rectangle(90,0,10,10);
}
if(vidas==0)
{gameover=true;}

if(player.x<0)
{player.x=0;}


if(player.y<0)
{player.y=0;}



if(player.intersects(food)){
score+=5;
player=new Rectangle(90,0,10,10);
}

if(player.intersects(food1)){
score+=10;
player=new Rectangle(90,0,10,10);
}

if(player.intersects(enemy)){
vidas-=1;
player=new Rectangle(90,0,10,10);
}
if(player.intersects(food2)){
score+=15;
player=new Rectangle(90,0,10,10);
}

if(player.intersects(food3)){
score+=20;
player=new Rectangle(90,0,10,10);
}



}

// Pause/Unpause

if(lastPress==KEY_ENTER){
pause=!pause;
lastPress=null;
}
}

function paint(ctx){
ctx.fillStyle='#000';
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle='#0f0';
player.fill(ctx);
ctx.fillStyle='#0ff';
enemy.fill(ctx);
ctx.fillStyle='#fff';
food.fill(ctx);
ctx.fillStyle='#f00';
food1.fill(ctx);
ctx.fillStyle='#0f0';
food2.fill(ctx);
ctx.fillStyle='#00f';
food3.fill(ctx);

ctx.fillStyle='#fff';
ctx.fillText('PUNTUACION: '+score,7,15);
ctx.fillText('VIDAS: '+vidas,7,30);

if(dir==0){
ctx.textAlign='center';
ctx.font='10px verdana';
ctx.fillText('presiona ESPACIO para empezar',90,150);
ctx.fillText('presiona R para Reinicar',90,170);
ctx.textAlign='left';

;}

if(pause){
ctx.textAlign='center';
ctx.font='10px verdana';
ctx.fillText('PAUSE',90,150);
ctx.fillText('presiona ENTER para volver',90,170);

ctx.textAlign='left';
}
if(gameover){
ctx.textAlign='center';
ctx.font='10px verdana';
ctx.fillText('GAME OVER',90,130);

ctx.textAlign='left';
}

}

document.addEventListener('keydown',function(evt){
lastPress=evt.keyCode;
pressing[evt.keyCode]=true;
},false);

document.addEventListener('keyup',function(evt){
pressing[evt.keyCode]=false;
},false);

function Rectangle(x,y,width,height){
this.x=(x==null)?0:x;
this.y=(y==null)?0:y;
this.width=(width==null)?0:width;
this.height=(height==null)?this.width:height;

this.intersects=function(rect){
if(rect!=null){
return(this.x<rect.x+rect.width&&
this.x+this.width>rect.x&&
this.y<rect.y+rect.height&&
this.y+this.height>rect.y);
}
}

this.fill=function(ctx){
if(ctx!=null){
ctx.fillRect(this.x,this.y,this.width,this.height) ;
}
}
}


window.requestAnimationFrame=(function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){window.setTimeout(callback,17); };
})();

pondria el codigo de mover el enemigo en la fila 104 que corresponde a l cuadrado blanco de abajo


<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
</head>.
<body>
<canvas id="canvas" width="180" height="300" >
Canvas not supported by your browser.
</canvas>

<script type="application/javascript" src="game.js"></script>
</body>
</html>