I want to design a game that will help the player improve with time tables.

Plateform The game will run in a browser and should consist in a single html file. Satelite files can be used (for instance for scripts and styles). Only vanila javascript must be used.

Game design cartoon style UFOs are trying to land on Earth. Inside the UFO is a multiplication made of two integers from 1 to 12. On Earth, a canon can shoot. The player inputs a number. If the number corresponds to the result of one of the multiplications from an UFO, the canon shoots the UFO and the UFO explodes. If the number corresponds to several UFOs, all of them are shut down in rapid succession. Every destroyed UFO increments the score by 1. The player looses when one of the UFOs lands on Earth.

Game progression At first, UFOs appear at a low pace from the sky and descend slowly. They contain predominently easy multiplications (from the 2 and 10 time tables). Then medium multiplications are added to the mix (from the 4 and 5 time tables), then hard ones (3, 7, 8, 9 time tables) and finally very hard ones (11 and 12). Once all the time tables are in the mix, UFOs start very gradually appearing faster and descending faster.

UI The main element of the screen will be a sky view. The sky will have small stars in the background that shine with a variable pulsating intensity. Stars will be randomly generated at each game. Also in the sky background will be the faded title of the game. UFOs appear at the top and descend toward the ground in a slighlty ondulating trajectory. When they are hit by the canon laser bean, they explode and disapear quickly. Below the sky will be the ground, with small houses in the background and a canon in the foreground. The canon will be animated when it shoots a laser beam. Below the ground will be a text input and a shoot button. The text input will automatically get the focus. It will only accept numbers. It will be wide enough to show a maximum of 3 digits. When the user enters more than 3 digits, extra digits are ignored. Hitting the Enter key submits the value. So does pressing the Fire button. After submitting the value, the text field is cleared. If the value corresponds to a multiplication, the canon shoots down the corresponding UFO(s). Nest to the Fire button is a score counter. The design should be responsive to work on any screen size from smartphone up to desktops. There should never be two overlapping UFOs, or at least if they overlap, it should be only slightly so that the multiplication they contain is still perfectly readable.

Leaderboard The game will keep track of the three high scores in the browser local storage. When the game ends, if the user reaches the top 3, a popup congratulates him and asks for his or her name. The score is then added to the leaderboard at the right rank. The former lowest score from the leader board is erased.

Welcome screen Before the game start, a welcome overlay gives the game name, very brief instructions and a Start button, and shows the leaderboard (name, rank and score).