Hangman in Animate CC

Report · Sep 01, 2020

Hi community!

I'm making another game which has the same type as hangman. Whenever the user clicked the wrong answer, the tires of the car gets damaged.

This is the type of code I used and it goes on until btn_z.

_this.btn_a.on('click', function(){
_this.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
_this.gotoAndStop('Percent75');
});

I only did the simplest way which is when user clicked a wrong letter, it goes to this frame and so on.. until 4 attempts then game over:

The answer here is "STOP". And I used dynamic text so when the user clicked on either of the correct buttons, it will just display the letter to the corresponding box. I haven't figured out yet how to move to next frame when the answer is complete.

Is there anyone here who have made this kind of game before? If so, how did you make it? My codes are very long. I'm looking for more ways to improve this 🙂

Thank you in advance!

Report · Sep 02, 2020

each time a correct letter is clicked, check if each textfield if it has text == "". if no to all, the word is complete.

or you could increment a counter each time a correct letter is clicked and if the counter == the number of textfields, the word is complete.

Report · Sep 02, 2020

Hi! I appreciate your response. I actually did the increment workaround. The counter works, but it doesn't gotoAndStop to the next frame when the certain value is reached. Forgive me for the long code but here it is:

var root = this;

root.charlength = 0;

root.btn_a.on('click', function(){
root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
});

root.btn_b.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');
	
});

root.btn_c.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');
	
});

root.btn_d.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
	
});

root.btn_e.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
	
});

root.btn_f.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
	
});

root.btn_g.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
	
});

root.btn_h.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
	
});

root.btn_i.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
	
});

root.btn_j.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
	
});

root.btn_k.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');
	
});

root.btn_l.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
	
});

root.btn_m.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
		
});

root.btn_n.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
		
});

root.btn_o.on('click', function(){

root.Message.text = "Awesome!";
root.Box3.text = "O";
createjs.Sound.play("match_sfx");
root.charlength++;
root.charr.text = root.charlength.toString();
root.btn_o.mouseEnabled = false;
	
});

root.btn_p.on('click', function(){

root.Message.text = "Awesome!";
root.Box4.text = "P";
createjs.Sound.play("match_sfx");
root.charlength++;
root.charr.text = root.charlength.toString();
root.btn_p.mouseEnabled = false;
	
});

root.btn_q.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
		
});

root.btn_r.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
		
});

root.btn_s.on('click', function(){

root.Message.text = "Awesome!";
root.Box1.text = "S";
createjs.Sound.play("match_sfx");
root.charlength++;
root.charr.text = root.charlength.toString();
root.btn_s.mouseEnabled = false;
});

root.btn_t.on('click', function(){

root.Message.text = "Awesome!";
root.Box2.text = "T";
createjs.Sound.play("match_sfx");
root.charlength++;	
root.charr.text = root.charlength.toString();
root.btn_t.mouseEnabled = false;
});

root.btn_u.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
			
});

root.btn_v.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
			
});

root.btn_w.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
			
});

root.btn_x.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
			
});

root.btn_y.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
			
});


root.btn_z.on('click', function(){

root.Message.text = "Try Again!";
createjs.Sound.play("miss_sfx");
root.gotoAndStop('q175');	
			
});

if (root.charlength ==4)
{
	createjs.Sound.play("correct_buzzer");
	root.gotoAndStop('e1');
}

Report · Sep 02, 2020

first, you might want to learn about "array" use so you can simplify and shorten that code.

second, each and everytime a correct letter is clicked you should call a function to check if your word is complete. eg,


root.btn_s.on('click', correctF);

function correctF(){

root.Message.text = "Awesome!";
root.Box1.text = "S";
createjs.Sound.play("match_sfx");
root.charlength++;
root.charr.text = root.charlength.toString();
root.btn_s.mouseEnabled = false;
checkForEndF();
});

function checkForEndF(){
if (root.charlength ==4)
{
	createjs.Sound.play("correct_buzzer");
	root.gotoAndStop('e1');
}
}

Report · Sep 02, 2020

Hi again,

Progress: increment works but only if I press a button after completing the last letter. That's the only time charlength is being recognized. See this video.

I'm thinking is it possible to get the value of combined dynamic boxes? Like

var output = this.Box1.text + this.Box2.text + this.Box3.text + this.Box4.text;

if (output == "STOP")
{
this.gotoAndStop('nextquestion');
}

or how does multiple "if" condition works on canvas?

if (this.Box1.text="S" && this.Box2.text="T" && this.Box3.text="O" && this.Box4.text="P" &&) 

{
this.gotoAndStop('nextquestion');
}

something like that.

Otherwise, my workaround is just adding a "Go" button.

Report · Sep 02, 2020

Hi.

There's a hangman game template that ships with Animate under File > New from Template... > HTML5 Canvas > Sample Puzzle Game.

Maybe it will be helpful for you.

Regards,

JC

Report · Sep 02, 2020

Hi JC!

Wow, I didn't know about that! Upon checking out, I see that the words are randomly selected. In my game, the word for each question is fixed (given that it has a clue). But thanks anyway, I might as well explore that template and use it if ever I change my mind with this game 🙂

Report · Sep 02, 2020

Hey everyone,

I finally got the game working. I just placed a "submit" button that the user will clicked once their answer is complete. I also used functions to shorten the code. Thank you to everyone who replied.

Will share the game to this thread once I'm finished 🙂