01219245/javascript1/tutorial3/2
- This is the second part of Tutorial 3 of 01219245
Your current JavaScript program in the script block probably look like this:
var numSticks = 21;
function pickSticks() {
var num = parseInt( $( "#pickNum" ).val() );
numSticks -= num;
$( "#numSticks" ).text( numSticks );
}
$(function(){
$("#pickButton").click(pickSticks);
});
เนื้อหา
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.
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" );
}
}
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 pickStick and the new function is shown below:
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" );
}
}
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 pickSticks
EXERCISE Write function computerPickAmount.
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" );
}
}
Click here to see the solution when you are done.
Try it to see if the number of sticks decreases more than the number you enter. While this should indicate that computerPickAmount does something. How can we be sure that function computerPickAmount 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.
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.)
<ul id="gameTranscript"></ul>
We shall use jQuery method append to add more items to the list. A list item should be an LI element, so we have to enclose our message with <li></li>.
function pickSticks() {
var num = parseInt( $( "#pickNum" ).val() );
if ( isValidPickNum( num, numSticks ) ) {
numSticks -= num;
$( "#numSticks" ).text( numSticks );
$( "#gameTranscript" ).append( "<li>You pick " + num + "</li>" );
computerNum = computerPickAmount();
numSticks -= computerNum;
$( "#numSticks" ).text( numSticks );
$( "#gameTranscript" ).append( "<li>Computer picks " + computerNum + "</li>" );
} else {
alert( "Invalid amount. Please try again" );
}
}
Now, our game should work fine, except for the end game logic.
Function pickSticks 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 addToTranscript so that, for example, both lines that deal with transcript:
// ...
$( "#gameTranscript" ).append( "<li>You pick " + num + "</li>" );
// ...
$( "#gameTranscript" ).append( "<li>Computer picks " + computerNum + "</li>" );
become
// ...
addToTranscript( "You pick " + num );
// ...
addToTranscript( "Computer picks " + computerNum );
EXERCISE: Write function addToTranscript.
Click here to see the solution when you are done.
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 pickSticks, 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 numSticks 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: numSticks (same name) or s (what?). We can use something like gameState or gameTable, but it seems a little too general. Since we want this object to capture the set of sticks, we may use sticks, stickPile, or gameSticks. Naming is hard, but at some point we have to choose. Let's use gameSticks for now.
Clearly, we only have one method for gameSticks, however, we might add methods like reset later. Here's the code for the object and the updated pickSticks.
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 );
computerNum = computerPickAmount();
gameSticks.remove( computerNum );
addToTranscript( "Computer picks " + computerNum );
} else {
alert( "Invalid amount. Please try again" );
}
}
Note that we pass gameSticks.remainingSticks to isValidPickNum to check. Should we move isValidPickNum into the object? What do you think?
Click to see discussions.
EXERCISE: Since we have gameSticks 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 updateHTML that changes the content of the span element to show the current number of sticks. Modify method remove and other part of the code accordingly.
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 gameSticks.remainingSticks to function computerPickAmount.
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 computerPickAmount and play with the game. Try to give it a chance to win and see if it can beat you.