CODEWITHSUNDEEP
javascripthtml
Simone P
Simone P

Reputation: 13

How to move the rectangle "var canvas1" on that code?

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.

Upvotes: 1

Views: 1767

Answers (6)

Simone P
Simone P

Reputation: 13

@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?

Upvotes: 0

yRand
yRand

Reputation: 16

@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);

Upvotes: 0

Simone P
Simone P

Reputation: 13

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>

Upvotes: 0

yRand
yRand

Reputation: 16

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

Upvotes: 0

Simone P
Simone P

Reputation: 13

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>

Upvotes: 0

Barath Ravikumar
Barath Ravikumar

Reputation: 5836

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

Upvotes: 3

Related Questions