我试图从儿童 Js 一书中了解 OOP Js。它变得有趣了,所以我创建了 2 个由机器(特斯拉、日产)绘制的变量,并使其在变量到达屏幕末尾时显示“完成”消息。
你怎么知道哪个先到?应该是“完this
车先到”。但我仍然不明白该怎么做。
var Car = function(x, y) {
this.x = x;
this.y = y;
this.draw();
};
Car.prototype.draw = function() {
var carHtml = '<img src="http://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(distance) {
this.x += distance;
this.carElement.css({
position: 'absolute',
left: this.x,
top: this.y
});
if (this.x >= $('html').innerWidth()) {
tesla.x = 0;
nissan.x = 0;
console.log('Первый финишировал ')
}
};
var tesla = new Car(0, 20);
var nissan = new Car(0, 100);
$('.start').click(function() {
setInterval(function() {
tesla.moveRight(Math.floor(Math.random() * 5));
nissan.moveRight(Math.floor(Math.random() * 5))
}, 30);
});
$('.stop').click(function() {
location.reload();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="start">Старт / ускорение</button>
<button class="stop">Стоп</button>
那么,既然您正在学习 OOP,您已经可以编写一个类
Race
来传输开始/暂停比赛、检查获胜者等方法。您可以将机器列表传递给此类,以免与变量tesla
,nissan
.但这已经是给你的了,DZ;)