Javascript画布

我一直在寻找一种方法来制作一个系统，在这个系统中，摄影机/视口随着播放器的移动而移动。正如你在小提琴上看到的，地图比画布和我想要制作的要大得多，所以玩家一直都在中间，除非靠近边缘

球员还没动。我想我需要把一些变量传递到x和y位置

此外，如果你知道任何关于这方面的好教程，我将非常感谢

请帮忙

提前谢谢

我的js代码：

var canvas = document.getElementById("myCanvas");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");

            var width = 800;
            var height = 700;

            var level = [];
            var level_1 = [
                "bbggggggbbgggggggggggggggggg",
                "gbggggggbbgggbbbbbbggggggggg",
                "gbggggggbbgggbgggggggggggggg",
                "gbbbbbbbbbbbbbgggggggggggggg",
                "ggggggggggbggggggggggggggggg",
                "ggggggggggbggggggggggggggggg",
        "ggggggggggbggggggggggggggggg",
                "ggggggggggbggggggggggggggggg",
        "ggggggggggbggggggggggggggggg",
                "ggggggggggbggggggggggggggggg",
        "ggggggggggbggggggggggggggggg",
                "ggggggggggbggggggggggggggggg"
            ];


            var Ground = function(x, y, label) {
                this.x = x;
                this.y = y;
                this.label = label;

        this.draw = function() {
            if(this.label == "g") {
            ctx.fillStyle = 'rgb(0,255,0)';
            ctx.fillRect(this.x, this.y, 15, 15);
          }
          if(this.label == "b") {
            ctx.fillStyle = 'rgb(0,0,255)';
            ctx.fillRect(this.x, this.y, 15, 15);
          }
        }
      }

      var Player = function(x, y) {
        this.x = x;
        this.y = y;
        this.size = 10;

        this.draw = function() {
            ctx.fillStyle = 'rgb(0,0,0)';
          ctx.fillRect(this.x, this.y, this.size, this.size);
        }

        this.move = function() {
         // code for player to move
        }
      }

            var makeLevel = function() {
                for(var i = 0; i < level_1.length; i++) {
                    for(var j = 0; j < level_1[i].length; j++) {
                        switch(level_1[i][j]) {
                            case "g" :
                                level.push(new Ground(j*15, i*15, "g"));
                                break;
              case "b" :
                                level.push(new Ground(j*15, i*15, "b"));
                                break;
                        }
                    }
                }
            }

            makeLevel();

      var player = new Player(5,20);

            function draw() {
                ctx.clearRect(0,0,800,700);

        for(var i=0; i<level.length; i++) {
                    level[i].draw();
                }

        player.draw();

                window.requestAnimationFrame(draw);
            }

            draw();
         }

var canvas=document.getElementById（“myCanvas”）；
if（canvas.getContext）{
var ctx=canvas.getContext（“2d”）；
var宽度=800；
var高度=700；
风险值水平=[]；
变量级别_1=[
“bbgggggggggggggggggggggggggggggg”，
“gbggggbbggbbbbbbbgggggggggggggg”，
“gbggggbbgggbgggggggggggggggggggg”，
“gbbbbbgggggggggggg”，
“gggggggggggggggggggggggggggggggggggggg”，
“gggggggggggggggggggggggggggggggggggggg”，
“gggggggggggggggggggggggggggggggggggggg”，
“gggggggggggggggggggggggggggggggggggggg”，
“gggggggggggggggggggggggggggggggggggggg”，
“gggggggggggggggggggggggggggggggggggggg”，
“gggggggggggggggggggggggggggggggggggggg”，
“gggggggggggggggggggggggggggggggggggg”
];
var接地=功能（x、y、标签）{
这个.x=x；
这个。y=y；
this.label=标签；
this.draw=函数（）{
如果（this.label==“g”）{
ctx.fillStyle='rgb（0255,0）'；
ctx.fillRect（this.x，this.y，15,15）；
}
如果（this.label==“b”）{
ctx.fillStyle='rgb（0,0255）'；
ctx.fillRect（this.x，this.y，15,15）；
}
}
}
变量Player=函数（x，y）{
这个.x=x；
这个。y=y；
这个尺寸=10；
this.draw=函数（）{
ctx.fillStyle='rgb（0,0,0）'；
ctx.fillRect（this.x，this.y，this.size，this.size）；
}
this.move=函数（）{
//玩家移动的代码
}
}
var makeLevel=function（）{
对于（变量i=0；i对于（var i=0；i您的相机/视口是您的画布大小。您需要记住每个对象将有两个不同的位置

地图位置
画布位置（如果它们不在视图端口中）（如果它们不在视图端口中，则计算该位置没有意义）
在玩家始终处于中间的2D游戏中，您的“地图”是移动的对象。在渲染场景之前，您需要执行以下操作：

更新任何动态对象的贴图位置
更新玩家地图位置
使用画布的尺寸定义地图上与玩家位置对应的表面积（即最小和最大边界…应为画布的4个角）
获取该曲面区域中的所有对象（静态/动态）（视口边界中的对象）
将其地图位置转换为画布位置（使用玩家的地图位置、玩家的画布位置和画布尺寸）
获得对象的所有画布位置后，渲染场景
如果您有任何问题，请随时发表评论。我可能对某些部分不太清楚