Javascript 如何更换摄像头'；基于变量的s x和y

在中，如果你的画布太大，你必须滚动画布，有没有办法改变它，当你的播放器离开画布时，相机会改变，所以你的播放器总是在相机中。 这就是我目前所拥有的。还有，有没有一种方法可以根据播放器大小改变缩放

var playerX;
var playerY;
var playerSize = 10;
var playerSpeed = (playerSize / Math.pow(playerSize, 1.44)) * 20;
var Newcelltimer = 0;
var cell = []
var cellEaten = 0;
var eaten = false;
var pull = 0;
var spawnTime = 100;
var spawnTimeUpgrader = 0;
function setup() {

  frameRate(50)
  createCanvas(600, 600);
  playerX = random(30, width - 30);
  playerY = random(30, height - 30);


}

function draw() {
  playerSpeed = (playerSize / Math.pow(playerSize, 1.44)) * 10


  Newcelltimer++;

  background(220);

  if (keyIsDown(UP_ARROW) && playerY - playerSize / 2 >= 0) {
    playerY -= playerSpeed;
  }
  if (keyIsDown(RIGHT_ARROW) && playerX + playerSize / 2 <= width) {
    playerX += playerSpeed;
  }
  if (keyIsDown(DOWN_ARROW) && playerY + playerSize / 2 <= height) {
    playerY += playerSpeed;
  }
  if (keyIsDown(LEFT_ARROW) && playerX - playerSize / 2 >= 0) {
    playerX -= playerSpeed;
  }

  if (Newcelltimer % spawnTime == 0) {
    cell.push(ceil(random(10, width - 10)),
      ceil(random(10, height - 10)))

  }

  for (var i = 0; i < cell.length / 2; i++) {

    fill(0, 255, 255, 100)
    circle(cell[i * 2], cell[i * 2 + 1], 7)
  }



  fill(255, 255, 0)
  circle(playerX,playerY,playerSize)
  fill(0)
  ellipse(playerX - playerSize / 5, playerY - playerSize / 10, playerSize / 5, playerSize / 3)
  ellipse(playerX + playerSize / 5, playerY - playerSize / 10, playerSize / 5, playerSize / 3)
  arc(playerX, playerY + playerSize / 5, playerSize / 2, playerSize / 5, 0, 3.2, PIE)
  fill(255, 255, 0)
  noStroke()
  arc(playerX, (playerY + playerSize / 5) - 1, playerSize / 2, playerSize / 5, 0, 3.2, PIE)
  stroke(0)



  
  
  for(var i=0;i<cell.length/2;i++)
    {
  let d = int(dist(cell[i*2],cell[i*2+1],playerX,playerY))
  if(d<=playerSize/2+pull)
      {
       playerSize+=7;
       cell.splice(i*2,2)
      }
    }


  if (playerSize >= width | playerSize >= height) {
    if (width > height) {
      playerSize = height;
    } else {
      playerSize = width;
    }




  }
  // if (Newcelltimer % 500 === 0) {
  //   cell.splice(0, 2)
  // }

  if(pull>=50)
    {
      pull = 50;
    }


  fill(0)
  text("Your Size is: " + playerSize, 30, 30)
  text("Your pull is: "+pull,30,60)
  text("Upgrade your pull for "+pull*15+" size",430,45)
  text("Double Spawn Rate for " + 50*pow(2,spawnTimeUpgrader)+" size",430,100);
  fill(0,0,0,0)
  rect(410,75,187,40)
  rect(410,20,187,40)

   
}
//  function mouseClicked()
// {

//   if(mouseX>410&&mouseX<600&&mouseY>20&&mouseY<60&&playerSize-10>pull*15)
//     {
//       playerSize-=pull*15
//       pull+=10;
//     }
  

//  if(mouseX>410&&mouseX<600&&mouseY>75&&mouseY<115&&playerSize-10>50*pow(2,spawnTimeUpgrader))
//     {
//       playerSize-=50*pow(2,spawnTimeUpgrader);
//       spawnTime/=2;
//       spawnTimerUpgrader++;
//     }
// }

