1

Hi I looked for hours on this site and on internet in general how to move an object with html5/javascript and I founded a lot of answers but none of that answers was for me useful. I want to explain my problem: I just want to make move one of this two rectangles with the keyboard control but it's too difficult to me without help (I'm just 2 month learning javascript/css/html5). Please do not give a bad vote to that question, I want to help and to be helped on this site.

This is the code:

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

Thanks guys, I want to learn here from Italy but there aren't the right schools/courses and I have to work hard on the internet to do that.

angelcool.net
  • 2,505
  • 1
  • 24
  • 26
Simone P
  • 13
  • 5
  • I need a example on the code that I posted because I just looked to a lot of general examples on internet but something everytime went wrong – Simone P May 11 '16 at 20:50
  • You have no canvas with the id `myCanvas1` and you don't even use the `canvas1` variable, you can remove this line : `var canvas1 = document.getElementById("myCanvas1");`. You gave the same name (`ctx`) to both rectangle you created, you should name one `ctx1` and the other `ctx2` for example. You are mixing up canvas (the area where you paint) and contexes (what you paint), it is ctx1 you want to move. – ivann May 11 '16 at 21:06
  • I didn't use canvas for some time, it is a bit more complicated. You don't need two context, having only ctx is good. Also you don't move ctx, you [clear the canvas](http://stackoverflow.com/a/2142549/978414) and then redraw the rectangle a bit to the left or to the right. Look at Barath Ravikumar answer to learn how to handle keypresses. – ivann May 11 '16 at 21:18
  • @igwan do you mean like this? – Simone P May 11 '16 at 21:41
  • `code` Your browser does not support the canvas element. `code` – Simone P May 11 '16 at 21:41
  • (I mean for the ctx) – Simone P May 11 '16 at 21:42

6 Answers6

3

You need to listen to the keyboard events, and capture the keycodes of the keys with which you want to move the rectangle. You can then increment/decrement the absolute position of your rectangle object to move it.

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

Here is a working example

Barath Ravikumar
  • 5,658
  • 3
  • 23
  • 39
  • Thanks Barath! Now I'll try to do that but i do not understand WHERE in the code I have to add that :O :) – Simone P May 11 '16 at 21:14
  • Above code is just for explanation. For example look here http://jsfiddle.net/gabs/paw4X/ – Barath Ravikumar May 11 '16 at 21:16
  • 1
    Before I clicked the link to jsfiddle I was thinking "how could this be the answer?? a canvas must be redrawn to move something." @SimoneP This is a great example, but if you want to learn more about how and why it works, check out the khan academy javascript tutorial. That's where I learned it from. – Observer May 11 '16 at 21:17
0

I tried with that code but I think I'm using that bad:

<!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>
Simone P
  • 13
  • 5
0

I Think you forget to draw the canvas. Ctx.x and so on just set the position but not draw. So maybe you have to call dr w() function

yRand
  • 16
  • 2
0

To yRand

Where I should add the draw function? Can you please insert that by yourself into the code? :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>
Simone P
  • 13
  • 5
0

@Simone P: Inside your script, try this:

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);
yRand
  • 16
  • 2
  • And how to add a second rectangle that doesn't move? – Simone P May 12 '16 at 10:30
  • You could use ctx.fillRet(X1,Y1,20,20) after each move. X1 and Y1 are constant values to set a fix position. – yRand May 12 '16 at 10:45
  • @Simone P: The other rectangles disappear cause you don't call ctx.fillRect(0,0,30,30); after each move but just at start. Then you don't need the canvas1, use only one canvas instance – yRand May 12 '16 at 11:06
  • Do you now how to make the rectangles that don't move an obtacle for the rect when it collapse with one of them? – Simone P May 12 '16 at 14:59
  • never do that but think it's could be done with element position.you already have the position of fix one, so try to get the position of moving rectangles and stop moving when they collapse with the fix one. – yRand May 12 '16 at 15:05
0

@yRand Thanks!!!!! It works :)

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

The other rectangles when i press the keys desappear... how to fix them?

Simone P
  • 13
  • 5