Phase 1: Game Plan

Introduction

The initial and most crucial phase of such projects is the design stage, which eventually will reflect the quality and efficiency of the final product. During this phase, I have researched and analysed similar games in order to get some innovative ideas of the processes required and best practices used.

Game Screens

Using nothing more than a pen and paper, I managed to design the game screens with all the necessary elements required and the paths that will be available for the user to navigate through the game.

As shown in the diagram above, upon game launch, the player will be shown a Main Screen which will automatically switch to the Main Menu after a couple of seconds. The Main Menu is the screen where the user can choose between three different options: Game Difficulty, Help and About. Upon choosing either of these options, the user will then be diverted to another screen depending on the option chosen.

Game Levels

The first question that comes to mind is.. how can there be different levels? The idea is to implement different  sized targets in different locations which makes it harder for the player to stop the ball exactly in the middle of the target area. The hardest level would be the level where the centre circle has the diameter equal to that of the ball. This means that the ball has to be stopped dead centre in order to obtain maximum points.

Game Area

It was then time to make the big decision of whether to use a normal DIV or else opt to experiment with the new HTML5 Canvas 2D in order to draw and make the ball move. I decided to go with HTML5 for the simple reason that I wanted to become familiar with this new technology. The next step was to decide what will be the variables effecting the ball movement. The two most obvious elements which effect the movement of the ball are the angle of projection and the speed of launch. Keeping in mind that this is not a physics project, I have assumed that the speed of the ball won't be effected on impact and neither by any opposing forces. The two parameters will be adjusted by the player using two sliders written in JavaScript. A horizontal slider, which will be placed below the ball, will control the angle of projection. To help the player even more, an arrow will be placed on top of the ball pointing towards the direction of projection. In order to control the speed, which eventually determines the distance covered by the ball, a vertical slider will be placed on the right hand side of the ball.