dibujar y borrar

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

0 Miembros y 2 Visitantes están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

.rn3w.

15 Abril 2015, 18:28 PM Ultima modificación: 18 Abril 2015, 05:45 AM por engel lex
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

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

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
15 Abril 2015, 23:39 PM Ultima modificación: 15 Abril 2015, 23:43 PM por DeviiAC
seria tan amable de explicarme un poquito mas


porfaaaa  alguna idea

para dibujar y luego que se borre!!!

Usuario Invitado

#3
16 Abril 2015, 02:20 AM Ultima modificación: 16 Abril 2015, 17:37 PM por Gus Garsaky
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.

#4
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


Código [Seleccionar]

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

#5
21 Abril 2015, 01:35 AM
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 
Imprimir
Ir Arriba Páginas1
Acciones del Usuario