Как центрировать объект в любой ячейке сетки 8x8 в фреймворке p5.js - PullRequest
Новая
       39

Как центрировать объект в любой ячейке сетки 8x8 в фреймворке p5.js

1 голос
/ 12 октября 2019

Это мой код создания игры в шахматы. 

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>

Я не имею ни малейшего представления о том, как убедиться, что при перетаскивании перетаскиваемого объекта он будет отцентрирован в ячейке, в которой он находилсяупал. Я полагаю, что код будет идти в " drag function" как оператор else, но кроме этого я застрял. Кто-нибудь может помочь?

Заранее спасибо!

1 Ответ

1 голос
/ 12 октября 2019

Рассчитайте ширину и высоту ячейки. Например: 

var cell_w = width / 8;
var cell_h = height / 8;

Если ширина и высота ячейки фиксированы, вы также можете использовать постоянные значения. Например: 

var cell_w = 75;
var cell_h = 75;

Вычислить индекс текущей ячейки, разделить текущую позицию мыши на размер ячейки и усечь результат на 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() {
    if (mouseX > pawn1.x && mouseY > pawn1.y &&
        mouseX<(pawn1.x+pawn1.w) && mouseY<(pawn1.y+pawn1.h)) {

        var cell_w = width / 8;
        var cell_h = height / 8;

        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;
    }
}

См. Пример, в котором я добавил функцию к вашемуОригинальный код: 

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;
            }
        }
    }
}

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

        var cell_w = width / 8;
        var cell_h = height / 8;
        
        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;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
...