var-playerX；
游戏；
var-playerSize=10；
var playerSpeed=（playerSize/Math.pow（playerSize，1.44））*20；
var Newcelltimer=0；
变量单元格=[]
var=0；
var=false；
var-pull=0；
var生成时间=100；
var spawnTimeUpgrader=0；
函数设置（）{
帧率（50）
createCanvas（600600）；
playerX=随机（30，宽度-30）；
playerY=随机（30，高度-30）；
}
函数绘图（）{
playerSpeed=（playerSize/Math.pow（playerSize，1.44））*10
Newcelltimer++；
背景（220）；
如果（键向下（向上箭头）和&playerY-playerSize/2>=0）{
playerY-=玩家速度；
}
if（键向下（右箭头）&&playerX+playerSize/2高度）{
playerSize=高度；
}否则{
playerSize=宽度；
}
}
//如果（Newcelltimer%500==0）{
//单元拼接（0,2）
// }
如果（拉力>=50）
{
拉力=50；
}
填充（0）
文本（“您的大小为：”+playerSize，30，30）
文本（“你的拉力是：”+拉力，30,60）
文本（“升级您的拉力为”+拉力*15+尺寸”，430,45）
文本（“双繁殖率为”+50*pow（2，繁殖时间升级）+“大小”，430100）；
填充（0,0,0,0）
rect（410,75187,40）
rect（410,20187,40）
}
//函数mouseClicked（）
// {
//如果（mouseX>410&&mouseX20&&mouseYpull*15）
//     {
//playerSize-=拉动*15
//拉力+=10；
//     }
//if（mouseX>410&&mouseX75&&mouseY50*pow（2，spawnTimeUpgrader））
//     {
//playerSize-=50*pow（2，升级机）；
//产卵时间/=2；
//spawnTimerUpgrader++；
//     }
// }

编辑：我可以更改相机，这是新的：

var playerX;
var playerY;
var playerSize = 10;
var playerSpeed = (playerSize / Math.pow(playerSize, 1.44)) * 20;
var Newcelltimer = 0;
var cell = []
var cellEaten = 0;
var eaten = false;
var zoom = 1;
var newZoom = 64/playerSize
function setup() {

  frameRate(50)
  createCanvas(600, 450);
  playerX = random(30-width, width - 30);
  playerY = random(30-height, height - 30);


}

function draw() {
  translate(width / 2, height / 2);
  var newzoom = 64 / playerSize;
  zoom = lerp(zoom, newzoom, 0.00000001);
  scale(zoom);
  translate(-playerX, -playerY);
  console.log(lerp(zoom,newzoom,0.1))
  
  playerSpeed = (playerSize / Math.pow(playerSize, 1.44)) * 10


  Newcelltimer++;

  background(220);

  if (keyIsDown(UP_ARROW)&&playerY>0-width) {
    playerY -= playerSpeed;
  }
  if (keyIsDown(RIGHT_ARROW)&&playerX<2*width) {
    playerX += playerSpeed;
  }
  if (keyIsDown(DOWN_ARROW)&&playerY<2*width) {
    playerY += playerSpeed;
  }
  if (keyIsDown(LEFT_ARROW)&&playerX>0-width) {
    playerX -= playerSpeed;
  }

  if (Newcelltimer % 30 == 0) {
    cell.push(ceil(random(0-width,2*width)),
      ceil(random(0-height,2*height)))

  }

  for (var i = 0; i < cell.length / 2; i++) {

    fill(0, 255, 255, 100)
    circle(cell[i * 2], cell[i * 2 + 1], 7)
  }



  fill(255, 255, 0)
  circle(playerX,playerY,playerSize)
  fill(0)
  ellipse(playerX - playerSize / 5, playerY - playerSize / 10, playerSize / 5, playerSize / 3)
  ellipse(playerX + playerSize / 5, playerY - playerSize / 10, playerSize / 5, playerSize / 3)
  arc(playerX, playerY + playerSize / 5, playerSize / 2, playerSize / 5, 0, 3.2, PIE)
  fill(255, 255, 0)
  noStroke()
  arc(playerX, (playerY + playerSize / 5) - 1, playerSize / 2, playerSize / 5, 0, 3.2, PIE)
  stroke(0)



  
  
  for(var i=0;i<cell.length/2;i++)
    {
  let d = int(dist(cell[i*2],cell[i*2+1],playerX,playerY))
  if(d<=playerSize/2)
      {
       playerSize+=7;
       cell.splice(i*2,2)
      }
    }


  if (playerSize >= 3*width | playerSize >= 3*height) {
    if (width > height) {
      playerSize = height;
    } else {
      playerSize = width;
    }




  }
  // if (Newcelltimer % 500 === 0) {
  //   cell.splice(0, 2)
  // }

  // if(pull>=50)
  //   {
  //     pull = 50;
  //   }


  fill(0)
  text("Your Size is: " + playerSize, playerX-270, playerY-200)
  // text("Your pull is: "+pull,30,60)
  // text("Upgrade your pull for "+pull*15+" size",430,45)
  // text("Double Spawn Rate for " + 50*pow(2,spawnTimeUpgrader)+" size",430,100);
  // fill(0,0,0,0)
  // rect(410,75,187,40)
  // rect(410,20,187,40)

   
}
//  function mouseClicked()
// {

