主页 / 问题 / 1027167
Accepted
Александр
Asked:2020-09-23 17:28:00 +0000 UTC2020-09-23 17:28:00 +0000 UTC

找出哪辆车先来 JS

  • 772

我试图从儿童 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>

javascript

1 个回答

  1. Best Answer

    var Car = function(x, y, title){
  this.x = x;
  this.y = y;
  this.title = title;
  this.draw();
};

Car.prototype.draw = function(){
  const 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({
    left: this.x,
    top: this.y
  });
};


const tesla = new Car(0, 20, 'tesla');
const nissan = new Car(0, 100, 'nissan');

let speed = 5; // Это будет скорость, с которой движутся машины.
let startInterval = null; // Здесь будет храниться setInterval.

const checkWinner = (car1, car2) => {
  if(car1.x >= $('html').innerWidth()){
    return car1;
  } else if (car2.x  >= $('html').innerWidth()) {
    return car2;
  }
  
  return null;
}

const stopRace = () => {
  clearInterval(startInterval);
  startInterval = null;
}

const endRace = () => {
  speed = 5;
  stopRace();
}

$('.start').click(function() {
  // Увеличиваем скорость через переменную, а не создавая новые интервалы.
  if (startInterval !== null) {
    return speed += 1;
  }
  startInterval = setInterval(function () {
    // Проверяйте условие здесь, а не в методе moveRight.
    const winner = checkWinner(tesla, nissan);
    if (winner) {
      alert(`Победитель: ${winner.title}`);
      tesla.x = 0;
      nissan.x = 0;
      return endRace();
    }

    tesla.moveRight(Math.floor(Math.random() * speed));
    nissan.moveRight(Math.floor(Math.random() * speed))
  }, 16);
});

$('.stop').click(function() {
  stopRace();
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="start">Старт / ускорение</button>
<button class="stop">Стоп</button>

    那么，既然您正在学习 OOP，您已经可以编写一个类Race来传输开始/暂停比赛、检查获胜者等方法。您可以将机器列表传递给此类，以免与变量tesla, nissan.
    但这已经是给你的了，DZ；）

    • 2

相关问题