跟拍 javascript/html canvas 进行游戏

Question

    frameUpdate = ()=>{
        canvas = $("canvas")[0]
        c = canvas.getContext('2d')
        c.resetTransform()
        c.clearRect(0, 0, canvas.width, canvas.height);
        LocalPlayer.Move();//if player press arrow keys, changes X any Y values of local player

        c.translate(LocalPlayer.X - (canvas.width/2), LocalPlayer.Y - (canvas.height/2));//not works

        LocalPlayer.Update();//draws Local Player at own X and Y position to canvas
        PList.Update();//draws other players at own X and Y position to canvas


       if (LocalPlayer) {socket.emit('sendplayer',LocalPlayer);}//sends LocalPlayer's data to server
        requestAnimationFrame(frameUpdate)
    }
    requestAnimationFrame(frameUpdate)

我想用 socket.io 和 html/canvas 制作一款类似 io 游戏的游戏但我无法让相机跟随播放器，而且我无法在互联网上找到任何简单的解决方案所以如果可以的话，我想告诉我它是如何工作的以及我的代码有什么问题

谢谢。

Answer 1

在使用 codepen 进行了多次测试后，我自己解决了自己的问题

function update() {
  c.save();
  camerax = (canvas.width/2)-(playerx);
  cameray = (canvas.height/2)-(playery);
  mtt.innerText = "Camera Position:"+camerax+","+cameray+"\nPlayer Position:"+playerx+","+playery+"\nCanvas:"+canvas.width+","+canvas.height+"\n";
  c.clearRect(0, 0, canvas.width, canvas.height);
  c.translate(camerax, cameray);

   c.fillStyle = 'green';
  c.fillRect(playerx-25, playery-25, 50, 50);
  c.restore();

  requestAnimationFrame(update);
}
requestAnimationFrame(update);

跟拍 javascript/html canvas 进行游戏

Following camera with javascript/html canvas for game

html

javascript

canvas

game-physics