Moving a game character in Canvas Apps with the keyboard

When playing with creating games in a canvas app (still working on my Scrambler game), it always annoyed me that the keyboard could not be used to control my spaceship, as there is no capture a key press feature in power apps yet.

But this tweeted blogpost by Matt Beard about implementing OnKeyPress was just the prompt I needed. I thought if a text input can be used as a trigger for the onChange, all I needed was to make the text input cover the whole screen as the top layer, and hey presto, it works.

Very simple example:

On app onStart I centre my icon by setting its X and Y to be the variables gX and gY:

Set(gX,900);Set(gY,400)

and then force focus onto my text input box, which has been resized to fill the screen, reordered to be the top level and all its colour properties set to be opaque, so who would ever know it is there ….

Then the hidden slider control onChange property (default input of the slider control is Len(TextInput1.Text) ) is set to the below, where the keys a,w,d and x are used to move the icon left, up, right and down.

If(
    TextInput1.Text = "a",
    Set(
        gX,
        gX - 10
    );
    Reset(TextInput1),
    If(
        TextInput1.Text = "d",
        Set(
            gX,
            gX + 10
        );
        Reset(TextInput1),
        If(
            TextInput1.Text = "w",
            Set(
                gY,
                gY - 10
            );
            Reset(TextInput1),
            If(
                TextInput1.Text = "x",
                Set(
                    gY,
                    gY + 10
                );
                Reset(TextInput1),
                Reset(TextInput1)
            )
        )
    )
)

Which results in the keyboard being able to do this rather dull video:

Now I just need to get the cursor keys to be used instead.

Now back to those 80s video games.