Sign in to follow this  
KungFuFlames

How to detect click on element in Array without looping?

Recommended Posts

I will try to explain my idea with the simple code:

 this.board.playerInTurn.activePieces.forEach( (entryPiece) => {
                this.boardUI.pieces.forEach( (entryPieceUI) => {
                    entryPieceUI.setInteractive();
                    entryPieceUI.on('clicked', () => {
                       console.log("Piece is Clicked");
                    })
                })
            })

So at this point I have 16 objects in the array. I want to get a specific object from the list without looping the all of them. Is there more optimized way to do it?

Share this post


Link to post
Share on other sites

DAMN!

Thanks, thats really cleaned my code. Although I still struggling to fix something up.

pieceInputHandler(): void {
    this.boardUI.pieces.forEach((entryPieceUI) => {
        entryPieceUI.setData('piece', entryPieceUI.piece);
        entryPieceUI.setInteractive();
        })
}

InputListener(): void {
            this.game.input.on('gameobjectdown', function (pointer, gameObject) {
            //Ignore the code below
console.log(this.board.movementGenerator.piecesMap.get(gameObject.getData('piece').currentCell.address)[0]);
   }, this);
}

So right now based on 'piece' key/id I get the exact object thats been clicked. Which is awesome. But not I want to create a custom event that will be triggered after piece is clicked. At the console.log(...) I have all the possible cells that can piece can take.(in form of Array). My idea is to make those cell highlight with the use of "tint" property.

I modified InputListener()

InputListener(): void {
      this.game.input.on('gameobjectdown', function (pointer, gameObject) {
           if (gameObject.getData('piece')) {
                this.boardUI.destroyActiveCells(); //resets cell's colors

               let possibleCells = this.board.movementGenerator.piecesMap.get(gameObject.getData('piece').currentCell.address)[0];

                this.game.events.on('addCellHighlights', this.cellHighlightListener, this)

                this.game.events.emit('addCellHighlights', possibleCells);
                }
      }, this);
}

Now this is the function for highlighting. Still looping...ouu I forgot to mention that I'm using the MVC architecture. I does work fine now, but if you got any suggestions I will be super thankful if you share :)

cellHighlightListener(possibleCells: any): void {
   this.boardUI.cells.forEach((entryCellUI) => {
          possibleCells.forEach((cell) => {
               if (cell.address === entryCellUI.cell.address) {
                   entryCellUI.tint = POSSIBLE_CELL_MOVE_COLOUR;
                    }
          })
   })
}



 

Share this post


Link to post
Share on other sites

You might consider using `group` for cells. Check out these examples.

For looping through cells you could use array methods like `filter` or something or use one of these methods. I'm not sure what you're trying to achieve but this might be useful.

Looks like you are doing online multiplayer board game. I also want to make online multiplayer. Can you tell me what you're using (socket.io or something like that) for sending moves between players?

Share this post


Link to post
Share on other sites

I'm working on Chess game. I want the game to be extendable, so I can add diffrent type of modes:

  • 2Players on same screen
  • Verses AI
  • Multiplayer
  • Chess puzzles and other...

That's why I'm trying to use MVC architecture(Model-View-Controller). Where the model is the game login, movements and core rules of the chess. The view is what can be represented in form of Sprites, Images, Colours, Animations, Tweens and so on. And the controller which is going connect the model with the view.

Also I'm trying to optimize the game as much as possible so it could be mobile friendly. For example:

 this.board.movementGenerator.getMoveBehaviours(this.board.players[0].activePieces);

This is a function part of the model, which is going to generate all the possible moves that the current player can take. This function is called only once at the start of the player's turn. By doing that I will run the algorithms for calculations only once and not every time when a figure is clicked.

Thanks for your suggestions I will try to improve the code. Thanks :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.