Four Sided Shape with Boundary Detection

Free HTML5 Game Tutorial for Beginners: Page 14

Overview Create a JavaScript Class Access Properties Boundary Detection with Bounding Box Surface Game's Use of Shape4Sides Summary Source: Shape4Sides Definition Source: Create an Reference Source: Draw one Digit with Reference Source: Redraw with Reference Source: Use isInsideShape(...) Source: Draw Answers with Reference
The Answer Box

Answer Box

Overview

This tutorial explains how to create a re-usable prototyped class defined with four sides. The class name is Shape4Sides. Class Shape4Sides includes some boundary detection. Boundary detection enables JavaScript to accurately place digits next to each other in the answer box.

The image above is a screen shot from the Surface Game's answer box. Notice the 3 neatly fits next to the 9.

This tutorial uses the term class loosely. Class in this article, represents separate objects with their own fields and functions. However JavaScript probably is not an Object Oriented Programming language with full fledged classes.

Either way JavaScript prototyped classes provide a useful tool to organize features by functionality. The larger the program the greater the need for order. When processes are separated by file, class, and functionality, it's easier to add new components, debug, and improve the quality of a game.

The Shape4Sides class doesn't include prototyped methods, however it could. Instead file Shape4Sides.js defines class Shape4Sides and a function which operates on Shape4Sides.

How to Create a JavaScript Class

The name of the class and the name of the file must be identical. The file itself must contain a constructor with the name of the class. For example file Shape4Sides.js contains the constructor function Shape4Sides(iX, iY, iW, iH). The definition of a class resides in the file which implements the class. For example the definition for Shape4Sides resides in the file Shape4Sides.js.

A constructor is a special function required to create a new class reference. A constructor looks like any other function, except the constructor has the same name as the file which defines it.

Other files can create references of the class. For example file app.js could create the reference s4s of Shape4Sides with a call to the constructor in the following line of code.

var s4s = new Shape4Sides(4,3,8,16);

Now s4s maintains all the functionality and properties declared within Shape4Sides.js. An application can construct multiple references to the same class.

Constructors often initialize properties. A property is a variable that belongs specifically to the class. The variable does not belong to the application which uses the class. For example Shape4Sides includes the property sx.

Access Properties

Assume app.js instantiates Shape4Sides with the line s4s = new Shape4Sides(2,2,4,4,). Use s4s.sx = v to assign the value v to property sx. Use var nx = s4s.sx to assign property sx to local variable nx. An application can have multiple references of Shape4Sides where the values of Shape4Sides properties are different. Different references maintain different values.

Boundary Detection with Bounding Box

Call function isInsideShape(iX,iY,s) to determine if a touch point is inside a reference of Shape4Sides. The parameter iX is the location on the X axis of a touch point. iY is the location on the Y axis of a touch point. In other words the player touched coordinate (iX,iY) on the canvas. Parameter s is a reference of Shape4Sides.

The following listing includes the entire isInsideShape() function. The function tests parameters iX and iY against properties sx, sy, and sh. If isInsideShape() returns true, then coordinates (iX,iY) are located within the boundaries of the four sided shape. Otherwise, (iX, iY) are outside the boundaries of the four sided shape.

function isInsideShape(iX,iY,s){
 
if (s == null) return false;

if (iX >= s.sx && iY >= s.sy && iY <= (s.sy+s.sh)){

 return(true);

}

return false;

}

The short circuit conditional test can reduce the number of processing instructions required for isInsideShape(). Function isInsideShape() may execute often. The logical short circuit test uses && instead of ||. Logical && tests exit at the first false result. However logical || tests each operand before exiting. Therefore if (iX >= s.sx && iY >= s.sy) is more likely to process faster than if (iX < s.sx || iY < s.sy).

Surface Game's Use of Shape4Sides

The example Surface Game uses Shape4Sides to determine if a touch point is inside the answer box, to draw the answer box, and to draw digits inside the answer box. For reference see the answer box graphic, above.

The example Surface Game's canvas maintains a reference of Shape4Sides with the current dimensions of the answer box. The answer box dimensions change whenever the device rotates or the browser resizes. The answer box reference is helpful for redrawing the canvas. The following listing creates the shape for the answer box.

shapeAnswerBox = new Shape4Sides
(
 0,
 iDimDigit+iSpacer*2,
 iDimDigit*ROW_COUNT,
 iDimDigit
);

Functions redraw() and drawAnswers() draw all current answer digits into the answer box. In other words functions redraw() and drawAnswers() display every digit the player dragged to the answer box. Function drawAnswerDigit() draws one answer to the right of the last answer in the answer box.

The following listing includes all of function drawAnswers(). The variable shapeAnswerBox is a reference of Shape4Sides. Function drawAnswers() iterates over the list of answers. Array aAnswers is the list of answers. Array aAnswers contains a set of Reusable Coordinates. Function drawAnswers() draws each digit the player dropped or dragged to the answer box. The digits are drawn in order, at their scaled dimension, and adjacent to each other. Number iDimDigit is the scaled width and height of one digit. Coord c.min is a number representing the left edge of each digit. The line c.min = i * iDimDigit; modifies the left edge of each digit before drawing. Digits are drawn from left to right in the order the player selected.

function drawAnswers(){

for (var i = 0; i < aAnswers.length; i++){
  
 var c = aAnswers[i];
  
 if (c != null && c.idx != null){
   
  c.min = i * iDimDigit;
   
  context.drawImage(
   aImgDigits[c.idx],
   0,
   0,
   I_DIM_DIGIT,
   I_DIM_DIGIT,
   c.min,
   shapeAnswerBox.sy, 
   iDimDigit, 
   iDimDigit
  );

  }
  
 }
 
}

Summary

This tutorial explained how to create a re-usable prototyped class defined with four sides. The class name is Shape4Sides. Class Shape4Sides includes some boundary detection. Boundary detection enables JavaScript to accurately place digits next to each other in the answer box.

The image above is a screen shot from the Surface Game's answer box. Notice the 3 neatly fits next to the 9.

This tutorial uses the term class loosely. Class in this article, represents separate objects with their own fields and functions. However JavaScript probably is not an Object Oriented Programming language with full fledged classes.

Either way JavaScript prototyped classes provide a useful tool to organize features by functionality. The larger the program the greater the need for order. When processes are separated by file, class, and functionality, it's easier to add new components, debug, and improve the quality of a game.

The Shape4Sides class doesn't include prototyped methods, however it could. Instead file Shape4Sides.js defines class Shape4Sides and a function which operates on Shape4Sides.

Have fun and love learning! For the next tutorial, tap the image icon containing text which says Next Lesson, or the right pointing arrow at the bottom of the page.

Previous Page Next Page
Copyright © 2015 Seven Thunder Software. All Rights Reserved.