Javascript |

I’ve created a simple “Guess the Number” game in which the objective of the player is to guess the random number selected by the computer within the least possible moves. I’ve used the CreateJS libraries to create the game.

The advantage of using the CreateJS library for game development is that it helps manage graphics on the Canvas in a way that is similar to the Adobe Flash display list. It helps maintain a cleaner work-flow and gradually introduces you to building complex games. This does not mean the other libraries are any lesser in performance or capabilities. I chose CreateJS because I’ve been working with it recently for app development.

The game has been created using CreateJS has been uploaded so that you can play it before attempting to code it. (Refresh the page incase the game doesn’t open)

The game code below primarily covers the most essential features required to learn basic game development using Canvas, HTML5 and CreateJS. This includes –

Drawing shapes on the canvas with a fill and outline
Creating text and changing the value of the text at runtime
Working with Mouse Events
Working with Containers (grouping graphics into one object).

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

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

}

To see the complete code including the HTML file, you can download it from this game link.

Mariam

Category Archives: Javascript

Number Guessing Game using CreateJS

Games, Devices, Technology