javascript - 如何在 p5.js 框架的 8x8 网格的任何单元格中将对象居中
问题描述
这是我制作国际象棋游戏的代码。
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 语句进入“拖动函数”,但其他比我被困住了。任何人都可以帮忙吗?
提前致谢!
解决方案
计算单元格的宽度和高度。例如:
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>
推荐阅读
- parallel-processing - openmp并行循环的输出容器
- mysql - 无法从下一条记录更新具有相同列的表 错误 1093
- c# - 在控制台应用程序中创建 ASP.NET 用户
- java - 如何知道片段视图何时准备就绪
- php - Laravel 寄存器控制器,添加另一个创建
- java - RecyclerView 在滚动时弄乱了子视图
- python - Matplotlib 中多个散点图的彩色标记日期
- c++ - 当构造函数需要模板化参数时,如何从模板化类继承?
- python - Pandas DataFrame 解析整数
- sql - 是否可以使用 SQL 以实际日期顺序订购“月年”或“年月”