var stage,canvas;
var turns=0; //total turns The player has taken to guess The number
var guessNumber = 0; //The random number selected by the computer
var totalNumbers = 49; //The maximum number the player is expected to guess upto
var chances,numberText; //Text objects used in the game to display the number of chances and hints for the guess number
var group; //The Container Object for the EndScreen
//this initializes the game stage. It is called from the body tag in the HTML file
function init(){
setupStage();
setNumber();
setupClickBlocks();
setupBlankBlocks();
setupChances();
setNumberBox();
createEndScreen();
}
//Creates the CreateJS stage and sets the update function
function setupStage(){
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick);
}
//Computer selects a random number
function setNumber(){
guessNumber = Math.floor(Math.random()*49)+1;
console.log(guessNumber);
}
//This function creates a rectangular shape on the right side of the screen to display the "Higher" and "Lower" text
function setNumberBox(){
var shape = new createjs.Shape();
shape.graphics.beginStroke("#242424");
shape.graphics.beginFill("#FFFFFF");
shape.graphics.drawRect(0,0,100,100);
shape.regX = 50;
shape.regY = 50;
shape.x = chances.x + 80;
shape.y = chances.y + 100;
stage.addChild(shape);
numberText = new createjs.Text("?");
numberText.color = "#242424";
numberText.textAlign ="center";
numberText.textBaseLine = "middle";
numberText.font = "32px Arial";
numberText.x = shape.x;
numberText.y = shape.y-20;
stage.addChild(numberText);
}
//This function creates 49 clickable boxes of the grid
function setupBlankBlocks(){
var shape;
var a;
var xpos = 20;
var ypos = 360;
for(a=0; a<totalNumbers; a++){
shape = new createjs.Shape();
shape.graphics.beginStroke("#242424");
shape.graphics.beginFill("#FFF");
shape.graphics.drawRect(0,0,40,40);
shape.regX = 20;
shape.regY = 20;
shape.x = xpos;
shape.y = ypos;
shape.name = "box"+a;
stage.addChild(shape);
shape.addEventListener("click", shapeClick);
shape.value = a+1;
xpos += 45;
if(a%7 == 6){
xpos = 20;
ypos -= 45;
}
}
}
//This function creates 49 boxes of the grid which shows the number
function setupClickBlocks(){
var shape;
var text;
var a;
var xpos = 20;
var ypos = 360;
for(a=0; a<totalNumbers; a++){
shape = new createjs.Shape();
shape.graphics.beginFill("#363636");
shape.graphics.drawRect(0,0,40,40);
shape.regX = 20;
shape.regY = 20;
shape.x = xpos;
shape.y = ypos;
shape.name = "clicked"+a
stage.addChild(shape);
text = new createjs.Text(a+1);
text.color = "#FFF";
text.textAlign ="center";
text.textBaseLine = "middle";
text.font = "16px Arial";
text.x = xpos;
text.y = ypos-8;
stage.addChild(text);
shape.value = a+1;
shape.key = text;
xpos += 45
if(a%7 == 6){
xpos = 20;
ypos -= 45;
}
}
}
//This function creates a Text Object with CreateJS to display the chances the player hasAttribute in the game
function setupChances(){
chances = new createjs.Text("Chances: 0 of 8");
chances.color = "#D6D6D6";
chances.font = "24px Arial";
chances.x = stage.canvas.width - 200;
chances.y = 20;
stage.addChild(chances);
}
//This click function is called when the blank boxes in the grid Area clicked.
//This function validates if the player has not played beyond 8 turns and checks for a match with the computer selected number
function shapeClick(e){
if(turns < 8){
turns++;
var shape = e.target;
shape.visible = false;
checkMatch(shape);
}else{
showEndScreen("Sorry! You've lost!\n The correct number was " + guessNumber);
}
chances.text= "Chances: " + turns + " of 8";
}
//this function is called from the shapeClick function. It checks if the computer selected number is same as the number clicked by the player in the grid.
function checkMatch(shape){
console.log(shape.value +":"+ guessNumber);
if(shape.value == guessNumber){
showEndScreen("The number was " + guessNumber + "\nYou've Won!");
}else if(shape.value > guessNumber){
numberText.text = "Lower";
}else if(shape.value < guessNumber){
numberText.text = "Higher";
}
}
//This function creates the endscreen.
function createEndScreen(){
//The Container class in CreatesJS holds different objects into one
//Basically it functions like a MovieClip in Flash AS3
group = new createjs.Container();
var shape = new createjs.Shape();
shape.graphics.beginFill("#363636");
shape.graphics.drawRect(0,0,stage.canvas.width,stage.canvas.height);
group.addChild(shape);
var text = new createjs.Text();
text.color = "#EFEFEF";
text.textAlign ="center";
text.textBaseLine = "middle";
text.font = "30px Arial";
text.x = stage.canvas.width/2;
text.y = stage.canvas.height/2;
text.name = "myText";
group.addChild(text);
stage.addChild(group);
group.addEventListener("click", onreset);
group.visible = false;
}
function showEndScreen(txt){
group.visible = true;
group.getChildByName("myText").text = txt;
}
//This function resets the values of the game when the player restars the game
function onreset(){
var a, shape;
for(a=0; a<totalNumbers; a++){
shape = stage.getChildByName("box"+a);
shape.visible = true;
}
setNumber();
turns = 0;
numberText.text = "?";
chances.text= "Chances: " + turns + " of 8";
group.visible = false;
}
function tick(e){
stage.update();
}
Source: Online-Psychology-Degrees.org
