How can I move a object with Javascript?

JavaScript
1

Hello, 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’m still learning new things in Javascript, thank you in advance for the help!

index.html

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

main.js

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();
2

create a function and then use requestAnimationFrame(function name) inside it and the have your cars x location add on 1 each frame or to make it faster put it higher than on heres a quick example with a rect

let speed = 2;
let x = 20;
let y = 20;

function car(x, y) {
    ctx.beginPath();
    ctx.rect(x, y, 150, 100);
    ctx.stroke();
   
    
}
 
    
    
function move() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    car(x, y)
    x += speed;
   
 requestAnimationFrame(move)

}
    
   move()
1 Like