CODEWITHSUNDEEP
javascripthtml
Dalokey
Dalokey

Reputation: 104

Dragging into grid

I'm trying to create a game where boxes can be dragged into a grid. A box can only be dragged if the space in the grid is empty.

I would like to know if there is a way for the grid, to be active with the boxes that will be dragged into the grid. Also, for the boxes to snap and be placed when the mouse is released near the empty grid space.

I have started by creating a grid using lines.

var canvasBg = document.getElementById('canvas');
var ctxBg = canvasBg.getContext('2d');
var ctx = canvas.getContext('2d');

// height and width of grid
var gridWidth = canvasBg.width;     //500px
var gridHeight= canvasBg.height;    //500px

//draw grid
    for (var i = 0; i <= gridWidth; i+= 50) {
        ctx.beginPath();
        ctx.moveTo(50 + i,0);
        ctx.lineTo(50 + i, gridHeight);
        ctx.stroke();
    }

    for (var i = 0; i <= gridHeight; i+= 50) {
        ctx.beginPath();
        ctx.moveTo(0,50 + i);
        ctx.lineTo(gridWidth, 50 + i);
        ctx.stroke();
    }

Sorry if this is not much to follow, and thank you for reading, any feedback would be much appreciated.

Since this question is ignored and I need an answer, I kept on trying to find other solutions, I think I found one but not sure.

If there is a dot or a small circle in the canvas, is it possible to find the location of this dot/circle and would it possible to do what the game intend to, allow a corner of the box to connect to the dot/circle, and then allow that box to be placed in the canvas where the dot is.

Thank you for reading, any answer would help a lot.

Upvotes: 3

Views: 217

Answers (1)

Niddro
Niddro

Reputation: 1725

To answer your first question:

You could make a new object called Box that simulates a taken grid-location

function Box (row,col) {
    this.row = row;
    this.col = col;
    this.color = "#000000";
}

Just declare a variable for your boxes:

var boxes = new Array();

and add some boxed to your game:

boxes[boxes.length] = new Box(3,5);
boxes[boxes.length] = new Box(5,8);

Here is how to draw the boxes:

for (var b = 0; b < boxes.length; b++) {
    ctx.fillStyle = boxes[i].color;
    ctx.fillRect(boxes[b].row*50, boxes[b].col*50, 50, 50);
}

Whenever the player is moving a box you keep track on which row and column the player is.

if the player's is holding the box at x=321, y=48 it would mean row 1 and column 5.

In order to check if that grid is free, you can use this function

function checkAvailability(playerX, playerY) {
    var playerRow = playerY%50;
    var playerCol = playerX%50;
    var available = true;
    for (var b = 0; b < boxes.length; b++) {
        if (playerRow == boxes[i].row && playerCol == boxes[i].col) {
            available = false;
            break;
        }
    }
    return available;
}

In regards to your second question about the dot. Everything painted on the canvas is painted by you and therefore you should know the location of the dot, just use that information in your code however you want.

Upvotes: 2

Related Questions