//   if(mouseX>410&&mouseX<600&&mouseY>20&&mouseY<60&&playerSize-10>pull*15)
//     {
//       playerSize-=pull*15
//       pull+=10;
//     }
  

//  if(mouseX>410&&mouseX<600&&mouseY>75&&mouseY<115&&playerSize-10>50*pow(2,spawnTimeUpgrader))
//     {
//       playerSize-=50*pow(2,spawnTimeUpgrader);
//       spawnTime/=2;
//       spawnTimerUpgrader++;
//     }
// }

var-playerX；
游戏；
var-playerSize=10；
var playerSpeed=（playerSize/Math.pow（playerSize，1.44））*20；
var Newcelltimer=0；
变量单元格=[]
var=0；
var=false；
var-zoom=1；
var newZoom=64/playerSize
函数设置（）{
帧率（50）
createCanvas（600450）；
playerX=随机（30宽度，宽度-30）；
playerY=随机（30高，30高）；
}
函数绘图（）{
平移（宽度/2，高度/2）；
var newzoom=64/playerSize；
zoom=lerp（zoom，newzoom，0.00000001）；
缩放（缩放）；
翻译（-playerX，-playerY）；
console.log（lerp（zoom，newzoom，0.1））
playerSpeed=（playerSize/Math.pow（playerSize，1.44））*10
Newcelltimer++；
背景（220）；
if（键向下（向上箭头）和&playerY>0-宽度）{
playerY-=玩家速度；
}
if（按键向下（右箭头）和播放器X高度）{
playerSize=高度；
}否则{
playerSize=宽度；
}
}
//如果（Newcelltimer%500==0）{
//单元拼接（0,2）
// }
//如果（拉力>=50）
//   {
//拉力=50；
//   }
填充（0）
文本（“您的尺寸是：”+playerSize，playerX-270，playerY-200）
//文本（“你的拉力是：”+拉力，30,60）
//文本（“升级您的拉力为”+拉力*15+尺寸”，430,45）
//文本（“双繁殖率为”+50*pow（2，繁殖时间升级）+“大小”，430100）；
//填充（0,0,0,0）
//rect（410,75187,40）
//rect（410,20187,40）
}
//函数mouseClicked（）
// {
//如果（mouseX>410&&mouseX20&&mouseYpull*15）
//     {
//playerSize-=拉动*15
//拉力+=10；
//     }
//if（mouseX>410&&mouseX75&&mouseY50*pow（2，spawnTimeUpgrader））
//     {
//playerSize-=50*pow（2，升级机）；
//产卵时间/=2；
//spawnTimerUpgrader++；
//     }
// }

---

我无法解决的问题是尺寸的缩放。

我可以从您的代码中看出，您非常接近

在p5.js中扩展的关键组件是和函数，这两个组件都不是您所需要的

更具体地说，这是您要查找的代码：

translate（宽度/2，高度/2）；//将我们放在屏幕中间
缩放（10/playerSize）//根据玩家大小缩放世界
翻译（-playerX，-playerY）；//使玩家成为世界的中心

所以现在当你玩的时候，当你吃一些食物的时候，玩家的世界观会增加

var-playerX；
游戏；
var-playerSize=10；
var playerSpeed=（playerSize/Math.pow（playerSize，1.44））*20；
var Newcelltimer=0；
变量单元格=[]
var=0；
var=false；
var-zoom=1；
函数设置（）{
帧率（50）
createCanvas（600450）；
playerX=宽度/2
playerY=身高/2；
}
函数绘图（）{
平移（宽度/2，高度/2）；
比例（10/playerSize）
翻译（-playerX，-playerY）；
playerSpeed=（playerSize/Math.pow（playerSize，1.44））*10
Newcelltimer++；
背景（220）；
如果（键向下（向上箭头）和&playerY>0-宽度）{
playerY-=玩家速度；
}
如果（键向下（右箭头）和&playerX<2*宽度）{
playerX+=玩家速度；
}
if（按键向下（向下箭头）和&playerY<2*宽度）{
playerY+=玩家速度；
}
如果（键向下（左箭头）和&playerX>0-宽度）{
playerX-=玩家速度；
}
如果（Newcelltimer%30==0）{
cell.push（cell（随机（0-宽度，2*宽度）），
ceil（随机（0-高度，2*高度）））
}
对于（变量i=0；i