I am trying to create crossword game in my current app. As my current project is in iOS native so I wanted to implement this game only in UIKit so that it can be easily integrated.


i need these types of movement in the crossword(as shown in below gif), like whenever I entered any char, it automatically moved to the next grid and when I entered the backspace button it clear that grid and automatically moves the previous grid.

enter image description here


Right now user have to select each and every grid to give input, which reduces the user interaction. So I wanted to implement this movement so that user can use crossword in a better way.

What I have done?

I successfully created the UI part by using the json structure which is similar to iPuz. But facing issue to implement this movement in crossword.

To check screen ui image, json structure & git repository, pls cleck here, if you need any further information pls ask in comment I will update the question.


If you aren't storing the word data in a grid yet, I'd suggest converting to that, as it will make stuff easier.

The file format gives you the location of each number in the crossword, so based on the "cursor's" location you can query the index of the word that the user is typing in.

The file format also specifies the direction that the words flow in. Combining this data, and the fact that the words flow either left-to-right or top-to-bottom, you can easily increment/decrement the cursor position.

I'm not sure how you want the typing to work (i.e. can the user choose an arbitrary cell and type there), but you could just store the current direction when the user starts typing in a word starting cell.

Here's some really rough pseudo code:

int CursorX, CursorY = 0;
int XDir, YDir = 0;

void OnKey(Key key) {
    if (key != Backspace) {
        // Gets the index of the word that starts here. Probably a lookup from some table.
        wordStart = QueryWordStartIndex(CursorX, CursorY);
        if (wordStart > 0)  // A word starts here, update direction.
            if (WordDirection(wordStart) == "Across") XDir = 1, YDir = 0;
            else XDir = 0, YDir = 1;

        Grid[CursorY][CursorX] = key.Char;

        // TODO: Check if the pos is valid here etc.
        CursorX += XDir;
        CursorY += YDir;
    else {
        Grid[CursorY][CursorX] = "";    
        CursorX -= XDir;
        CursorY -= YDir;

You'll probably need to handle a lot of different cases and decide how to actually set CursorX/Y to a word start position.

Now, if the player starts typing in a grid where there isn't a word starting, this will be a lot harder if not impossible. In some cases you might be able to use empty cells around the cursor position to determine what word the player is trying to fill in (i.e. if there are empty cells in only one direction, that's the direction the cursor should be moved), but there will be situations where you can't deduce this information. In those situations, I'd just wait for the player to move the cursor to some direction, and remember this direction for convecutive character entries.

  • \$\begingroup\$ If I do this in the starting cell is pretty easy, just follow the starting cell direction and increment by 1 upto the last cell of that hint. But what if user clicks on the random cell and start inserting the chars then it will be tricky to track the direction. Right now the puzzle I mentioned in question is very short but if the crossword is like this, the getting too hard to get the direction of cursor each time. \$\endgroup\$
    – dahiya_boy
    Feb 9 '18 at 5:07
  • \$\begingroup\$ There's no magic solution to that. There are situations where guessing the direction the player wants to move correctly just won't be possible. I've added some thoughts on this to the answer. \$\endgroup\$
    – Tyyppi_77
    Feb 9 '18 at 9:38
  • \$\begingroup\$ Sorry if my words are weird bcz i good in apps but not in games so these logics are tricky for me and even I don't know far much scope of these logic. So at last I want to ask last question, In across-lite, they also moving the cursor direction as shown in question. Even in apps ios/android, the cursor is moving properly like this. Is there proper format or structure that I can follow to create this. \$\endgroup\$
    – dahiya_boy
    Feb 9 '18 at 9:53
  • 1
    \$\begingroup\$ The behaviour in the gif in your question is easy and covered by my answer. I do kinda believe that there's some sort of higher-level logic going on where the user actually chooses the word number they want to enter (highlighted with the grey background) instead of using a freehand cursor to deduce the direction. This is a problem that's not solved by a file format or a data structure. \$\endgroup\$
    – Tyyppi_77
    Feb 9 '18 at 11:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.