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 Нажмите вверх и влево/вправо одновременно
Попробуйте таким же образом определить все элементы, которые могут взаимодействовать друг с другом, например, автомобиль, линию, другие препятствия, которые вы добавите позже. Поэтому определите линию со значениями ширины и высоты x, y. Тогда любое столкновение становится просто их сравнением.
Вам нужен 2d матрица вращения, основанный на угле автомобиля, а затем умножьте его на векторы, идущие от центра автомобиля к четырем углам. Размер изображения 20x40, поэтому вектор в верхний левый угол равен (-10, -20). Умножьте на матрицу вращения, затем добавьте положение автомобиля, чтобы получить текущую координату холста верхнего левого угла автомобиля. Когда у вас есть четыре угла в координатах холста, вы можете построить линии и пересечь их с краями дорожки.
мне удалось добавить границу вокруг машины... теперь может ли кто-нибудь помочь мне в получении точки пересечения линий границы с другой линией.... plpzplzpzlpzl
Использование перевода для рисования коробки вам не поможет. Я только что написал длинный комментарий, говоря вам, что именно вам нужно. Кроме того, stackoverflow не является веб-сайтом типа «пожалуйста, напишите этот код для меня», вам нужно провести массу исследований и придумать свою собственную попытку, а затем опубликовать минимальный воспроизводимый пример, демонстрирующий конкретную проблему, с которой вы столкнулись.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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