Question

在点之间插值，并继续以您设置的速度沿该方向行进。

您可能会猜到下面的代码，我喜欢让子弹从一个点移动到另一个点，并在到达该点后继续沿该方向行进...问题是它并不总是朝该方向行进。再看一下代码，我觉得使用一个或两个函数，而不是像现在这样的对象类，应该更容易实现。如果我愿意，我也希望选择停止它，然后再通过该点，但是我以后可以自己实现。

var bullet = {
  dx:0,dy:0,posX:0,posY:0,Left:0,Top:0,x:0,y:0,angle:0,
  Tx:[],Ty:[],Sx:[],Sy:[],cv:null,TenX:[],TenY:[],R:0,
  allow:false,time:0,R:50,sc_:0,boardW:1000,boardH:1000,
  i:0,

  main(cb){


    this.boardH = window.innerHeight;
    this.boardW = window.innerWidth;

    this.x = this.y = 0;
    this.allow = true;
    this.time = 50;
    this.divBullet = document.querySelector(".bullet");
    this.gunPosAim({clientX:459+200,clientY:136+200});//clientX:184+100,clientY:364+100
    //x':474.1499938964844,'y':364.1000061035156,//3 - {'x':329,'y':-193//"7 - {'x':621.4666748046875,'y':83
    this.calAngle();
    this.addBullet();
    setInterval(()=>{
      debugger;
      this.calAngle();
    this.renderBullet();
      this.paintDivBullet(cb);
    },10);
  },
  gunPosAim(pos){
    let {posX,posY,sc_,boardW,boardH} = this;
    posX=pos.clientX-(sc_-boardW)/2;
    posY=pos.clientY;//-(sc_-boardH)/2;
    Object.assign(this,{posX,posY});
  },
  calAngle(){
    let {dx,dy,posX,posY,Left,Top,x,y,angle,cv,R,boardH,boardW} = this;
    dx = posX - x - Left;
    dy = posY - y - Top;
    angle = Math.atan2(dy,dx); 
    Object.assign(this, {dx,dy,posX,posY,Left,Top,x,y,angle});
  },

  addBullet(){
    let {Tx,Ty,Sx,Sy,R,angle,Left,Top,allow,time} = this;
    if(allow){//add bullets
      if(time%50==0){
        Tx.push(Math.floor(R*Math.cos(angle))+Left);
        Ty.push(Math.floor(R*Math.sin(angle))+Top);
        Sx.push(Math.floor(R*Math.cos(angle)));
        Sy.push(Math.floor(R*Math.sin(angle)));
      }
    }
  },

  renderBullet(){
    let {Tx,Ty,Sx,Sy} = this;
    for(let i=0;i<Tx.length;i++){//bullets
      if(Tx[i]!==null&&Ty[i]!==null){
        Tx[i]+=((Sx[i])/20);
        Ty[i]+=((Sy[i])/20);
      }
    }
  },
  paintDivBullet(cb){
    let {Tx,Ty,i,x,y} = this;
    cb&&cb({x:x+Tx[i],y:y+Ty[i]},x+Tx[i],y+Ty[i]);
    //return;
    this.divBullet.style.left = `${x+Tx[i]}px`;
    this.divBullet.style.top = `${y+Ty[i]}px`;
  }

}

似乎没有朝我要给出x，y坐标的方向前进。

如何在点之间旅行并继续朝那个方向旅行？

0 个答案: