Оповещение, когда автомобиль попадает на трек на холсте - PullRequest
0 голосов
/ 27 февраля 2019

var car;
var front;
var back;
var img = new Image();
img.src = 'https://cdn4.iconfinder.com/data/icons/transportation-2-4/60/transportation-2-flat-036-racing-car-top-512.png';

function startGame() {
  car = new move(12, 20, "red", 600, 300);
  pg.start();
}

var pg = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = 1200;
    this.canvas.height = 600;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.frameNo = 0;
    this.interval = setInterval(updateframe, 20);
    window.addEventListener('keydown', function(e) {
      e.preventDefault();
      pg.keys = (pg.keys || []);
      pg.keys[e.keyCode] = (e.type == "keydown");
    })
    window.addEventListener('keyup', function(e) {
      pg.keys[e.keyCode] = (e.type == "keydown");
    })
  },
  stop: function() {
    clearInterval(this.interval);
  },
  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}

function move(width, height, color, x, y, type) {

  this.type = type;
  this.width = width;
  this.height = height;
  this.speed = 0;
  this.angle = 0;
  this.moveAngle = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
        ctx = pg.context;
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.angle);
		ctx.drawImage(img, this.width / -2, this.height / -2,20,40);	
		ctx.beginPath();
		ctx.moveTo(this.width / -2, this.height / -2);
		ctx.lineTo(this.width / -2, 30);
		ctx.stroke();
		ctx.beginPath();
		ctx.moveTo(this.width / -2, 30);
		ctx.lineTo(13, (this.height / -2)+40);
		ctx.stroke();
		ctx.beginPath();
		ctx.moveTo(14, (this.height / -2)+40);
		ctx.lineTo(14, this.height / -2);
		ctx.stroke();
		ctx.beginPath();
		ctx.moveTo(14, this.height / -2);
		ctx.lineTo(this.width / -2, this.height / -2);
		ctx.stroke();		
		ctx.restore();
		ctx.beginPath();
		ctx.moveTo(300, 150);
		ctx.lineTo(600, 800);
		ctx.stroke();

  }
  this.newPos = function() {
    this.angle += this.moveAngle * Math.PI / 180;
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);

  }
}

function updateframe() {
  pg.clear();
  car.moveAngle = 0;
  car.speed = 0;
  if (pg.keys && pg.keys[37]) {
    if (pg.keys && pg.keys[40]) {
      car.moveAngle = 5;
    }
    if (pg.keys && pg.keys[38]) {
      car.moveAngle = -5;
    }
  }
  if (pg.keys && pg.keys[39]) {
    if (pg.keys && pg.keys[40]) {
      car.moveAngle = -5;
    }
    if (pg.keys && pg.keys[38]) {
      car.moveAngle = 5;
    }
  }
  if (pg.keys && pg.keys[38]) {
    car.speed = 5;
  }
  if (pg.keys && pg.keys[40]) {
    car.speed = -5;
  }
  car.newPos();
  car.update();
}

startGame();
canvas {
  border: 1px solid #d3d3d3;
  background-color: #f1f1f1;
}

Есть машина и линия, теперь я хочу сделать предупреждение всякий раз, когда машина касается линии.

Iзнать, как сделать это логически.например, если я преобразую изображение автомобиля в четыре линии (границы), то воспользуюсь формулой пересечения линий, чтобы узнать, есть ли пересечение, но я новичок в этом холстовом чертеже и не могу понять, как получить уравнение пограничной линии автомобиля.

обновление: я сделал линии границы вокруг машины, теперь мне просто нужна помощь в получении, если эти линии пересекаются друг с другом ... код обновлен, пожалуйста, проверьте это сейчас ...

еще одинДело в том, что на данный момент есть только одна линия, и я собираюсь добавить в нее больше строк ... поэтому мне нужна функция, чтобы вызывать ее чаще и получать, если линии пересекаются с границей автомобиля ...

Примечание: используйте клавиши со стрелками для перемещения автомобиля во фрагменте

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...