Как сделать, чтобы методы moveDown, moveLeft, moveRight и moveUp принимали величину сдвига в качестве аргумента? К примеру, в этом случае для перемещения машины nissan на 10 пикселей вправо нужно будет дать команду nissan.moveRight(10).
Затем нужно использовать setInterval, чтобы двигать две машины (nissan и tesla) в право, каждые 30 миллисекунд смещая их на расстояние от 0 до 5 пикселей.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Гонки</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript">
var Car = function (x, y) {
this.x = x;
this.y = y;
Car.speed = 20;
};
Car.prototype.draw = function () {
var carHtml = '<img src="https://www.nostarch.com/images/car.png">';
this.carElement = $(carHtml);
this.carElement.css({
position: "absolute",
left: this.x,
top: this.y
});
$("body").append(this.carElement);
};
Car.prototype.moveRight = function () {
this.x += Car.speed;
this.carElement.css({
left: this.x,
top: this.y
});
};
Car.prototype.moveLeft = function () {
this.x -= Car.speed;
this.carElement.css({
left: this.x,
top: this.y
});
};
Car.prototype.moveUp = function () {
this.y -= Car.speed;
this.carElement.css({
left: this.x,
top: this.y
});
};
Car.prototype.moveDown = function () {
this.y += Car.speed;
this.carElement.css({
left: this.x,
top: this.y
});
};
var tesla = new Car(20, 20);
var nissan = new Car(100, 200);
tesla.draw();
nissan.draw();
</script>
</body>
</html>
