How to select multiple GridLayout cells with mouse

lena.phi

Hi,
I've search all over Google and forums but I haven't found any solution that works for my problem. I'm trying to create an application for Computer use like Ruzzle and I need to figure out how to select a word, using the mouse click to "gather" the letters of the grid. How can I write my code?

GTDev

Hi,

you can create a custom QML item for each cell, capable of displaying a letter and handling clicks with a MouseArea.

For example:
CellItem.qml:

import QtQuick 2.5

Rectangle {
  id: cell
  width: 50
  height: 50
  property signal clicked
  property alias text: textItem.text
  
  Text {
    id: textItem
    anchors.centerIn: parent
  }
  
  MouseArea {
    anchors.fill: parent
    onClicked: cell.clicked()
  }
}

When having multiple cells in your grid then, use the text property and clicked signal to implement your game logic:

Item { // just some dummy item, use GridLayout or position cells however you like
  id: cells

  CellItem {
    id: cell1
    text: "H"
    onClicked: cells.handleClick(cell1.text)
  }

  CellItem {
    id: cell2
    text: "I"
    onClicked: cells.handleClick(cell2.text)
  }

  function handleClick(letter) {
     // handle clicks on letters of grid, the line below prints the clicked letter
    console.log("Letter Clicked: "+letter)
  }
}

For creating QML-based games, you can also have a look at V-Play Engine. It offers components to make mobile game development easier as well as game network/multiplayer services or plugins for e.g. advertisements or push notifications.

To learn more about game development with V-Play, please see the available the open-source game examples and tutorials. Especially the 2048 puzzle game or Juicy Squash match-3 game are a good fit for the type of game you want to make.

Cheers,
GTDev