为p5.js创建滚动的贴图

我创造了一个像agar.io这样的小游戏,我可以在那里四处收集点数来增加我的体型。 我相当新的JavaScript和p5.js引起了我的注意,所以我开始这样做。 到目前为止这么好,现在我唯一不知道该怎么做的事情就是创建一个摄像头,可以在比视口更大的地图上移动。 关于如何做到这一点,网上没有很多的教程,我需要确保你们不要混淆了滚动的背景。 我不想让一张照片一遍又一遍地重复我只是想要一个相机跟随一个大地图周围的玩家。 这是我的代码,如果你想啾啾,使其更好或有建议。

var user; var bushes = []; var newCords = false; var sizeW = 20, sizeH = 20; var moveX; var moveY; var botW = 20; var botH = 20; function setup(){ createCanvas(windowWidth-10, windowHeight-10); user = new player(); bot1 = new bot(); bot2 = new bot(); bot3 = new bot(); moveX = windowWidth/2; moveY = windowHeight/2; bushCords(); } function draw(){ background('white'); calculateMap(windowWidth,windowHeight); user.move(); user.display(); bot1.moveBot(); bot1.displayBot(); showScore(sizeW); } function calculateMap(width, height){ makeBush(width,height); } function makeBush(width,height){ for(var i = bushes.length; i > 0; i-=2){ var x = bushes[i]; var y = bushes[i+1]; fill('green'); ellipse(x,y,10,10); if((moveX < bushes[i] + sizeW/2 && moveX > bushes[i] - sizeW/2) && (moveY < bushes[i+1] + sizeH/2 && moveY > bushes[i+1] - sizeH/2)){ sizeW+=1; sizeH+=1; var index1 = bushes.indexOf(bushes[i]); var index2 = bushes.indexOf(bushes[i+1]); newCords = true; bushCords(index1, index2); } } } function bushCords(x,y){ if(newCords){ bushes[x] = random(windowWidth); bushes[y] = random(windowHeight); newCords = false; }else{ bushes[0] = 100; for(var i = 0; i < bushes[0]; i++){ var bushX = random(windowWidth); var bushY = random(windowHeight); bushes.push(bushX,bushY); } } } function player(){ this.move = function(){ if(keyIsDown(87)){ moveY-=2; } if(keyIsDown(65)){ moveX-=2; } if(keyIsDown(83)){ moveY+=2; } if(keyIsDown(68)){ moveX+=2; } } this.display = function(){ fill(0, 100, 200); ellipse(moveX, moveY, sizeW, sizeH); } } function bot(){ var botX = 0; var botY = 0; var shortestX; var shortestY; this.moveBot = function(){ var shortest = 999999999999; if(false){ //dist(moveX,moveX,botX,botX) < 50 should replace false botX = moveX; botY = moveY; }else{ for(var i = bushes.length; i > 0; i-=2){ var locX = bushes[i]; //gets x and y of dot var locY = bushes[i+1]; var distance = dist(botX,botY,bushes[i],bushes[i+1]) //finds distance away from dot to bot if(distance < shortest){ //if the distance is the shortest run this shortest = distance; // set new shortest shortestX = locX; //sets closest x value of dot shortestY = locY; // sets closest y value of dot } } //botX = Math.sqrt(shortestX*shortestX); // makes the x and y //botY = Math.sqrt(shortestY*shortestY); var distX = Math.floor(shortestX) var distY = Math.floor(shortestY) if(distX <= Math.floor(botX) && distY <= Math.floor(botY)){ //up and left if(distX <= Math.floor(botX)){ botX-=1; } if(distY <= Math.floor(botY)){ botY-=1; } } if(distX <= Math.floor(botX) && distY >= Math.floor(botY)){ //down and left if(distX <= Math.floor(botX)){ botX-=1 } if(distY >= 1){ botY+=1 } } if(distX >= Math.floor(botX) && distY <= Math.floor(botY)){ //up and right if(distX >= Math.floor(botX)){ botX+=1 } if(distY <= Math.floor(botY)){ botY-=1 } } if(distX >= Math.floor(botX) && distY >= Math.floor(botY)){ //down and right if(distX >= Math.floor(botY)){ botX+=1 } if(distY >= Math.floor(botY)){ botY+=1 } } for(var i = bushes.length; i > 0; i-=2){ if((botX < bushes[i] + botW/2 && botX > bushes[i] - botW/2) && (botY < bushes[i+1] + botH/2 && botY > bushes[i+1] - botH/2)){ botW+=1; botH+=1; var index1 = bushes.indexOf(bushes[i]); var index2 = bushes.indexOf(bushes[i+1]); newCords = true; bushCords(index1, index2); } } } } this.displayBot = function(){ ellipse(botX, botY, botW, botH); } } function showScore(score){ fill("black"); text("Score: " + score, 10, 20); text(mouseX + " " + mouseY, 10, 50) } //notes: //down and right (-x,-y) //down and left (x,-y) //up and left(x,y) //up and to the right (-x,y)