Membuat Game HangMan For the Kids - Flash cs 6 Actionscript 3.0

Hari ini saya akan mempostingkan tentang bagaimana cara Membuat Game Hangman For the Kids dengan menggunakan software Adobe Flash cs 6 dengan bahasa pemrograman actionscript 3.0.

Membuat Game HangMan For the Kids - Flash cs 6 Actionscript 3.0
Membuat Game HangMan For the Kids - Flash cs 6 Actionscript 3.0

Game Hangman For the Kids saya share bagi Anda yang ingin belajar membuat game dengan Adobe Flash cs 6 actionscript 3.0, dan bagi Anda yang sedang mengerjakan Tugas Akhir atau Skripsi.

Tampilan Awal game dibuat dengan sangat sederhana seperti yang terlihat pada gambar dibawah ini :

Tampilan Awal Game hangman


Tampilan membuat game hangman for the kids - flash actionscript 3.0
Tampilan membuat game hangman for the kids - flash actionscript 3.0
Adapun banyaknya layer dan frame yang dibutuhkan untuk membuat game Hangman, antara lain :
  • Layer as,
  • Layer Foreground, dan
  • Layer Background
Layer dan Frame yang dibutuhkan untuk membuat game Hangman
Layer dan Frame yang dibutuhkan untuk membuat game Hangman

Penulisan script pada frame 1 :

stop();

start_btn.addEventListener(MouseEvent.CLICK,clickStart);

function clickStart (evt) {
trace ("clicked start");
nextFrame();
}

Dilanjutkan dengan frame 2 dimana terdapat 4(empat) kategori yang dapat Anda pilih, antara lain :

  • Animals,
  • Sea Creatures,
  • Boys Name, dan
  • Girls Name
Empat kategori yang dapat dipilih
Empat kategori yang dapat dipilih
Dan, penulisan script untuk frame 2 adalah :


// stop playback of timeline
stop();

// declare global variable to store the category chosen by the player
var category_txt:String;

// add event listeners for the mouse button click event on each of the 4 category buttons in 
// the foreground layer
animals_btn.addEventListener(MouseEvent.CLICK,clickAnimals);
sea_creatures_btn.addEventListener(MouseEvent.CLICK,clickSeaCreatures);
boys_names_btn.addEventListener(MouseEvent.CLICK,clickBoysNames);
girls_names_btn.addEventListener(MouseEvent.CLICK,clickGirlsNames);

function clickAnimals (evt) {
trace ("clicked animals");
category_txt = "Animals";
nextFrame();
}

function clickSeaCreatures (evt) {
trace ("clicked sea creatures");
category_txt = "Sea Creatures";
nextFrame();
}

function clickBoysNames (evt) {
trace ("clicked boys names");
category_txt = "Boys Names";
nextFrame();
}

function clickGirlsNames (evt) {
trace ("clicked girls names");
category_txt = "Girls Names";
nextFrame();
}

Dan bagian yang terakhir adalah bagian pada halaman permainan.

Tampilan permainan Hangman
Tampilan permainan Hangman


Pada bagian permainan Hangman, penulisan script dapat Anda lihat seperti dibawah ini :

var chosen_word_txt:String;
var found_letters:Sprite = new Sprite();
var found_letters_array:Array = new Array();
var int_num_letters_found:Number = 0;

// instantiate sound effects from library
var correct_sound:CorrectSound = new CorrectSound();
var wrong_sound:WrongSound = new WrongSound();
var youwin_sound:YouWinSound = new YouWinSound();
var gameover_sound:GameOverSound = new GameOverSound();

// assign all alphabet buttons to an array
var alphabet_array:Array = [a_btn,b_btn,c_btn,d_btn,e_btn,f_btn,
g_btn,h_btn,i_btn,j_btn,k_btn,l_btn,
m_btn,n_btn,o_btn,p_btn,q_btn,r_btn,
s_btn,t_btn,u_btn,v_btn,w_btn,x_btn,
y_btn,z_btn];

// stop listening for mouse click event until the initial hangman_mc animation has finished
stage.removeEventListener(MouseEvent.CLICK,captureAllClicks);

// determine xml filename from the value of the "category_txt" global var from frame 2
var filename_txt:String;
if (category_txt == "Animals") {
filename_txt = "animals.xml";
}
else if (category_txt == "Sea Creatures") {
filename_txt = "sea_creatures.xml";
}
else if (category_txt == "Boys Names") {
filename_txt = "boys_names.xml";
}
else {
filename_txt = "girls_names.xml";
}
trace("filename for this category is: " + filename_txt);

