CODEWITHSUNDEEP
javascripthtmlcanvas
Denzel Baudet
Denzel Baudet

Reputation: 25

How can I move an object with Javascript?

I created a Canvas with Javascript. I created a car with Javascript objects with like rectangles, circles etc. My question is how can I let a object move so it looks like the car is riding.

I already tried some things with what I found on Google but I can't figure it out.

I’m still learning new things in Javascript, thank you in advance for the help!

var canvasEl = document.createElement('canvas');
canvasEl.setAttribute('width', 1535);
canvasEl.setAttribute('height', 720);
 
var context = canvasEl.getContext('2d');
 
function circle(x, y){
    context.arc(x,y,30,0,2*Math.PI);
}
 
function circleCloud(x, y) {
    context.arc(x,y,30,0,2*Math.PI);
    context.fillStyle = "white";
    context.fill();
}
 
function sunBeam(x, y, s, e) {
    context.moveTo(x,y);
    context.lineTo(s,e);
    context.strokeStyle = 'rgba(252, 212, 64)';
    context.lineWidth = 4;
    context.stroke();
}
 
var body = document.querySelector('body');
 
body.appendChild(canvasEl);
 
 
var x = 0;
context.beginPath();
context.fillStyle = 'rgba(50, 150, 200, .7)';
context.fillRect(x,0,1535,250);
context.closePath();
 
context.beginPath();
context.fillStyle = "green";
context.fillRect(0,250,1535,250);
context.closePath();
 
context.beginPath();
context.fillStyle = "green";
context.fillRect(0,600,1535,130);
context.closePath();
 
 
context.beginPath();
context.fillStyle = "Lightblue";
context.fillRect(900,480,130,50);
context.lineWidth = 3;
context.strokeRect(900,480,130,50);
context.strokeStyle = "black";
context.stroke();
context.closePath();
 
 
context.beginPath();
context.fillStyle = "Blue";
context.fillRect(1030,440,70,90);
context.lineWidth = 3;
context.strokeRect(1030,440,70,90);
context.strokeStyle = "black";
context.stroke();
context.closePath();
 
 
context.beginPath();
context.fillStyle = "White";
context.fillRect(1070,460,30,20);
context.lineWidth = 3;
context.strokeRect(1070,460,30,20);
context.strokeStyle = "black";
context.stroke();
context.closePath();
 
 
context.beginPath();
context.arc(925,540,20,0,2*Math.PI);
context.fillStyle = "Gold";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
context.closePath();
 
 
context.beginPath();
context.arc(1040,540,20,0,2*Math.PI);
context.fillStyle = "Gold";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "Black";
context.stroke();
context.closePath();
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
 
<script src="js/main.js"></script>
</body>
</html>

Upvotes: 1

Views: 374

Answers (2)

Helder Sepulveda
Helder Sepulveda

Reputation: 17574

You need to start by using variables on the position of the truck ...
I see you started with: var x = 0; but not really used much on the truck

Then we move using a setInterval, inside the loop we do a few things:

  • increase the x position
  • clear the entire canvas
  • draw the object or objects

var canvasEl = document.createElement('canvas');
canvasEl.setAttribute('width', 800);
canvasEl.setAttribute('height', 160);
var context = canvasEl.getContext('2d');
var body = document.querySelector('body');
body.appendChild(canvasEl);

var x = 0;
var y = 60;

drawTruck();
setInterval(function() {
  x++;
  context.clearRect(0, 0, 800, 160);
  drawTruck();
}, 80);

function drawTruck() {
  context.beginPath();
  context.fillStyle = "Lightblue";
  context.fillRect(x, y, 130, 50);
  context.lineWidth = 3;
  context.strokeRect(x, y, 130, 50);
  context.strokeStyle = "black";
  context.stroke();
  context.closePath();

  context.beginPath();
  context.fillStyle = "Blue";
  context.fillRect(x + 130, y - 40, 70, 90);
  context.lineWidth = 3;
  context.strokeRect(x + 130, y - 40, 70, 90);
  context.stroke();
  context.closePath();

  context.beginPath();
  context.fillStyle = "White";
  context.fillRect(x + 170, y - 20, 30, 20);
  context.lineWidth = 3;
  context.strokeRect(x + 170, y - 20, 30, 20);
  context.stroke();
  context.closePath();

  context.beginPath();
  context.arc(x + 25, y + 60, 20, 0, 2 * Math.PI);
  context.fillStyle = "Gold";
  context.fill();
  context.lineWidth = 5;
  context.stroke();
  context.closePath();

  context.beginPath();
  context.arc(x + 140, y + 60, 20, 0, 2 * Math.PI);
  context.fill();
  context.stroke();
  context.closePath();

  context.beginPath();
  context.arc(x + 140 + Math.cos(x) * 8, y + 60 + Math.sin(x) * 8, 6, 0, 2 * Math.PI);
  context.stroke();
  context.closePath();
}

I added a small animation to the front wheel to simulate rotation while the truck moves forward, just some basic math to make a circle spin inside the wheel

Upvotes: 1

RAKTIM BANERJEE
RAKTIM BANERJEE

Reputation: 314

Here are 3 links which can you can follow to learn JavaScript HTML DOM Animation

Game Controller and Move object with arrow key. You should try to learn those things. Then you can do it.

Upvotes: 1

Related Questions