javascript - javascript-关于玩家模拟运动的移动世界

Question

我试图创建一个像 agar.io 这样的游戏，但是当我尝试模拟运动时，玩家 blob 会闪烁，因为我使用了一种低效的方法来更新世界：我获取每一个食物 blob 并根据其位置移动它鼠标和玩家的位置。

无论如何，我的问题是：

• 如何解决播放器的闪烁问题？
• 如何移动画布而不是所有的食物块以更有效的方式模拟运动？

var canvas = document.getElementById("gc");
var ctx = canvas.getContext("2d");



var blobs = [];
var jugador;
var posXJugador = 300;
var posYJugador = 300;
var posXMouse = 300;
var posYMouse = 300;
var colorJugador = getRandomColor();

window.onload = function() {
  var fps = 60;
  dibujarBlobs();
  canvas.addEventListener('mousemove', function(evt) {

    var mousePos = calculateMousePos(evt);
    posXMouse = mousePos.x
    posYMouse = mousePos.y


  })

  setInterval(function() {
    dibujar();

  }, 1000  / fps);
  setInterval(seguirCursor, 10/fps);
setInterval(dibujarJugador, 1000 / fps);


}

function calculateMousePos(evt) {
  var rect = canvas.getBoundingClientRect();
  var root = document.documentElement;
  var mouseX = evt.clientX - rect.left - root.scrollLeft;
  var mouseY = evt.clientY - rect.top - root.scrollTop;

  return {
    x: mouseX,
    y: mouseY

  };
}


//Otorga valores x,y,z a los blobs  
function dibujarBlobs() {
   for (i = 0; i < 30; i++) {
    var x = (Math.floor(Math.random() * 600 + 20));
    var y = (Math.floor(Math.random() * 600 + 20));
    
    blobs[i] = new BlobAgar(x, y, 10, getRandomColor() ,ctx);
}
}

function seguirCursor() {

  for (i = 0; i < 30; i++) {
    var x = blobs[i].x;
    var y = blobs[i].y;
    
    x -= ((posXMouse - posYJugador) * 0.005);
    y-= ((posYMouse - posYJugador) * 0.005);

    blobs[i].actualizar(x, y);
}


}

function dibujar() {



  ctx.fillStyle = 'black';

  ctx.fillRect(0, 0, canvas.width, canvas.height);

  //Dibuja los otros circulos
  for (i = 0; i < blobs.length; i++) {
    blobs[i].dibujarBlob();

  }

}

function dibujarJugador() {
  //Dibuja el jugador
  jugador = new BlobAgar(canvas.clientWidth / 2, canvas.height / 2, 50, 'blue', ctx);
  //jugador.actualizar(posXJugador, posYJugador);

  //Dibuja el canvas


  jugador.dibujarBlob();

}

//Color random
function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

class BlobAgar {

  constructor(x, y, r, color, ctx1) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.color = color;
    this.ctx = ctx1;
  }

  dibujarBlob() {
    this.ctx.fillStyle = this.color;
    this.ctx.beginPath();
    this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, true);
    this.ctx.fill();
  }

  actualizar(x, y) {
    this.x = x;
    this.y = y;
  }

  getX() {
    return this.x;
  }
  getY() {
    return this.y;
  }

}

<canvas id="gc" width="600" height="600"></canvas>

标签： javascripthtml5-canvas