// open the xml file
openXMLFile(filename_txt);

function openXMLFile(file_txt:String):void
{
var request:URLRequest = new URLRequest(file_txt);
var loader:URLLoader = new URLLoader();
loader.load(request);
loader.addEventListener(Event.COMPLETE, onOpenXMLFileComplete);
}

// when the xml file has been loaded read the file into a var
function onOpenXMLFileComplete(event:Event):void
{
var loader:URLLoader = event.target as URLLoader;
if (loader != null)
{
var external_xml_data = new XML(loader.data);
trace(external_xml_data.toXMLString());
}
else
{
trace("loader is not a URLLoader!");
}
// choose a random word
chosen_word_txt = getRandomWord(external_xml_data);
trace("chosen word: " + chosen_word_txt);
// display title text
displayTitleText(category_txt);
// draw one line for each letter of the chosen word
drawSpaces(chosen_word_txt);
// now listen on every frame that the hangman_mc movieclip plays through. for each frame run the 
// onHangmanEnterFrame function
hangman_mc.addEventListener(Event.ENTER_FRAME,onHangmanEnterFrame);
}

function getRandomWord(words_xml:XML):String
{
// count the total number of words
trace("XML Data");
trace("------------------------");

// assign xml data to an xmllist var
var word_list:XMLList = words_xml.word;
// trace all xml elements for a sanity check
for each (var word_xml_element:XML in word_list) {
trace(word_xml_element);
}
// get the number of words in xml list
var num_words:Number = word_list.length();
trace("num words in word_list: " + num_words);
// pick a random number between 1 and the number of words in xml list
var random_number = Math.floor(Math.random()*(num_words));
trace("random number: " + random_number);
// return the chosen word
return word_list.text()[random_number];
}

function displayTitleText(title_text:String):void
{
// display the title text which is taken from the value of the
// "category" global var

var format1:TextFormat = new TextFormat();
var font1 = new RavieFont();
format1.font = font1.fontName;
format1.color = 0x000000;
format1.size = 35;
format1.align = TextFieldAutoSize.CENTER;
var title_tf:TextField = new TextField();
title_tf.defaultTextFormat = format1;
title_tf.text = title_text;
title_tf.width = 400;
title_tf.height = 50;
title_tf.embedFonts = true;
title_tf.antiAliasType = AntiAliasType.ADVANCED;
title_tf.x = stage.stageWidth/2-title_tf.width/2;
trace("x pos of title text just drawn: " + title_tf.x);
title_tf.y = 10;
trace("y pos of title text drawn: " + title_tf.y);
addChild(title_tf);
trace("displayed title text");
}

function drawSpaces(word_txt:String):void
{
// Declare a new sprite var for the empty word
var empty_word:Sprite = new Sprite();

// set line thickness and colour
empty_word.graphics.lineStyle(2, 0x000000);
// add the sprite to the display list
addChild(empty_word);
// for each letter in word_txt draw a horizontal line
for (var i:Number=1;i<word_txt.length+1;i++){
empty_word.graphics.moveTo((i*50), 350);
empty_word.graphics.lineTo((i*50)+30, 350);
}
trace("drew letter placeholders");
}

