Fatal编程技术网
  • javascript/
  • Javascript 如何在p5.js中为游戏创建小地图？

Javascript 如何在p5.js中为游戏创建小地图？

javascript

Javascript 如何在p5.js中为游戏创建小地图？,javascript,p5.js,Javascript,P5.js,转到p5.js代码编辑器联机并上传以下库（样板代码p5.play.js）： matter.js p5.dom.min.js p5.js p5.play.js p5.sound.min.js 在index.html中： <!DOCTYPE html><html><head> <script src="p5.js"></script> <script src="p5.dom.min.js&

转到p5.js代码编辑器联机并上传以下库（样板代码p5.play.js）：

  • matter.js

  • p5.dom.min.js

  • p5.js

  • p5.play.js

  • p5.sound.min.js

  • 在index.html中：

     <!DOCTYPE html><html><head>
 <script src="p5.js"></script>
 <script src="p5.dom.min.js"></script>
 <script src="p5.sound.min.js"></script>
    现在运行代码

    现在尝试用箭头键移动精灵

    你会发现，我已经尝试了一个小地图（虽然它没有显示你正在移动的角色的位置，目前）。当您尝试使用箭头键移动角色时，角色会移动，您可以看到小地图也会移动。但最重要的是，当你试图移动角色时，你可以在小地图上看到猛拉。我不想那样。此外，我的小地图代码可能是错误的。请告诉我，我应该如何准确地为p5.js中的2d battle royale游戏创建小地图

    实际上，我将精灵的x和y位置链接到了小地图的x和y位置，如您所见。有没有更好的方法？？？

    我们可以使用copy（）函数在p5.js中为游戏制作一个小地图

    在绘制字符之前，您能使用
    copy（）
    吗？可以考虑……是否能解决此问题考虑让示例代码在StackOverflow中运行，而不是让人们在外部站点上复制您的问题：不……另一种方法是复制（）函数复制画布的一部分，我们可以把它放进去……但只有一个问题。Copy（）函数无法复制画布上的精灵并将其放入小地图中，因此必须以其他方式完成，我知道……但我也希望有更好的方法 
     <link rel="stylesheet" type="text/css" href="style.css">
 <meta charset="utf-8">

        var bg;
var sprite;


function preload() {
  bg = loadImage("infiniteground.png");
}

function setup() {
  createCanvas(400, 400);
  
  
  
  sprite = createSprite(200,200,10,10);
  sprite.shapeColor = "red";
}

function draw() {
  background(220);
  camera.position.x = sprite.x;
  camera.position.y = sprite.y;
  image(bg, 200,200,500,500);
  image(bg, sprite.x + 100, sprite.y - 150, 100, 100);
 
  movement();
  drawSprites();
}

function movement(){
  if(keyDown("down")){
    sprite.y = sprite.y + 2;
    
  }
  if(keyDown("up")){
    sprite.y = sprite.y - 2;
  }
  if(keyDown("right")){
    sprite.x = sprite.x + 2;
  }
  if(keyDown("left")){
    sprite.x = sprite.x - 2;
  }
}