ดูต้นฉบับสำหรับ 01219245/javascript1/tutorial3/2

: ''This is the second part of [[01219245/javascript1/tutorial3|JavaScript Tutorial 3]] of [[01219245]]''
Your current JavaScript program in the script block probably look like this:

<syntaxhighlight lang="javascript">
var numSticks = 21;

function pickSticks() {
    var num = parseInt( $( "#pickNum" ).val() );
    numSticks -= num;
    $( "#numSticks" ).text( numSticks );
}

$(function(){
    $("#pickButton").click(pickSticks);
});
</syntaxhighlight>

== Valid number of sticks ==

Let's add the code that check that the number of sticks the player want to take is valid, i.e., it is between 1 to 3 and is no larger than the current number of sticks.  Let's assume that the input is an integer for now (i.e., that the user won't enter 1.5). If the amount is invalid, let's throw an alert for now.

<syntaxhighlight lang="javascript">
function pickSticks() {
    var num = parseInt( $( "#pickNum" ).val() );
    if ( ( num >= 1 ) && ( num <= 3 ) && ( num <= numSticks ) ) {
        numSticks -= num;
        $( "#numSticks" ).text( numSticks );
    } else {
        alert( "Invalid amount.  Please try again" );
    }
}
</syntaxhighlight>

{{gitcomment|Try to see if the condition works.  If it is working, commit your work.}}

The code is getting harder to read, so let's try to clean it up a bit.  To make it clearer, we shall extract the code for validating conditions to a new function.  Function <tt>pickStick</tt> and the new function is shown below:

<syntaxhighlight lang="javascript">
function isValidPickNum( num, numSticks ) {
    return ( num >= 1 ) && ( num <= 3 ) && ( num <= numSticks );
}

function pickSticks() {
    var num = parseInt( $( "#pickNum" ).val() );
    if ( isValidPickNum( num, numSticks ) ) {
        numSticks -= num;
        $( "#numSticks" ).text( numSticks );
    } else {
        alert( "Invalid amount.  Please try again" );
    }
}
</syntaxhighlight>

{{gitcomment|Let's commit our work.}}

{{Callta|2. Show the program to the TA.}}

== A randomized computer player ==
It is time to introduce the computer player.  At this point we just want something that plays, so let's write a simple player that only random a number between 1 to 3.  We shall write that as a function and call it in <tt>pickSticks</tt>

'''EXERCISE''' Write function <tt>computerPickAmount</tt>.

<syntaxhighlight lang="javascript">
function computerPickAmount() {
    // EXERCISE: write this function
}

function pickSticks() {
    var num = parseInt( $( "#pickNum" ).val() );
    if ( isValidPickNum( num, numSticks ) ) {
        numSticks -= num;
        $( "#numSticks" ).text( numSticks );

        numSticks -= computerPickAmount();
        $( "#numSticks" ).text( numSticks );
    } else {
        alert( "Invalid amount.  Please try again" );
    }
}
</syntaxhighlight>

<div class="toccolours mw-collapsible mw-collapsed">
Click here to see the solution when you are done.
<div class="mw-collapsible-content">
<syntaxhighlight lang="javascript">
function computerPickAmount() {
    return 1 + Math.floor( Math.random() * 3 );
}
</syntaxhighlight>
</div>
</div>

Try it to see if the number of sticks decreases more than the number you enter.  While this should indicate that <tt>computerPickAmount</tt> does something. How can we be sure that function <tt>computerPickAmount</tt> works fine?  So let's add a game transcript so that you can see how the game proceeds and also to help us test the code.

{{gitcomment|Before we add the transcript, commit the current work.}}

== A transcript ==
Let's add another HTML element to keep the transcript.   Let's use a UL element, so that we have a list. (Add this before the first script block.)

<syntaxhighlight lang="html5">
  <ul id="gameTranscript"></ul>
</syntaxhighlight>

We shall use jQuery method '''<tt>append</tt>''' to add more items to the list.  A list item should be an LI element, so we have to enclose our message with <nowiki><li></li></nowiki>.

<syntaxhighlight lang="javascript">
function pickSticks() {
    var num = parseInt( $( "#pickNum" ).val() );
    if ( isValidPickNum( num, numSticks ) ) {
        numSticks -= num;
        $( "#numSticks" ).text( numSticks );
        $( "#gameTranscript" ).append( "<li>You pick " + num + "</li>" );

        var computerNum = computerPickAmount();
        numSticks -= computerNum;
        $( "#numSticks" ).text( numSticks );
        $( "#gameTranscript" ).append( "<li>Computer picks " + computerNum + "</li>" );
    } else {
        alert( "Invalid amount.  Please try again" );
    }
}
</syntaxhighlight>

Now, our game should work fine, except for the end game logic.

{{gitcomment|Commit your work.}}

Function <tt>pickSticks</tt> gets really hard to read again.  So let's try to clean it.

We should try to improve readability by hiding low-level codes.  The transcript code sections are our easy targets.  We shall extract the code out as function <tt>addToTranscript</tt> so that, for example, both lines that deal with transcript:

<syntaxhighlight lang="javascript">
        // ...
        $( "#gameTranscript" ).append( "<li>You pick " + num + "</li>" );
        // ...
        $( "#gameTranscript" ).append( "<li>Computer picks " + computerNum + "</li>" );
</syntaxhighlight>

become

<syntaxhighlight lang="javascript">
        // ...
        addToTranscript( "You pick " + num );
        // ...
        addToTranscript( "Computer picks " + computerNum );
</syntaxhighlight>

'''EXERCISE:''' Write function '''<tt>addToTranscript</tt>'''.

<div class="toccolours mw-collapsible mw-collapsed">
Click here to see the solution when you are done.
<div class="mw-collapsible-content">
<syntaxhighlight lang="javascript">
function addToTranscript( msg ) {
    $( "#gameTranscript" ).append( "<li>" + msg + "</li>" );
}
</syntaxhighlight>
</div>
</div>

{{gitcomment|It's time to commit your work.}}

{{Callta|3. Show the program to the TA.}}

== Using objects to encapsulate behaviors ==
When you have a piece of data and you perform some operation on it many times, it is usually a sign that you should create an object.

If you look at our function <tt>pickSticks</tt>, you might notice that we change the number of sticks and every time we need to update the span element to reflect that change.  Let's upgrade variable <tt>numSticks</tt> and these functions to an object.

A good name goes a long way in making code readable, so let's find a good name for this object.  We can start from fairly bad names: <tt>numSticks</tt> (same name) or <tt>s</tt> (what?).  We can use something like <tt>gameState</tt> or <tt>gameTable</tt>, but it seems a little too general.  Since we want this object to capture the set of sticks, we may use <tt>sticks</tt>, <tt>stickPile</tt>, or <tt>gameSticks</tt>.  Naming is hard, but at some point we have to choose.  Let's use <tt>gameSticks</tt> for now.

Clearly, we only have one method for <tt>gameSticks</tt>, however, we might add methods like <tt>reset</tt> later.  Here's the code for the object and the updated <tt>pickSticks</tt>.

<syntaxhighlight lang="javascript">
var gameSticks = {
    remainingSticks: 21,

    remove: function( n ) {
        this.remainingSticks -= n;
        $( "#numSticks" ).text( this.remainingSticks );
    }
};    

function pickSticks() {
    var num = parseInt( $( "#pickNum" ).val() );
    if ( isValidPickNum( num, gameSticks.remainingSticks ) ) {
        gameSticks.remove( num );
        addToTranscript( "You pick " + num );

        var computerNum = computerPickAmount();
        gameSticks.remove( computerNum );
        addToTranscript( "Computer picks " + computerNum );
    } else {
        alert( "Invalid amount.  Please try again" );
    }
}
</syntaxhighlight>

{{gitcomment|Try to see if the code works, then commit the changes.}}

Note that we pass <tt>gameSticks.remainingSticks</tt> to <tt>isValidPickNum</tt> to check.  Should we move <tt>isValidPickNum</tt> into the object?  What do you think?

<div class="toccolours mw-collapsible mw-collapsed">
Click to see discussions.
<div class="mw-collapsible-content">
It is OK to put <tt>isValidPickNum</tt> into object <tt>gameSticks</tt> if we think that the rules for the game (i.e., that you can choose from 1 - 3) should be handle by that object.  Technically, it will make the call to <tt>isValidePickNum</tt> a lot nicer because we do not have to look inside <tt>gameSticks</tt>.  However, I do not want to combine too many things into an object, so let's leave it as it is for now.
</div>
</div>

'''EXERCISE''': Since we have <tt>gameSticks</tt> as an object, let's try to improve its display.  Let's show the sticks as sticks (not just a number), i.e., 21 sticks should look like this:

 ||||||||||||||||||||

Add a method <tt>updateHTML</tt> that changes the content of the span element to show the current number of sticks.  Modify method <tt>remove</tt> and other part of the code accordingly.

{{gitcomment|Does our game look better? Let's commit now.}}

{{Callta|4. Show the program to the TA.}}

== Exercise: Get the game mechanic done ==
There are a few things left:

* Our computer player may pick too many sticks (e.g., when the number of remaining sticks is less than 3).  
* Game never stops even when someone wins.
* We should be able to restart the game.

Let's finish this small project by implementing these features.  Don't try to implement all features at once, try to do that one by one and commit the changes every time you get a unit of work done. Note that for the first feature, you will need to pass <tt>gameSticks.remainingSticks</tt> to function <tt>computerPickAmount</tt>.

{{gitcomment|Don't forget to commit when you get a unit of work done.}}

{{Callta|5. Show the working game to the TA.}}

== Exercise: Smart computer player ==
The last part is to make the computer player smart.  There is a strategy that can ensure the player will win.  Note that whatever choice one player make, another can make sure to complement the move so that the total number of sticks decrease by 4.  Therefore, if a player can pick sticks so that after her move the remaining number of sticks is multiple of 4, then she can keep maintaining that fact and eventually she should be able to reduce that to 0; thus, winning the game.

However, the first player has this winning strategy, as she can pick 1 to reduce from 21 to 20.  But we can make our computer player to take the opportunity to win when it has a chance, otherwise, it just plays randomly.

Implement this strategy in <tt>computerPickAmount</tt> and play with the game.  Try to give it a chance to win and see if it can beat you.

{{gitcomment|Wow! we are done. Don't forget to commit.}}

{{Callta|6. You have a great game.  Show it to the TA.}}