Phase 2: Setting up the User Interface

Setting up the Core Functionality

Before moving on to the cool and interesting part of building the user interface, the foundations needed to be laid down. Using HTML, the whole interface was designed using seperate DIV tags for each element.  All the HTML related to each game screen was contained within a parent DIV.  Splitting up elements made it easier to interact with and toggle the visibility of certain elements on the screen using JavaScript. Once the layout was complete, it was then time to style all elements and adjust positions using external CSS. Apart from the normal text formatting and positioning, I have also used the following new elements available in CSS3:

//Font used for all text
@font-face {
 font-family: main;
 src: url('fonts/walkwayblack.ttf');
}

//Used to change squares in circles for targets
-webkit-border-radius: 85px;  
-moz-border-radius:85px;      
-o-border-radius:85px;       
-ms-border-radius:85px;      

//CSS to rotate arrow according to the user's choice
-webkit-transform: rotate(0deg); 
-moz-transform: rotate(0deg);        
-o-transform: rotate(0deg);          
-ms-transform:rotate(0deg);

//CSS to rotate arrow with bottom fixed
-webkit-transform-origin: bottom;  
-moz-transform-origin:bottom;
-o-transform-origin:bottom;  
-ms-transform-origin:bottom;

Setting up the JavaScript

At this point, the interface was looking good, however with no sort of functionality. The next step in the process of completing the UI was to insert the sliders to be used for both the adjusting of angles and speed. After reviewing a number of sliders written in JavaScript available online, I decided to go for the DHTMLX Slider. The reason behind the choice of choosing to implement this slider included all the functionalities I required for the game as listed below.

• Horizontal and Vertical Layout
• High stability
• Cross Browser Support
• Customizable Behaviour (Min/Max Value, Intervals, Event Handling)

The JavaScript and CSS paths of the slider were placed in the HTML File in the header section.

//Horizontal Slider - Determines angle of projection
var hslider = new dhtmlxSlider("HsliderBox", 200, "default", false, 45, 135, 90, 1);hslider.setImagePath("codebase/imgs/");
hslider.init();
hslider.enableTooltip(false);
hslider.attachEvent("onChange",function(newValue,sliderObj){
     document.getElementById("hValue").innerText = newValue +"°";
     angle = newValue;
     updateArrow(newValue);
})

The above code snippet is showing how the horizontal slider was initialized as a new object of dhtmlxSlider and given a list of parameters which are defined below.

HsliderBox  - Container
200 - Size in Pixels
default - Skin Name (This skin has been edited to match the theme of the game)
false - Implying that it is not a vertical slider
45 - Minimum Slider's value
135 - Maximum Slider's value
90 - Slider's default value
1 - Step of the slider

As it can be shown in the code snippet above, the variable newValue (which is equivalent to the angle) is being outputted in a DIV which has the id hValue. This is used to show the user the angle of projection currently chosen through the hSlider to help him improve on his next shot. Both values from the sliders are being stored in a variable called newValue, which later will be used as function parameters to determine the speed and angle of the ball movement.

After setting up both sliders, the next step was to rotate the arrow according to the angle chosen by the player. A function called updateArrow() was developed to cater for div rotation on change in angle given the newValue parameter as shown below.

//Angle arrow pointer shown on top of the ball
function updateArrow(newValue) {
var aimer = document.getElementById("aimer").setAttribute(
    "style", "transform:rotate(" + (newValue-90) + "deg);"
    + "-moz-transform: rotate(" + (newValue-90) + "deg);
    + "-o-transform: rotate(" + (newValue-90) + "deg);"
    + "-webkit-transform:rotate(" + (newValue-90) + "deg);"
    + "-ms-transform:rotate("+ (newValue-90) +"deg);"
    );
}

From the code snippet above, one can easily notice that the newValue, which is the value generated from the Horizontal Slider, is being passed to the JavaScript function to rotate the div containing the arrow image using CSS Transform Rotate. The newValue is being subtracted by 90 degrees for the simple reason that the default value of the horizontal slider is 90 degrees, therefore if the player moves the slider to the left by 2 intervals, the newValue will be equivalent to 88. In this case, we do not want to rotate the arrow by eighty-eight degrees but we want to rotate by the change in angle which is 88-90= -2 degrees (2 degrees to the left).

The last two items remaining before moving on to the original stuff are the implementation of both the Play and Main buttons. The play button will be used to start the ball moving after the user has set the angle and the speed of the ball, whilst the main button will be used to take the user back to the main menu of the game as shown below.

Drawing the Ball

The next stage of this game involved the use of my favourite HTML5 feature - Canvas Element. The main purpose of this element is to manipulate 2D graphics or create them from scratch. In my case, I have used the Canvas element to draw a ball. I hear you ask... so how did he do this? My answer is, 2 simple steps.

To get started, I created a new blank canvas element with an id named ballCanvas,which is later used for referencing and styling; as shown below.

<canvas id="ballCanvas" width="320" height="480">
<!-- Fallback Content -->
</canvas>

The width and height attributes are used to define the size of the rendering context, which is equivalent to the game area where the ball will be moving dynamically. At this point, nothing is visible on the canvas. This is because we have not yet drawn any objects on this canvas. Before jumping to the drawing process, it is important to point out that like other 2d platforms, the canvas element uses a flat Cartesian coordinate system with the origin (0,0) at the top left (Figure 2.1). This is very important to point out at this stage for the simple reason that in order to calculate the starting point and movement coordinates of the ball.

                                                      Figure 2.1                                                                      Figure 2.2

As shown in Figure 2.2, the ball was then drawn on the ballCanvas using the following code.

var context; //canvas context
var ballOriginalX = 150; //x coordinate
var ballOriginalY = 420; //y coordinate
var ballCount=1; //used to know which ball is being used
var ballNum = new Array(); //multiple balls

var ball = function(x, y, radius) {
    this.x = x;
    this.y = y;
    this.radius = radius;
}

//Function used to draw initial ball on canvas
function drawBall(){
    var ballCanvas = document.getElementById('ballCanvas');
      context = ballCanvas.getContext('2d');
      ballNum[ballCount] = new ball(ballOriginalX,ballOriginalY,10);
      context.clearRect(0,0, 320,480);
      context.beginPath();
      context.fillStyle="#3e3e3e";
      context.arc(ballNum[ballCount].x,ballNum[ballCount].y,ballNum[ballCount].radius,0,Math.PI*2,true);
      context.closePath();
      context.fill();
}

Having the ball being shown on the canvas and both sliders in place, the Setting up of the User Interface phase was completed and the most anticipated phase of the whole project was next - Making the Ball Move.