These days it's naïve to assume everyone on the web has a mouse and keyboard. On the modern web, many people are now browsing via touchscreen devices like iPhone, iPad and Android phones. If your game can only be controlled by mouse and/or keyboard, users on these devices will be unable to play your game!
However, it's easy to have on-screen touch controls - and there's a clever and simple trick to detect whether the user has a touchscreen device, too.
Mouse input for touch
First of all, if you're designing a game specifically for touchscreen devices, or your game only uses mouse clicks, use the Touch object. Set its Use mouse input property to Yes (it's No by default). Now mouse clicks fire touch events like On touch start and Is in touch. Obviously you can only simulate single-touch input by mouse clicks - holding the left button down represents touching, and releasing it represents not touching. So a click-and-drag represents a swipe by touch.
That easily allows for both mouse and touch input, which for simple games is enough on its own.
On-screen touch controls
For many other games, on-screen buttons are necessary for controls. These can be made with Sprite objects.
First, if you don't have one already, make a non-scrolling layer (you don't want the buttons to move off the screen as you scroll through the level!). Add a new layer and set its Parallax to 0, 0. This prevents any objects on that layer from scrolling - they'll always appear in the same place on-screen.
Now, make sure that layer is selected. The dotted outline in the top-left of the layout view shows the size of the window. Add some Sprites representing your on-screen controls somewhere within the window area. An example of on-screen arrow keys in the bottom-right corner of the window is shown below.
Remember big buttons are easier to touch! You may also want to tweak the collision polygons in the image editor to make their area slightly bigger and therefore easier to touch.
Now you can use the Touch object's Is touching object actions to call a behavior's Simulate control action, such as below:
Now you have on-screen controls that always stay the same place in the window and can control the game.
If your game uses simple left-right controls you can use variations, like large invisible sprites to detect if the user is touching either the left side or the right side of the screen. Remember, the bigger the area they can touch, the easier it is to control the game.
Alternative touch controls
There are lots of different ways to control games on touchscreen devices. You don't have to have on-screen controls, and sometimes alternatives are easier and more fun to use. Here are two other suggestions:
1. Touch around the player to move them, instead of having on-screen arrow keys. For example, in Space Blaster, the space ship could move to wherever you are currently touching. Other buttons on screen can then give alternative actions, like firing rockets.
2. Use the device accelerometer to control movement. In the Touch object, you can retrieve these as the Alpha, Beta and Gamma expressions. This allows you to detect the device tilt along different axes, which can then drive some movement.
Finally, you may wish to adapt controls to be easier for touch devices. Touch controls can be more difficult to use than a keyboard and mouse, so simplifying the controls can make the game more fun. For example, the player most hold spacebar to fire the main laser in Space Blaster. Changing the laser to automatically fire while enemies are on-screen made the game more fun than having to press a separate 'fire' button. It also makes it a little easier, but surely the main aim is to make it fun and not frustrating to control!
Detecting input method
So now you have on-screen touch controls. What if the user is on a desktop computer with a mouse and keyboard? There's no point showing big on-screen buttons in that case. Fortunately, there's a really simple way to detect if the user is using touch input: have a title screen.
It's really that simple. On the title screen, have a message like Press anything to continue. Then, if Keyboard's On any key pressed or Mouse's On any click event fires on the title screen, you know the user is on a desktop. If Touch's On touch start event fires on the title screen, you know the user is on a touchscreen device. You can then set a global variable indicating if the user is on a touchscreen and proceed to the first level. If the global variable is set, show the on-screen touch controls; otherwise, make them invisible. You'll automatically be using the right control system, and the user did not have to do anything!
That's all there is to it!
Further reading
Touchscreen devices often have different screen sizes, so you might want to read Supporting multiple screen sizes as well.
Testing on mobiles and tablets is a lot easier with previewing on a local network.