当汽车撞到画布上的轨道时发出警报

时间:2019-02-27 09:45:21

标签: javascript html canvas

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

有辆汽车和一条直线,现在我想在每条直线碰到汽车时发出警报。

我知道如何从逻辑上做到这一点。就像如果我将汽车图像转换成四条线(边界),然后使用线相交公式来获取是否存在相交,但是我对这个画布图是陌生的,我无法弄清楚如何获得汽车的边界线方程。

更新:我已经在汽车周围制作了边界线,现在我需要帮助,以确保这些线是否相互交叉... 代码已更新,请立即检查...

另外一件事情,此时只有一行,我要在其中添加更多行...因此,我需要一个函数来更频繁地调用它,并获取行是否与汽车边框相交的信息。

注意:使用箭头键在摘要中移动汽车

0 个答案:

没有答案