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.");

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();
 
redraw();
}
	

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.