Título: dibujar y borrar
Publicado por: bengy en 15 Abril 2015, 18:28 pm
como podria dibujar una linea en canvas y luego borrarla cuando deje de apretar una tecla ? este es mi codigo ya puedo dibujar la linea pero cuando dejo de presionar la tecla deberia borrarse la linea dibujada bueno pretendo hacer este juego https://www.youtube.com/watch?v=WuuO7aOrTwo ayuda please!!! // Variables globales function main() { window.addEventListener('keydown', dirigir, true); var canvas = document.getElementById("canvas2D"); var cWidth = document.getElementById("canvas2D").width; var cheight = document.getElementById("canvas2D").height; var context = canvas.getContext("2d"); var player={direction:39, posX:20, posY:20, ancho:10, alto:10}; var enemigo={posX:200, posY:200, ancho:50, alto:50}; var lineaDibujada={X1:20, Y1:20, X2:player.posX, Y2:player.posY}; //context.fillRect(20,20,50,50); function init(){ if(typeof game_loop!="undefined"){ clearInterval(game_loop); } game_loop=setInterval(main,200); } function dibujarLinea(X1,Y1,X2,Y2){ context.save(); context.moveTo(X1,Y1); context.lineTo(X2,Y2); context.strokeStyle = "#f00"; context.stroke(); context.restore(); } function dirigir(evt) { if(evt.keyCode!=null){ switch(evt.keyCode){ case 39: if(player.posX<cWidth-4){ player.posX+=2; } break; case 37: if(player.posX>-1){ //dibujarLinea(player.posX,player.posY,player.posX-2,player.posY); player.posX-=2; } break; case 38: if(player.posY>-1){ // dibujarLinea(player.posX,player.posY,player.posX,player.posY-2); player.posY -=2; } break; case 40: if(player.posY<cheight-4){ // dibujarLinea(player.posX,player.posY,player.posX,player.posY+2); player.posY+=2; } break; default: player.posX=player.posX; player.posY=player.posY; } }else{ context.restore(); //context.clearRect(0,0,cWidth,cheight); } } function main(){ moverEnemigo(); setBackground(); drawPlayer(); dibujarLinea(lineaDibujada.posX1,lineaDibujada.posY1,player.posX,player.posY); drawEnemigo(); } function moverEnemigo(){ var aleatorio =Math.random(); aleatorio =aleatorio*100; if(aleatorio<25){ if(enemigo.posX<cWidth-20){ enemigo.posX+=10; }else{ enemigo.posX-=10; } } if(aleatorio>=25&& aleatorio<45){ if (enemigo.posX>20){ enemigo.posX-=10; }else{ enemigo.posX+=10; } } if(aleatorio>=45 && aleatorio<70){ if(enemigo.posY>20){ enemigo.posY-=10; } else{ enemigo.posY+=10; } } if(aleatorio>=70 && aleatorio<=100){ if(enemigo.posY<cheight-20){ enemigo.posY+=10; }else{ enemigo.posY-=10; } } //para que se acerque al jugador e imponga miedo } function setBackground(){ context.save(); context.fillStyle="white"; context.fillRect(0,0,cWidth,cheight); context.strokeStyle="black"; context.strokeRect(0,0,cWidth,cheight); context.restore(); } setBackground(); function drawPlayer(){ context.save(); context.fillStyle="blue"; context.fillRect(player.posX,player.posY, player.ancho,player.alto); context.restore(); } function drawEnemigo(){ context.save(); context.fillStyle="Red"; context.fillRect(enemigo.posX,enemigo.posY, enemigo.ancho,enemigo.alto); context.restore(); } init(); }
<!DOCTYPE HTML> <link rel="stylesheet" type="text/css" href="style.css"> <canvas id="canvas2D" width="500" height="400">Navegador no soportado</canvas>
Mod: Tema modificado, colocadas etiquetas GeSHi para mejor visualización del código
Título: Re: dibujar y borrar
Publicado por: EFEX en 15 Abril 2015, 20:37 pm
Fijate que estas abusando de .save() y .restore(), ademas de que a cada loop que haga se guarda el estado anterior en ms. Podrias utilizar keyup para saber cuando se esta dejando de presionar el boton.. //Claro necesita ser pulido.. pero para que entiendas la idea.. window.addEventListener('keyup', function(){ console.log('Se solto la tecla..'); context.restore(); }, true);
Otra idea seria crear diferentes layers.. por ejemplo 1 canvas para el cuadrado rojo, otro el cuadrado azul, otro la linea que este dibujando el cuadrado azul y por ultimo otros las diferentes lineas ya trazadas por el jugador..
Título: Re: dibujar y borrar
Publicado por: bengy en 15 Abril 2015, 23:39 pm
seria tan amable de explicarme un poquito mas
porfaaaa alguna idea
para dibujar y luego que se borre!!!
Título: Re: dibujar y borrar
Publicado por: Usuario Invitado en 16 Abril 2015, 02:20 am
Necesitas limpiar todo el canvas. Para ésto, debes de guardar todos los elementos dibujados. Al detectar que se ha soltado la tecla, se elimina el trazo reciente de la colección y se redibuja todo. window.addEventListener('keyup', function(){ redrawAllStored(); }, true);
Como todos tus elementos dibujados están guardados, redrawAllStored() los redibujaría. function redrawStoredLines(){ ctx.clearRect(0,0,canvas.width,canvas.height); if(storedLines.length==0){ return; } // redibuja cada linea guardada for(var i=0;i<storedLines.length;i++){ ctx.beginPath(); ctx.moveTo(storedLines[i].x1,storedLines[i].y1); ctx.lineTo(storedLines[i].x2,storedLines[i].y2); ctx.stroke(); } }
Título: Re: dibujar y borrar
Publicado por: bengy en 18 Abril 2015, 00:00 am
creo que se esta volviendo a dibujar la linea anterior cada vez, lo que yo pretendo hacer es lo siguiente: cuando deje de apretar la tecla 'x' se tendria que borrar la linea si sigue apretando la tecla 'x' tendria que dibujarse continumente // Variables globales
function main() { window.addEventListener('keydown', dirigir, true); window.addEventListener('keypress',press,true); window.addEventListener('keyup', soltarTeclado, true); var canvas = document.getElementById("canvas2D"); var cWidth = document.getElementById("canvas2D").width; var cheight = document.getElementById("canvas2D").height; var context = canvas.getContext("2d"); var player={direction:39, posX:20, posY:20, ancho:10, alto:10}; var enemigo={posX:200, posY:200, ancho:50, alto:50}; var lineaDibujada={X1:20, Y1:20, X2:player.posX, Y2:player.posY}; //context.fillRect(20,20,50,50); var f=0; function init(){ if(typeof game_loop!="undefined"){ clearInterval(game_loop); } game_loop=setInterval(main,200); } function dibujarLinea(X1,Y1,X2,Y2){ context.moveTo(X1,Y1); context.lineTo(X2,Y2); context.strokeStyle = "#f00"; context.stroke(); } function press(evt){ if(evt.keyCode==120){ //alert("ja");
dibujarLinea(lineaDibujada.X2,player.posY,player.posX,player.posY); } } function soltarTeclado(evt){ if(evt.keyCode==120){ context.clearRect(0,0,cWidth,cheight); } } function dirigir(evt) {
switch(evt.keyCode){ case 39: if(f==0){ lineaDibujada.X2=player.posX; f=f+1; //alert("olo"); } if(player.posX<cWidth-4){ player.posX+=2;
} break; case 37: if(player.posX>-1){ //dibujarLinea(player.posX,player.posY,player.posX-2,player.posY);
player.posX-=2; } break; case 38: if(player.posY>-1){ // dibujarLinea(player.posX,player.posY,player.posX,player.posY-2); player.posY -=2; } break; case 40: if(player.posY<cheight-4){ // dibujarLinea(player.posX,player.posY,player.posX,player.posY+2); player.posY+=2; } break; default: player.posX=player.posX; player.posY=player.posY; lineaDibujada.posX1=player.posX; lineaDibujada.posY1=player.posY; }
}
function main(){ moverEnemigo(); setBackground(); drawPlayer(); drawEnemigo(); } function moverEnemigo(){ var aleatorio =Math.random(); aleatorio =aleatorio*100; if(aleatorio<20){ if(enemigo.posX<cWidth-20){ enemigo.posX+=10; }else{ enemigo.posX-=10; } } if(aleatorio>=20&& aleatorio<45){ if (enemigo.posX>20){ enemigo.posX-=10; }else{ enemigo.posX+=10; } } if(aleatorio>=45 && aleatorio<70){ if(enemigo.posY>20){ enemigo.posY-=10; } else{ enemigo.posY+=10; } } if(aleatorio>=70 && aleatorio<=100){ if(enemigo.posY<cheight-20){ enemigo.posY+=10; }else{ enemigo.posY-=10; } }
//para que se acerque al jugador e imponga miedo } function setBackground(){ context.save(); context.fillStyle="white"; context.fillRect(0,0,cWidth,cheight); context.strokeStyle="black"; context.strokeRect(0,0,cWidth,cheight); context.restore(); } setBackground(); function drawPlayer(){ context.save(); context.fillStyle="blue"; context.fillRect(player.posX,player.posY, player.ancho,player.alto); context.restore(); } function drawEnemigo(){ context.save(); context.fillStyle="Red"; context.fillRect(enemigo.posX,enemigo.posY, enemigo.ancho,enemigo.alto); context.restore(); }
init(); }
Título: Re: dibujar y borrar
Publicado por: EFEX en 21 Abril 2015, 01:35 am
Ya dije que estas abusando de .save() y .restore()... espero que lo entiendas.. // Variables globales function main(){ window.addEventListener('keydown', dirigir, true); //Miestras tenga la tecla mantenida.. window.addEventListener('keyup', keyup, true); var canvas = document.getElementById("canvas2D"); var cWidth = document.getElementById("canvas2D").width; var cheight = document.getElementById("canvas2D").height; var context = canvas.getContext("2d"); var player={direction:39, posX:0, posY:20, ancho:10, alto:10}; var enemigo={posX:200, posY:200, ancho:50, alto:50}; var lineaDibujada={X1:20, Y1:20, X2:player.posX, Y2:player.posY}; //context.fillRect(20,20,50,50); function init(){ if(typeof game_loop!="undefined"){ clearInterval(game_loop); } game_loop=setInterval(main,200); } function dibujarLinea(X1,Y1,X2,Y2){ //context.save(); No es necesario context.moveTo(X1,Y1); context.lineTo(X2,Y2); context.strokeStyle = "#f00"; context.stroke(); //context.restore(); No es necesario } function keyup(){ console.log('Se suelta la tecla...'); //Mientras se presione la tecla mostrar la linea.. context.restore(); } function dirigir(evt) { if(evt.keyCode!=null){ switch(evt.keyCode){ case 39: if(player.posX<cWidth-4){ player.posX+=2; } break; case 37: if(player.posX>-1){ player.posX-=2; } break; case 38: if(player.posY>-1){ player.posY -=2; } break; case 40: if(player.posY<cheight-4){ player.posY+=2; } break; default: player.posX=player.posX; player.posY=player.posY; } } //Cuando se presiona una tecla es cuando dibujamos la linea dibujarLinea(lineaDibujada.posX1,lineaDibujada.posY1,player.posX,player.posY); //Guardamos la linea dibujada context.save(); } function main(){ setBackground(); //No lo necesitamos dentro del loop.. //dibujarLinea(lineaDibujada.posX1,lineaDibujada.posY1,player.posX,player.posY); drawEnemigo(); drawPlayer(); moverEnemigo(); } function moverEnemigo(){ var aleatorio =Math.random(); aleatorio =aleatorio*100; if(aleatorio<25){ if(enemigo.posX<cWidth-20){ enemigo.posX+=10; }else{ enemigo.posX-=10; } } if(aleatorio>=25&& aleatorio<45){ if (enemigo.posX>20){ enemigo.posX-=10; }else{ enemigo.posX+=10; } } if(aleatorio>=45 && aleatorio<70){ if(enemigo.posY>20){ enemigo.posY-=10; } else{ enemigo.posY+=10; } } if(aleatorio>=70 && aleatorio<=100){ if(enemigo.posY<cheight-20){ enemigo.posY+=10; }else{ enemigo.posY-=10; } } } function setBackground(){ // context.save(); No es necesario context.fillStyle="white"; context.fillRect(0,0,cWidth,cheight); context.strokeStyle="black"; context.strokeRect(0,0,cWidth,cheight); // context.restore(); No es necesario } function drawPlayer(){ // context.save(); No es necesario context.fillStyle="blue"; context.fillRect(player.posX,player.posY, player.ancho,player.alto); // context.restore(); No es necesario } function drawEnemigo(){ //context.save(); No es necesario context.fillStyle="Red"; context.fillRect(enemigo.posX,enemigo.posY, enemigo.ancho,enemigo.alto); //context.restore(); No es necesario } setBackground(); init(); }
|