如何在 p5.js 框架中的 8x8 网格的任何单元格中居中对象

Question

这是我制作国际象棋游戏的代码。

let pawn1; //variable for object

var offset = 10;

function setup(){

  createCanvas(600,600); // canvas

  pawn1 = new Pawn(); // pawn1 is a new Pawn object

}

function draw(){

  background(0); //black background

  checkboard();  //to make an 8x8 grid  

  pawn1.show();  //shows pawn1 object on canvas

  drag();        //allows the pawn object to be dragged

}

function Pawn(){

  this.x = 25; // x position of object

  this.y = 25; // y position of object

  this.w = 20; // width of object

  this.h = 20; // height of object

  this.show = function(){

    fill(255); // object is white

    rect(this.x, this.y, this.w, this.h); //object is a rectangle with x,y,w,h variables

  }

}

// grid maker function

function checkboard(){

  for (var x = 0; x < width; x += width / 8) {

    for (var y = 0; y < height; y += height / 8) {

      stroke(255); //grid lines is white

      strokeWeight(1); // lines drawn are 1 units thick

      line(x, 0, x, height); // vertical lines

      line(0, y, width, y); // horizontal lines

    }

  }

}

function drag(){

    // if mouse is clicked down and inside of the dimensions of the object then:

  if(mouseIsPressed){

    if(mouseX > pawn1.x && mouseY > pawn1.y){

      if(mouseX<(pawn1.x+pawn1.w) && mouseY<(pawn1.y+pawn1.h)){

                //square will move with the mouse pointer 

        pawn1.x = mouseX - offset;

        pawn1.y = mouseY - offset;

      }

    }

  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

我不知道如何确保拖动的对象何时被放下，它会在它被放入的单元格中居中。我想代码会作为一个 else 语句进入“拖动函数”，但其他比我被卡住了。任何人都可以帮忙吗？

Answer 1

计算单元格的宽度和高度。例如：var cell_w = width / 8;var cell_h = height / 8;&nbsp;&nbsp;如果单元格的宽度和高度是固定的，那么您也可以使用常量值。例如：var cell_w = 75;var cell_h = 75;&nbsp;&nbsp;计算当前单元格的索引，将当前鼠标位置除以单元格的大小并将结果截断int()。例如：var cell_ix = int(mouseX / cell_w);var cell_iy = int(mouseY / cell_h);计算鼠标所在单元格的中心点：var cell_cx = (cell_ix+0.5) * cell_w;var cell_cy = (cell_iy+0.5) * cell_h;计算对象的新位置，取决于单元格的中心和对象的大小：pawn1.x = cell_cx - pawn1.w/2;pawn1.y = cell_cy - pawn1.h/2;你可以在mouseReleased()回电中做到这一点。这会导致对象可以平滑拖动，但在释放鼠标时立即“跳”到单元格的中心：function mouseReleased() {&nbsp; &nbsp; if (mouseX > pawn1.x && mouseY > pawn1.y &&&nbsp; &nbsp; &nbsp; &nbsp; mouseX<(pawn1.x+pawn1.w) && mouseY<(pawn1.y+pawn1.h)) {&nbsp; &nbsp; &nbsp; &nbsp; var cell_w = width / 8;&nbsp; &nbsp; &nbsp; &nbsp; var cell_h = height / 8;&nbsp; &nbsp; &nbsp; &nbsp; var cell_ix = int(mouseX / cell_w);&nbsp; &nbsp; &nbsp; &nbsp; var cell_iy = int(mouseY / cell_h);&nbsp; &nbsp; &nbsp; &nbsp; var cell_cx = (cell_ix+0.5) * cell_w;&nbsp; &nbsp; &nbsp; &nbsp; var cell_cy = (cell_iy+0.5) * cell_h;&nbsp; &nbsp; &nbsp; &nbsp; pawn1.x = cell_cx - pawn1.w/2;&nbsp; &nbsp; &nbsp; &nbsp; pawn1.y = cell_cy - pawn1.h/2;&nbsp; &nbsp; }}请参阅示例，其中我已将函数添加到您的原始代码中：let pawn1; //variable for objectvar offset = 10;function setup(){&nbsp; &nbsp; createCanvas(600,600); // canvas&nbsp; &nbsp; pawn1 = new Pawn(); // pawn1 is a new Pawn object}function draw(){&nbsp; &nbsp; background(0); //black background&nbsp; &nbsp; checkboard();&nbsp; //to make an 8x8 grid&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; pawn1.show();&nbsp; //shows pawn1 object on canvas&nbsp; &nbsp; drag();&nbsp; &nbsp; &nbsp; &nbsp; //allows the pawn object to be dragged}function Pawn(){&nbsp; &nbsp; this.x = 25; // x position of object&nbsp; &nbsp; this.y = 25; // y position of object&nbsp; &nbsp; this.w = 20; // width of object&nbsp; &nbsp; this.h = 20; // height of object&nbsp; &nbsp; this.show = function(){&nbsp; &nbsp; &nbsp; &nbsp; fill(255); // object is white&nbsp; &nbsp; &nbsp; &nbsp; rect(this.x, this.y, this.w, this.h); //object is a rectangle with x,y,w,h variables&nbsp; &nbsp; }}// grid maker functionfunction checkboard(){&nbsp; &nbsp; for (var x = 0; x < width; x += width / 8) {&nbsp; &nbsp; &nbsp; &nbsp; for (var y = 0; y < height; y += height / 8) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stroke(255); //grid lines is white&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; strokeWeight(1); // lines drawn are 1 units thick&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; line(x, 0, x, height); // vertical lines&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; line(0, y, width, y); // horizontal lines&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}function drag(){&nbsp; &nbsp; // if mouse is clicked down and inside of the dimensions of the object then:&nbsp; &nbsp; if(mouseIsPressed){&nbsp; &nbsp; &nbsp; &nbsp; if(mouseX > pawn1.x && mouseY > pawn1.y){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(mouseX<(pawn1.x+pawn1.w) && mouseY<(pawn1.y+pawn1.h)){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //square will move with the mouse pointer&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pawn1.x = mouseX - offset;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pawn1.y = mouseY - offset;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}function mouseReleased() {&nbsp; &nbsp; if (mouseX > pawn1.x && mouseY > pawn1.y &&&nbsp; &nbsp; &nbsp; &nbsp; mouseX<(pawn1.x+pawn1.w) && mouseY<(pawn1.y+pawn1.h)) {&nbsp; &nbsp; &nbsp; &nbsp; var cell_w = width / 8;&nbsp; &nbsp; &nbsp; &nbsp; var cell_h = height / 8;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; var cell_ix = int(mouseX / cell_w);&nbsp; &nbsp; &nbsp; &nbsp; var cell_iy = int(mouseY / cell_h);&nbsp; &nbsp; &nbsp; &nbsp; var cell_cx = (cell_ix+0.5) * cell_w;&nbsp; &nbsp; &nbsp; &nbsp; var cell_cy = (cell_iy+0.5) * cell_h;&nbsp; &nbsp; &nbsp; &nbsp; pawn1.x = cell_cx - pawn1.w/2;&nbsp; &nbsp; &nbsp; &nbsp; pawn1.y = cell_cy - pawn1.h/2;&nbsp; &nbsp; }}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>