Surface Game JavaScript Source Code: Controller

Free HTML5 Game Tutorial for Beginners: Page 31

Initialize the Game Process XML Display a Question

HTML5 Mobile Web Programming

Free Online Game Development Course: Design with HTML5

The following few listings cover the entire controller for the Surface Game. File surface-game-control.js follows.

Initialize the Game

//Array of correct answers from the game.
//Stored as Strings representing 
// indices into the digit array.
var sCorrect = null;
var nIndex;
var nLevel; 
var nScore;

// Boolean: was the 
// question answered?
var bAnswered  = false;

// Boolean was the 
// next button tapped?
// Don't want repeat 
// the question.
var bNextTapped  = false;

//Audio elements:
var auRight = null;
var auTapped = null;
var auLevel = null;

//XML data:
var xAnswers = null;
var xQuestions = null;
var xGraphics = null;

//Number constants
// prefixed with 'I' for 
// Integer.
//25 points for each correct answer.
I_SCORE = new Number(25);

//2 levels 1,2.
I_LVL_MAX = new Number(2);

//2 questions 0,1.
I_IDX_MAX = new Number(1);

// String constants:
S_PATH = new String("assets/");

S_NEXT = new String("Tap the 'Next Question' button.");

S_ANSWER = new String("Please answer the current question.");

/**
* @param {Number} nMobile:
* 0 for desktop game.
* 1 for mobile game.
**/
function loadGame(nMobile){
 
 auRight  = document.getElementById('aRight');
 auTapped = document.getElementById('aTapped');    
 auLevel  = document.getElementById('aLevel');

 auLevel.loop = false;
 auRight.loop = false;
 auTapped.loop = false;

 loadDisplay(nMobile);

 loadViewGet();

 var a = scoreModelGet(
  S_PATH,
  I_LVL_MAX,
  I_IDX_MAX
 );

 if (a != null){
 
  nLevel = new Number(a[0]);

  nIndex = new Number(a[1]);

  nScore = new Number(a[2]);

 }

 loadQuestions(); 

}

Process XML

/**
 * function loadQuestions() obtains data from the 
 * XML DOM Object.
 * TagName 'a' is the current answer in String format.
 * TagName 's' is the question in String format.
 * TagName 'g' is the current graphic.
 */
function loadQuestions(){ 
 
 var xmlDoc = loadXML(nLevel);

 if (xmlDoc != null){
  
  xQuestions = xmlDoc.getElementsByTagName("q");
  
  xAnswers = xmlDoc.getElementsByTagName("a");
  
  xGraphics = xmlDoc.getElementsByTagName("g");
  
  showQuestion();

}
}

Display a Question

The rest of surface-game-control.js displays below.

/**
 * function showQuestion() obtains data from the XML. 
 * nIndex is the current question number.
 */
function showQuestion(){
 
 var sOutput = new String();

  if (nIndex > I_IDX_MAX){
 
  nLevel++;

  nIndex = new Number(0);

  if (nLevel > I_LVL_MAX ){ 
 
   nLevel =  new Number(1);

   loadQuestions();

  return;
  
 }

 else { 
 
  loadQuestions();

  return;
  
 }
}

 if (nIndex == 0){ 
 
  sOutput = "Your score is "+nScore+". Starting level "+nLevel+"."; 

 }

 else {
 
  sOutput = " Your score is "+nScore+", on level "+nLevel+", question "+new Number(nIndex + 1)+".";

 }

 // For Safari, FireFox, Chrome, etc.
 if (xGraphics[nIndex].textContent != null){
 
  viewImage(xGraphics[nIndex].textContent);

  viewText(xQuestions[nIndex].textContent + sOutput,false);

  sCorrect = xAnswers[nIndex].textContent;
}

 // For IE 9 etc.
 else {
 
  viewImage(xGraphics[nIndex].text);

  viewText(xQuestions[nIndex].text + sOutput,false);

  sCorrect = xAnswers[nIndex].text;

 }

 nIndex++; 
 
}

function tapAnswer(){
 
 if (bAnswered == false){

  bAnswered = true; 

  bNextTapped = false;

  // Collapse all of the digits into one compact array,
  // then compare to the array of correct answers.
  var sTempAnswers = new String();

  var sOutput = new String();

  var n = null;

  var aAnswerSet = answersGet();

  for (var i = 0; i < aAnswerSet.length; i++){

   n = aAnswerSet[i];

   // Right now none of the answers use the decimal point.
   // Otherwise check for n.idx == 11, then add ".".
   if (n != null && n.idx != null){

    sTempAnswers += n.idx.toString(); 
  
   }

  }

  if (nIndex > I_IDX_MAX){ 
 
   if ((nLevel + 1) > I_LVL_MAX ){
 
   sOutput = "Game Over! Tap the 'Next Question' button to play again.";

   auLevel.play();

   colorCycleStart();

  }
  else {
   
   sOutput = "Level Over! Tap the 'Next Question' button to play the next level.";

   auLevel.play();

   colorCycleStart();

  }

 }
 else{
 
  sOutput = S_NEXT;

 }  

 if (sTempAnswers == sCorrect){
 
  nScore += I_SCORE;

  viewText("Correct! Your score: "+nScore+". "+sOutput,false);

  auRight.play();

 }

 else { 
 
  viewText("Incorrect. Your score: "+nScore+". "+sOutput,false);

  auTapped.play();

 }
 
 scoreModelSet(
  nLevel,
  nIndex,
  nScore
 );

 }

 else {
 
  viewText(S_NEXT,true);

 }

}

function tapNext(){
 
 stopGame();

 // If the user answered the question,
 // then go to the next question.
 if (bAnswered == true){
  
  bAnswered = false; 
  
  reset(); 
  
  showQuestion();  
  
 }
 
 // Ask the user to answer the question,
 // but just display the request once.
 else if (bNextTapped == false){
  
  viewText(S_ANSWER,true);
  
  bNextTapped = true;
  
 }
 
}


function stopGame(){
 
 colorCycleStop();

}

function reset(){
 
 bAnswered = false;
 
 answersSet();
 
 edraw();
}
	

For the next section, 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.