Why would you ever implement a game using PowerApps? I can’t come up with a single reason except for fun and challenge.
Check out the below half a minute recording to see the game I just created in action.
My initial goal was to challenge myself and Power Platform to see whether an interactive game like this could even be implemented. Turns out that the implementation was quite easy and using your mobile phone the game itself somewhat fun (for the first one or two rounds…) – well, not really, but that’s not the point 🙂
So, what is required for a game like this?
This is just a simple circle icon. However, what’s special about it, is that its X and Y coordinates are based on variables PlayerX and PlayerY accordingly.
This is the most important piece of the puzzle, as it controls the smooth display of the player moving around as well as checking whether any of the walls or the goal is hit.
The duration of the timer is 10ms and it set to start automatically and repeat. OnTimerEnd code is below:
So, every 10 milliseconds we check the direction the player wants to move the player object (left, right, up and down buttons control PlayerDirection variable) and update player coordinates. We also check whether the player object is colliding with any of the walls on the board (IsColliding boolean output property of the wall component, see details below). If a collision is detected, we set GameOver property to true value which causes the game over layer to appear on top of the maze. We also invert the current player object direction (this was for testing purposes only and not visible in the final version).
Finally we check if the player object collides with the target and set GameCompleted variable if it does.
Each wall of the maze is actually a PowerApps component that has the following custom input properties:
- ObjectX: X coordinate of the player object
- ObjectY: Y coordinate of the player object
- ObjectSize: size of the player object
Using the above input properties and knowing the curren wall instance’s width, height and position, we can determine whether the player object is colliding with the current wall component or not:
We check the value of this property for each of the wall instance in the OnTimerEnd code of the timer as discussed earlier.
To craft the actual maze, we just need to drop a number of wall components on the canvas. For each of the component you should set:
- ObjectSize -> player.Width (player is the circle icon)
- ObjectX -> PlayerX
- ObjectY -> PlayerY
(It is a good idea to copy and paste the first wall component so that you don’t have to manually update each instance’s property values)
This way each wall component instance is aware of the player object’s current position and width and is capable of calculating whether the player is colliding with it or not.
When the app loads, we have to initialize a few variables, nothing more.
If you want to test and tune the game in your own Power Platform environment, you can get it here!