Here's another incomplete app that I will not get to for a while.
I think I got the hard parts down. And since I won't get to it for a while, why don't you pick it up?
Here's what you can do next:
- Implement life gain and loss
- Implement PowerUps and scoring for PowerUps
- Implement bonus targets
- Implement warp across the map for mobs (it's already in place for avatar)
- Detect winning conditions and advance to the next round
- Rename and restyle the app
- Add more settings
There's a lot of goodness in this app to check out regardless of whether or not you continue:
- Components: there are very few objects in the tree view. That's because everything's been simplified into components!
- Besides the components for games, there's a header/footer component that is flexible in use.
- Custom properties: THERE'S LOTS OF THESE. See what I pick out.
If any of you in countries with commas as decimal signs want to make the app work, there are two places where the code has to be changed:
- On the "ScreenGame" screen, replace the code in the ImageMobs control with the following:
// For performance, don't render this picture until loading is complete and the user is on this screen. If(And(!IsEmpty(coordinatePlane);!load;App.ActiveScreen=ScreenGame); "data:image/svg+xml," & EncodeUrl(" <svg width='"& Substitute(Text(ImageMobs.Width);",";".") &"' height='"& Substitute(Text(ImageMobs.Height);",";".") &"' viewBox='0 0 "& Substitute(Text(ImageMobs.Width);",";".") &" "& Substitute(Text(ImageMobs.Height);",";".") &"' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>" & Concat(mobs; // Create a rectangle for the walls. "<rect x='"& Substitute(Text((x-1)*ComponentInput.SpriteWidth);",";".") &"' y='"& Substitute(Text((y-1)*ComponentInput.SpriteWidth);",";".") &"' width='"& Substitute(Text(ComponentInput.SpriteWidth);",";".") &"' height='"& Substitute(Text(ComponentInput.SpriteWidth);",";".") &"' rx='"& 0 &"' ry='"& 0 &"' " & "fill='"& color &"' " & "fill-opacity='.5' " & "stroke='"& color &"' stroke-width='' />" ) & "</svg>" ) ) - On the same screen, replace the code inside the ImageTiles control with the following code:
// For performance, don't render this picture until loading is complete and the user is on this screen. If(And(!IsEmpty(coordinatePlane);!load;App.ActiveScreen=ScreenGame); "data:image/svg+xml," & EncodeUrl(" <svg width='"& Substitute(Text(ImageTiles.Width);",";".") &"' height='"& Substitute(Text(ImageTiles.Height);",";".") &"' viewBox='0 0 "& Substitute(Text(ImageTiles.Width);",";".") &" "& Substitute(Text(ImageTiles.Height);",";".") &"' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>" & Concat(coordinatePlane; /* If(id exactin blocks.id, "<image xlink:href='data:image/png;base64," & Input.ImageTile & "' x='"& (x-1)*Input.SpriteWidth &"' y='"& (y-1)*Input.SpriteWidth &"' width='"& Input.SpriteWidth &"' height='"& Input.SpriteWidth &"'/>", "<image xlink:href='data:image/png;base64," & Input.ImageBlocker & "' x='"& (x-1)*Input.SpriteWidth &"' y='"& (y-1)*Input.SpriteWidth &"' width='"& Input.SpriteWidth &"' height='"& Input.SpriteWidth &"'/>" ) */ // Create a rectangle for the walls. "<rect x='"& Substitute(Text((x-1)*ComponentInput.SpriteWidth);",";".") &"' y='"& Substitute(Text((y-1)*ComponentInput.SpriteWidth);",";".") &"' width='"& Substitute(Text(ComponentInput.SpriteWidth);",";".") &"' height='"& Substitute(Text(ComponentInput.SpriteWidth);",";".") &"' rx='"& 0 &"' ry='"& 0 &"' " & // Change the color for blockers, and walking paths "fill='"& If(id exactin blockers.id;"rgb(116,39,116)";"black") &"' " & "stroke='"& If(id exactin blockers.id;"rgb(116,39,116)";"black") &"' stroke-width='' />" & // Create a circle for each dot and pellet. If(And(id exactin dots.id;!(id exactin score.id)); "<circle cx='"& Substitute(Text((x-1)*ComponentInput.SpriteWidth+ComponentInput.SpriteWidth/2);",";".") &"' cy='"& Substitute(Text((y-1)*ComponentInput.SpriteWidth+ComponentInput.SpriteWidth/2);",";".") &"' r='"& Substitute(Text(ComponentInput.SpriteWidth*If(id exactin ComponentGameData.PowerUps.id;35%;10%));",";".") &"' fill='yellow' />" ) & If(And(id exactin ComponentGameData.Items.id;ComponentGameData.Visible); // Create a rectangle ad hoc. "<rect x='"& Substitute(Text((x-1)*ComponentInput.SpriteWidth);",";".") &"' y='"& Substitute(Text((y-1)*ComponentInput.SpriteWidth);",";".") &"' width='"& Substitute(Text(ComponentInput.SpriteWidth);",";".") &"' height='"& Substitute(Text(ComponentInput.SpriteWidth);",";".") &"' rx='"& 0 &"' ry='"& 0 &"' " & // Change the color under different conditions "fill='firebrick' " & "stroke='firebrick' stroke-width='' />" ) ) & "</svg>" ) )
The only change to the original code is the substitution of the decimal sign. In the original code, due to the regional setting, all values contain a comma as decimal sign, which the svg can't handle.
Unfortunately this might have an impact on the performance, so the fps will drop a bit I guess. But it's still playable 
.png){kind=link}