mercredi 21 décembre 2016

How to make a Grid, draw a shape in any of those cells and connect them together?

I have a very unique question regarding to my project

I have made a Grid including 25x15 cells using 3 classes:

First class named Tile.as and make cells for me:

package 
{
import flash.display.Shape;
import flash.display.Sprite;

public class Tile extends Sprite
{
    static const TILE_SIZE:int = 30;

    public function Tile() 
    {
        var tile:Shape=new Shape();
        tile.graphics.lineStyle(3, 0x000000);
        tile.graphics.drawRect(TILE_SIZE / 2, TILE_SIZE / 2, TILE_SIZE, TILE_SIZE);

        this.addChild(tile);
    }

 }

}

The next class named Grid.as to integrate all Tile together:

package 
{
import flash.display.Sprite;

public class Grid extends Sprite
{
    static const GRID_SIZE:int = 25;
    private var tileList:Vector.<Tile>;

    public function Grid() 
    {
        tileList = new Vector.<Tile>;

        for (var v:int = 0; v < GRID_SIZE; v++)
        {
            for (var z:int = 0; z < GRID_SIZE-15; z++)
            {
                var tile:Tile = new Tile();

                tile.x = v*Tile.TILE_SIZE;
                tile.y = z*Tile.TILE_SIZE;

                tileList.push(tile);

                this.addChild(tile);

                tile = null;

            }

        }

    }

}

}

And then I showed Grid in my Main.as class and show it in the out put:

public class Main extends Sprite 
{

    //grid
    private var grid:Grid;
    //

    public function Main() 
    {
        //show the grid
        grid = new Grid();
        grid.x = 10;
        grid.y = 10;
        this.addChild(grid);
        //  
    }
}

This is what I can see now: enter image description here

My question is that i want to add two objects in this grid. For example:

object A will be located in one cell (Tile)

object B will be located in another cell (Tile)

and then I want to connect these 2 objects together by highlighting the dimensions of the cells! this is an example of what I need to have:

enter image description here

Please ask me, if there is more explanation need to added!

And if I am going through the wrong way, please make me correct!

Thanks in advance!

Aucun commentaire:

Enregistrer un commentaire