Added Touch Support to Gumball game

[Arisamiga]

Hello! :D

This Pull Request Adds Touch Support to the Gumball game.
Some mobile devices either don't support or have an undefined deviceorientation.

So I am adding touch support. It works the same way as keyboard event functions but uses the touchstart and touchend event listeners. The screen is split and if the person touches the left side of the screen it will tilt left and if it is the right side it will tilt right.

This solves the issue of #109 for gumball

[Jezzamonn]

Hi Arisamiga! Thanks for this PR, and sorry about missing it!

I just ran things locally, and on devices with both touch controls and an accelerometer (most phones / tablets), this doesn't work as intended. Normally the accelerometer is used to control the game on mobile, and it seems like the touch screen rotation only takes priority in one direction, not the other direction. See this video: https://drive.google.com/file/d/1BBJKdXwRRAeU0pNGLsk9-K7voFH1u5WK/view?usp=drive_link

So I think you'd need to do more than just set isLeftDown and isRightDown, you'd also need a way for them to take priority over the accelerometer controls

[Arisamiga]

Hi Arisamiga! Thanks for this PR, and sorry about missing it!

I just ran things locally, and on devices with both touch controls and an accelerometer (most phones / tablets), this doesn't work as intended. Normally the accelerometer is used to control the game on mobile, and it seems like the touch screen rotation only takes priority in one direction, not the other direction. See this video: https://drive.google.com/file/d/1BBJKdXwRRAeU0pNGLsk9-K7voFH1u5WK/view?usp=drive_link

So I think you'd need to do more than just set isLeftDown and isRightDown, you'd also need a way for them to take priority over the accelerometer controls

Hello Jezzamonn! These issues should be fixed by d2ebbd4 and aed9272

I found there was an issue with how the tilt was handled, and as it remained static (After an orientation event), that is what caused the tilt to the right not to work. I was able to fix that by simulating a tilt (only temporarily) to not get blocked by the previous tilt position. Now touch controls will be able to be used with a priority over the accelerometer controls.

[Jezzamonn]

Nice! This works well.

It also functions pretty well with multitouch devices, though there's a slightly strange behavior you can trigger by doing the following:

1. Hold down a finger on one side of the device (e.g. the left)
2. Press and release a different finger

at this stage, the game acts like there are no fingers on the device, a little odd but ok

3. Hold down another finger (while still keeping the first finger down)

at this stage, the game tilts in the direction of the first finger, no matter which side the new tap in step 3 is tapping on

It still functions ok, even with that, so I'm happy to go with this. To fix the above, you would probably need to check the touch id in the touch end event and make sure it lined up with the touch start event.

Another example of multitouch weirdness:

1. Hold finger A on left
2. Hold finger B on right
3. Release finger A, keep finger B down

When this happens the game uses a neutral tilt, but it would be better to use finger B. This might happen if a user taps between the different sides quickly.

[Arisamiga]

Nice! This works well.

It also functions pretty well with multitouch devices, though there's a slightly strange behavior you can trigger by doing the following:

1. Hold down a finger on one side of the device (e.g. the left)
2. Press and release a different finger

at this stage, the game acts like there are no fingers on the device, a little odd but ok

3. Hold down another finger (while still keeping the first finger down)

at this stage, the game tilts in the direction of the first finger, no matter which side the new tap in step 3 is tapping on

It still functions ok, even with that, so I'm happy to go with this. To fix the above, you would probably need to check the touch id in the touch end event and make sure it lined up with the touch start event.

Another example of multitouch weirdness:

1. Hold finger A on left
2. Hold finger B on right
3. Release finger A, keep finger B down

When this happens the game uses a neutral tilt, but it would be better to use finger B. This might happen if a user taps between the different sides quickly.

Oh! Thanks for letting me know :D I made some changes where if there are multiple fingers down, the tilt is recalculated using the position of the first remaining touch: 9176da2.

That means that in the case of:

1. Hold finger A on left
2. Hold finger B on right
3. Release finger A, keep finger B down

The game will tilt in the direction of Finger B only when Finger A is released, which should be okay.

[Jezzamonn]

Great! I'll go ahead and merge this.

We don't do releases very often but this should be live on the site in a few weeks