Hola, busqué durante horas en este sitio y en Internet en general cómo mover un objeto con html5 / javascript y encontré muchas respuestas, pero ninguna de esas respuestas fue útil para mí. Quiero explicar mi problema: solo quiero mover uno de estos dos rectángulos con el control del teclado, pero es demasiado difícil para mí sin ayuda (solo estoy 2 meses aprendiendo javascript / css / html5). No den un mal voto a esa pregunta, quiero ayudar y recibir ayuda en este sitio.

Este es el código:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #c3c3c3;">
  Your browser does not support the canvas element.
</canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0,0,30,30);

  var canvas1 = document.getElementById("myCanvas1");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(150,150,30,30);
</script>

</body>
</html>

Gracias chicos, quiero aprender aquí de Italia, pero no hay las escuelas / cursos correctos y tengo que trabajar duro en Internet para hacerlo.

1
Simone P 11 may. 2016 a las 23:49

6 respuestas

La mejor respuesta

@Simone P: Dentro de tu script, prueba esto:

var ctx = canvas.getContext("2d");
function clean() {
  canvas.width = canvas.width;
}
var positionDef = { x: 30, y: 30 };
var position = { x: 30, y: 30 };
ctx.fillStyle="#FF0000";
ctx.fillRect(position.x,position.y,20,20);
var move = {
    up: function() {
      clean();
      ctx.fillStyle="#FF0000";
      position.y -= 3;
      ctx.fillRect(position.x,position.y,20,20);
    },
    right: function() {
      clean();
      ctx.fillStyle="#FF0000";
      position.x += 3;
      ctx.fillRect(position.x,position.y,20,20);
    },
    down: function() {
      clean();
      ctx.fillStyle="#FF0000";
      position.y += 3;
      ctx.fillRect(position.x,position.y,20,20);
    },
    left: function() {
      clean();
      ctx.fillStyle="#FF0000";
      position.x -= 3;
      ctx.fillRect(position.x,position.y,20,20);
    },    
}
function keyDownEvent(e) {
  switch(e.keyCode) {
    case 40:
      move.down();
      break;
    case 39:
      move.right();
      break;
    case 38:
      move.up();
      break;
    case 37:
      move.left();
      break;
  }
}
document.addEventListener("keydown", keyDownEvent, false);
0
yRand 12 may. 2016 a las 10:19

Creo que te olvidas de dibujar el lienzo. Ctx.xy así sucesivamente, solo establece la posición pero no dibuja. Entonces quizás tengas que llamar a la función dr w ()

0
yRand 12 may. 2016 a las 09:30

A yRand

¿Dónde debo agregar la función de dibujo? ¿Puede insertarlo usted mismo en el código? : o

<!DOCTYPE html>
<html>
<body>


<canvas id="myCanvas" width="400" height="300"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,30,30);


var canvas = document.getElementById("myCanvas");
var ctx1 = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(150,150,30,30);

}

document.addEventListener('keydown', function(event) {
if(event.keyCode == 37) {
    ctx1.x -= 1;
}
//top
else if(event.keyCode == 38) {
    ctx1.y -= 1;
}
//right
else if(event.keyCode == 39) {
    ctx1.x += 1;
}
//bottom
else if(event.keyCode == 40) {
    ctx1.y += 1;
}
}


</script>
</body>
</html>
0
Simone P 12 may. 2016 a las 10:10

Intenté con ese código pero creo que estoy usando eso mal:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="400" height="300"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,30,30);


var canvas = document.getElementById("myCanvas");
var ctx1 = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(150,150,30,30);

}

document.addEventListener('keydown', function(event) {
if(event.keyCode == 37) {
    ctx1.x -= 1;
}
//top
else if(event.keyCode == 38) {
    ctx1.y -= 1;
}
//right
else if(event.keyCode == 39) {
    ctx1.x += 1;
}
//bottom
else if(event.keyCode == 40) {
    ctx1.y += 1;
}
}


</script>

</body>
</html> 
0
Simone P 12 may. 2016 a las 09:25

Debe escuchar los eventos del teclado y capturar los códigos de tecla de las teclas con las que desea mover el rectángulo. Luego puede aumentar / disminuir la posición absoluta de su objeto rectángulo para moverlo.

document.addEventListener('keydown', function(event) {
if(event.keyCode == 37) {
    object.x -= 1;
}
//top
else if(event.keyCode == 38) {
    object.y -= 1;
}
//right
else if(event.keyCode == 39) {
    object.x += 1;
}
//bottom
else if(event.keyCode == 40) {
    object.y += 1;
}
}

Aquí hay un ejemplo de trabajo

3
Barath Ravikumar 11 may. 2016 a las 20:59

@yRand Gracias !!!!! Funciona :)

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #c3c3c3;">
  Your browser does not support the canvas element.
</canvas>

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0,0,30,30);

  var canvas1 = document.getElementById("myCanvas1");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(150,150,30,30);

var ctx = canvas.getContext("2d");
function clean() {
  canvas.width = canvas.width;
}
var positionDef = { x: 30, y: 30 };
var position = { x: 30, y: 30 };
ctx.fillStyle="#FF0000";
ctx.fillRect(position.x,position.y,20,20);
var move = {
    up: function() {
      clean();
      ctx.fillStyle="#FF0000";
      position.y -= 3;
      ctx.fillRect(position.x,position.y,20,20);
    },
    right: function() {
      clean();
      ctx.fillStyle="#FF0000";
      position.x += 3;
      ctx.fillRect(position.x,position.y,20,20);
    },
    down: function() {
      clean();
      ctx.fillStyle="#FF0000";
      position.y += 3;
      ctx.fillRect(position.x,position.y,20,20);
    },
    left: function() {
      clean();
      ctx.fillStyle="#FF0000";
      position.x -= 3;
      ctx.fillRect(position.x,position.y,20,20);
    },    
}
function keyDownEvent(e) {
  switch(e.keyCode) {
    case 40:
      move.down();
      break;
    case 39:
      move.right();
      break;
    case 38:
      move.up();
      break;
    case 37:
      move.left();
      break;
  }
}
document.addEventListener("keydown", keyDownEvent, false);

</script>

</body>
</html>

Los otros rectángulos cuando presiono las teclas desaparecen ... ¿cómo solucionarlos?

0
Simone P 12 may. 2016 a las 10:36