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>
<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
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..
seria tan amable de explicarme un poquito mas
porfaaaa alguna idea
para dibujar y luego que se borre!!!
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();
}
}
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();
}
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();
}