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
Game Tutorial for Beginners was prepared for the Web in 2012. HTML5, CSS3, and JavaScript have improved over time. Game Tutorial for Beginners doesn't include state of the art technology, yet still contains many useful features and ideas.
Copyright © 2015 Seven Thunder Software. All Rights Reserved.