function onHangmanEnterFrame(event:Event):void
{
// declare array to hold the frame numbers of hangman_mc where it starts to animate
// because we want to stop the player from clicking on anything during the animations
var anim_array:Array = [112,125,138,151,164,181,198,219];
// declare array to hold the frame numbers of hangman_mc where it is not animating
var no_anim_array:Array = [111,124,137,150,163,180,197,218,239];
// enable listening for mouseclicks when the animation stops 
// (at frames where there is a stop(); command within the hangman_mc movieclip timeline)
if ( no_anim_array.indexOf(hangman_mc.currentFrame) > -1 )
{
// enable listening for mouse clicks on whole stage
stage.addEventListener(MouseEvent.CLICK,captureAllClicks);
//trace("enabled listening for mouse clicks 1");
// disable mouse input unless hangman is at frames where it is not animating
else if ( anim_array.indexOf(hangman_mc.currentFrame) > -1 )
{
// hangman is being animated, prevent mouse clicks being captured
stage.removeEventListener(MouseEvent.CLICK,captureAllClicks);
//trace("disabled listening for mouse clicks 1");
}
else if (hangman_mc.currentFrame == 240)
{
// game over!
// disable mouse clicks being captured
stage.removeEventListener(MouseEvent.CLICK,captureAllClicks);
//trace("disabled listening for mouse clicks 2");
// display remaining letters the player did not find
for (var i:Number=0;i<chosen_word_txt.length;i++)
{
if (found_letters_array.indexOf(chosen_word_txt.charAt(i))==-1)
{
// found a letter in the chosen word that wasn't found so draw it
drawLetter(chosen_word_txt.charAt(i),0xFF0000);
}
}

// disable buttons to stop the button sound effects from playing
disableAlphabet();
}
else if (hangman_mc.currentFrame == 264)
{
// play "gameover" sound effect 1 sec after game over animation started
gameover_sound.play();
var format1:TextFormat = new TextFormat();
var font1 = new RavieFont();
format1.font = font1.fontName;
format1.color = 0xFF0000;
format1.size = 35;
format1.align = TextFieldAutoSize.CENTER;
var gameover_tf:TextField = new TextField();
gameover_tf.defaultTextFormat = format1;
gameover_tf.text = "Game Over"
gameover_tf.width = 400;
gameover_tf.height = 40;
gameover_tf.embedFonts = true;
gameover_tf.antiAliasType = AntiAliasType.ADVANCED;
gameover_tf.x = stage.stageWidth/2-gameover_tf.width/2;
trace("x pos of gameover text just drawn: " + gameover_tf.x);
gameover_tf.y = stage.stageHeight/2-gameover_tf.height/2;
trace("y pos of gameover text just drawn: " + gameover_tf.y);
addChild(gameover_tf);

}
else if (hangman_mc.currentFrame == 394)
{
// animation of man being hung is finished so remove event listener for hangman_mc onenterframe event
hangman_mc.addEventListener(Event.ENTER_FRAME,onHangmanEnterFrame);
// enable mouse click capturing so that the "main menu" button can be clicked 
stage.addEventListener(MouseEvent.CLICK,captureAllClicks);
//trace("enabled listening for mouse clicks 2");
}

}

function captureAllClicks(event:MouseEvent):void{
trace("you just clicked " + event.target.name);
switch ( event.target.name )
{
case "main_menu_btn" : clickMainMenu(event)
break;
case "a_btn" : clickLetter(event,"a")
break;
case "b_btn" : clickLetter(event,"b")
break;
case "c_btn" : clickLetter(event,"c")
break;
case "d_btn" : clickLetter(event,"d")
break;
case "e_btn" : clickLetter(event,"e")
break;
case "f_btn" : clickLetter(event,"f")
break;
case "g_btn" : clickLetter(event,"g")
break;
case "h_btn" : clickLetter(event,"h")
break;
case "i_btn" : clickLetter(event,"i")
break;
case "j_btn" : clickLetter(event,"j")
break;
case "k_btn" : clickLetter(event,"k")
break;
case "l_btn" : clickLetter(event,"l")
break;
case "m_btn" : clickLetter(event,"m")
break;
case "n_btn" : clickLetter(event,"n")
break;
case "o_btn" : clickLetter(event,"o")
break;
case "p_btn" : clickLetter(event,"p")
break;
case "q_btn" : clickLetter(event,"q")
break;
case "r_btn" : clickLetter(event,"r")
break;
case "s_btn" : clickLetter(event,"s")
break;
case "t_btn" : clickLetter(event,"t")
break;
case "u_btn" : clickLetter(event,"u")
break;
case "v_btn" : clickLetter(event,"v")
break;
case "w_btn" : clickLetter(event,"w")
break;
case "x_btn" : clickLetter(event,"x")
break;
case "y_btn" : clickLetter(event,"y")
break;
case "z_btn" : clickLetter(event,"z")
break;
default :
break;
}
}

function clickLetter(event:MouseEvent,letter:String):void
{
trace("letter just clicked: " + letter);
trace("index of button element in alphabet array for this letter: " + alphabet_array.indexOf(event.target));
trace("index of letter in chosen word: " + chosen_word_txt.indexOf(letter));
// remove the letter from the screen
removeChild(alphabet_array[alphabet_array.indexOf(event.target)]);
// check whether it exists in the word
if ( chosen_word_txt.indexOf(letter.toLowerCase()) >-1 || chosen_word_txt.indexOf(letter.toUpperCase()) >-1 ) 
{
// push letter onto end of found_letters_array. this will be used to output the unfound letters
// when its game over
correct_sound.play();
// add found letter to array
found_letters_array.push(letter);
// draw the found letter on the correct line in colour blue
var num_letters:uint = drawLetter(letter,0x0000FF);
// increment the number of found letters
int_num_letters_found += num_letters;
trace("chosen word: " + chosen_word_txt);
trace("num letters in chosen word = " + chosen_word_txt.length);
trace("int_num_letters_found = " + int_num_letters_found);
// if number of found letters equals the actual number of letters in the chosen word then
if (int_num_letters_found == chosen_word_txt.length) 
{
trace("you win!");
// play the "you win!" sound effect
youwin_sound.play();
// disable the alphabet buttons
disableAlphabet();

// fade out hangman
fadeOutHangman();
// display "you win!" text
var format1:TextFormat = new TextFormat();
var font1 = new RavieFont();
format1.font = font1.fontName;
format1.color = 0x0000FF;
format1.size = 35;
format1.align = TextFieldAutoSize.CENTER;
var youwin_tf:TextField = new TextField();
youwin_tf.defaultTextFormat = format1;
youwin_tf.text = "You Win!"
youwin_tf.width = 400;
youwin_tf.height = 40;
youwin_tf.embedFonts = true;
youwin_tf.antiAliasType = AntiAliasType.ADVANCED;
youwin_tf.x = stage.stageWidth/2-youwin_tf.width/2;
trace("x pos of youwin text just drawn: " + youwin_tf.x);
youwin_tf.y = stage.stageHeight/2-youwin_tf.height/2;
trace("y pos of youwin text just drawn: " + youwin_tf.y);
addChild(youwin_tf);
}
else 
{
// player chose a letter that didnt exist in the chosen word
wrong_sound.play();
hangman_mc.play();
}
}

function drawLetter(letter:String,colour:uint):uint{
trace("drawing letter: " + letter);

var format1:TextFormat = new TextFormat();
var font1 = new RavieFont();
format1.font = font1.fontName;
format1.color = colour;
format1.size = 24;


var number_letters_found:uint = 0;
// loop through each letter of the chosen word
// and where the letter is the same as the passed letter (upper or lower case)
// then draw that letter!
for (var i:Number=0;i<chosen_word_txt.length;i++)
{
var letter_tf:TextField = new TextField();
letter_tf.defaultTextFormat = format1;
letter_tf.width = 40;
letter_tf.height = 40;
letter_tf.embedFonts = true;
letter_tf.antiAliasType = AntiAliasType.ADVANCED;
letter_tf.y = 315;
letter_tf.x = ((i+1)*50)+3;
if (chosen_word_txt.substr(i,1)==letter.toLowerCase()) 
{
letter_tf.text = letter.toLowerCase();
found_letters.addChild(letter_tf);
addChild(found_letters);
trace("x pos of letter just drawn: " + letter_tf.x);
trace("y pos of letter just drawn: " + letter_tf.y);
number_letters_found++;
}
else if (chosen_word_txt.substr(i,1)==letter.toUpperCase())
{
letter_tf.text = letter.toUpperCase();
found_letters.addChild(letter_tf);
addChild(found_letters);
trace("x pos of letter just drawn: " + letter_tf.x);
trace("y pos of letter just drawn: " + letter_tf.y);
number_letters_found++;
}
}
return number_letters_found;
}

function disableAlphabet():void
{
// disable alphabet buttons, even the invisible ones
trace("disabling alphabet buttons");
for (var i:int=0;i<alphabet_array.length;i++)
{
alphabet_array[i].alpha = .5;
trace("faded out button " + alphabet_array[i].name);
alphabet_array[i].mouseEnabled = false;
trace("disabled button " + alphabet_array[i].name);
}

}

function fadeOutHangman():void
{
// fade out the hangman by 50%. this function is used by the drawLetter function when the player has
// won the game
trace("fading out hangman from main timeline");
hangman_mc.alpha = .5;
}

function clickMainMenu(evt):void
{
// remove all children from the stage (clear the screen) and go back to frame 1 in the main timeline
while (this.numChildren > 0) 
{
this.removeChildAt(0);
}
gotoAndStop(1);
}

Jika seluruh bagian dikerjakan dengan benar Game akan berjalan tanpa Error. 

Tutorial Bisa Anda dapatkan di bawah ini :


FLASH TUTORIAL || ANIMASI DAN GAME


Membuat Game HangMan For the Kids - Flash cs 6 Actionscript 3.0 Membuat Game HangMan For the Kids - Flash cs 6 Actionscript 3.0 Reviewed by Ardy S on May 08, 2016 Rating: 5

No comments:

Powered by Blogger.