dibujar y borrar

Iniciado por .rn3w., 15 Abril 2015, 18:28 PM

0 Miembros y 1 Visitante están viendo este tema.

.rn3w.

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!!!
Código (javascript) [Seleccionar]


// 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();
}




Código (html4strict) [Seleccionar]

<!DOCTYPE HTML>
<html>
<head>
<script src="animatorStix.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>GOGOGO</title>
</head>

<body onload="main()">
<h1> GOGOGO </h1>
<canvas id="canvas2D" width="500" height="400">Navegador no soportado</canvas>


</body>

</html>


Mod: Tema modificado, colocadas etiquetas GeSHi para mejor visualización del código

EFEX

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..

Código (javascript) [Seleccionar]

//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..
GITHUB 

.rn3w.

#2
seria tan amable de explicarme un poquito mas


porfaaaa  alguna idea

para dibujar y luego que se borre!!!


Usuario Invitado

#3
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.

Código (javascript) [Seleccionar]
window.addEventListener('keyup', function(){
   redrawAllStored();
}, true);


Como todos tus elementos dibujados están guardados, redrawAllStored() los redibujaría.

Código (javascript) [Seleccionar]
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();
       }
   }
"La vida es muy peligrosa. No por las personas que hacen el mal, si no por las que se sientan a ver lo que pasa." Albert Einstein

.rn3w.

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();
}



EFEX

Ya dije que estas abusando de  .save() y .restore()... espero que lo entiendas..

Código (javascript) [Seleccionar]

// 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();
}
GITHUB