use class #1

JS classes are new but extremely useful. if you understand it, you can make mini-games, simulations etc...Here an example.

For example, there are 2 cars with 2 differents colors and speed.

CODE

HTML:

<div id="demo">
    <div id="line"></div>
</div>

CSS:

#demo {
    width: 100vw;
    height: 200px;
    background: #333;
    margin: 50px 0;
}

.car {
    height: 50px;
    position: relative;
}

#car1 {
    top: 20px;
}

#car2 {
    top: 60px;
}

#line {
    border-top: 5px dashed white;
    width: 100vw;
    position: relative;
    top: 90px;
}

JS:

class car {
    constructor(size,color,border,speed) {
        this.size = size || 60;
        this.color = color || red;
        this.speed = speed || 1;
        this.border = border || 4;
    }
        
}
    
const car1 = new car(60,'red',8,1);
const car2 = new car(80,'blue',4,2);
$('#demo').append('<div class="car" id="car1"></div><div class="car" id="car2"></div>');

$('#car1').css({
    width: car1.size,
    background: car1.color,
    borderRadius: car1.border
});
$('#car2').css({
    width: car2.size,
    background: car2.color,
    borderRadius: car2.border
});
    
    
var x1 = 0, x2 = 0;
setInterval(function(){
    x1 += car1.speed;
    x2 += car2.speed;
    $('#car1').css({left:x1+'px'});
    $('#car2').css({left:x2+'px'});
    if(x1>screen.width) {
        x1=-50;
    }
        
    if(x2>screen.width) {
        x2=-50;
    }
});

DEMO

How to use js classes