Оповещение, когда машина попадает на трассу в холсте

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;
}

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

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

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

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

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

только вверх работает

abhinavxeon 27.02.2019 10:49

@abhinavxeon Нажмите вверх и влево/вправо одновременно

Chris G 27.02.2019 10:50

Попробуйте таким же образом определить все элементы, которые могут взаимодействовать друг с другом, например, автомобиль, линию, другие препятствия, которые вы добавите позже. Поэтому определите линию со значениями ширины и высоты x, y. Тогда любое столкновение становится просто их сравнением.

Shilly 27.02.2019 10:52

Вам нужен 2d матрица вращения, основанный на угле автомобиля, а затем умножьте его на векторы, идущие от центра автомобиля к четырем углам. Размер изображения 20x40, поэтому вектор в верхний левый угол равен (-10, -20). Умножьте на матрицу вращения, затем добавьте положение автомобиля, чтобы получить текущую координату холста верхнего левого угла автомобиля. Когда у вас есть четыре угла в координатах холста, вы можете построить линии и пересечь их с краями дорожки.

Chris G 27.02.2019 10:58

мне удалось добавить границу вокруг машины... теперь может ли кто-нибудь помочь мне в получении точки пересечения линий границы с другой линией.... plpzplzpzlpzl

fghuj 27.02.2019 11:17

Использование перевода для рисования коробки вам не поможет. Я только что написал длинный комментарий, говоря вам, что именно вам нужно. Кроме того, stackoverflow не является веб-сайтом типа «пожалуйста, напишите этот код для меня», вам нужно провести массу исследований и придумать свою собственную попытку, а затем опубликовать минимальный воспроизводимый пример, демонстрирующий конкретную проблему, с которой вы столкнулись.

Chris G 27.02.2019 11:25
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
52
0

Другие вопросы по теме