<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Web Cash &#187; Game Design</title>
	<atom:link href="http://www.earn-web-cash.com/tag/game-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.earn-web-cash.com</link>
	<description>Writing, Designing, and Making Money Online</description>
	<lastBuildDate>Sun, 04 Dec 2011 22:52:34 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2</generator>
		<item>
		<title>Getting Combinations: Calculating a Binomial Coefficient</title>
		<link>http://www.earn-web-cash.com/2008/02/24/combinations-binomial-coefficients/</link>
		<comments>http://www.earn-web-cash.com/2008/02/24/combinations-binomial-coefficients/#comments</comments>
		<pubDate>Sun, 24 Feb 2008 20:52:50 +0000</pubDate>
		<dc:creator>Walkere</dc:creator>
				<category><![CDATA[Game Design]]></category>
		<category><![CDATA[PHP Tutorials]]></category>
		<category><![CDATA[Sundry Musings]]></category>
		<category><![CDATA[math]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[probability]]></category>
		<category><![CDATA[random]]></category>

		<guid isPermaLink="false">http://www.earn-web-cash.com/2008/02/24/combinations-binomial-coefficients/</guid>
		<description><![CDATA[I came across this problem on the DigitalPoint forums the other day. How can we write a script to calculate the total number of random combinations in a set (i.e. the binomial coefficient), and how can we generate a list of these combinations? Today, we&#8217;ll tackle the first part. We&#8217;ll start with a quick primer [...]]]></description>
			<content:encoded><![CDATA[<p>I came across this problem on the DigitalPoint forums the other day.  How can we write a script to calculate the total number of random combinations in a set (i.e. the binomial coefficient), and how can we generate a list of these combinations?</p>
<p>Today, we&#8217;ll tackle the first part.  We&#8217;ll start with a quick primer on math &#8211; what is a binomial coefficient?  Then, we&#8217;ll look into the most efficient way to calculate that and get the total number of possible combinations.<br />
<span id="more-159"></span><br />
<h4>What Is a Binomial Coefficient?</h4>
<p>If it&#8217;s been a while since you took statistics or calculus, you might be scratching your head thinking about what a binomial coefficient is and what it has to do with combinations.</p>
<p>If you&#8217;re looking at a set of random items &#8211; let&#8217;s say 52 playing cards &#8211; and you want to pick out a number of them &#8211; let&#8217;s say a 7 card poker hand &#8211; the binomial coefficient tells you how many possible combinations you can make.</p>
<p>The general formula for that is usually written:</p>
<p><code>(x Choose y) = (x!) / (y! * (x-y)!)</code></p>
<p>In our example above, the total number of combinations you can get in a 7-card poker game is (52! / (7! * 45!)) or somewhere around 130,000,000.</p>
<h4>How Do We Calculate That (in PHP)?</h4>
<p>These methods of calculation will work for any language, really.  We&#8217;ll just use PHP as an example.</p>
<p>The simplest way to calculate the binomial coefficient would be to loop through, calculate each factorial, and then evaluate the equation.  Notice I said simple, not efficient.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$x</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">52</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$y</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">7</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000088;">$num</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>  <span style="color: #666666; font-style: italic;">//  This is the numerator, 52!</span>
<span style="color: #b1b100;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$a</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span> <span style="color: #000088;">$a</span> <span style="color: #339933;">&lt;=</span> <span style="color: #000088;">$x</span><span style="color: #339933;">;</span> <span style="color: #000088;">$a</span><span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000088;">$num</span> <span style="color: #339933;">*=</span> <span style="color: #000088;">$a</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000088;">$denOne</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>  <span style="color: #666666; font-style: italic;">//  This is the first part of the denominator, 7!</span>
<span style="color: #b1b100;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$b</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span> <span style="color: #000088;">$b</span> <span style="color: #339933;">&lt;=</span> <span style="color: #000088;">$y</span><span style="color: #339933;">;</span> <span style="color: #000088;">$b</span><span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000088;">$denOne</span> <span style="color: #339933;">*=</span> <span style="color: #000088;">$b</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000088;">$denTwo</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>  <span style="color: #666666; font-style: italic;">//  This is the second part of the denominator, 45!</span>
<span style="color: #b1b100;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$c</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span> <span style="color: #000088;">$c</span> <span style="color: #339933;">&lt;=</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$x</span> <span style="color: #339933;">-</span> <span style="color: #000088;">$y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000088;">$c</span><span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000088;">$denTwo</span> <span style="color: #339933;">*=</span> <span style="color: #000088;">$c</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000088;">$combinations</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$num</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$denOne</span> <span style="color: #339933;">*</span> <span style="color: #000088;">$denTwo</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>PHP will evaluate this properly because it&#8217;s nice and flexible with data types.  Do you know how large 52! is?  Try 8.06581751709E+67 large.</p>
<p>This is clearly too big to be an integer value, but PHP quietly converts the values to floats and keeps running.  There should be a better way &#8211; one where we don&#8217;t have to calculate all of the factorials.</p>
<h4>Method Two &#8211; Using array_diff</h4>
<p>This method is a bit more along the lines of human logic.  However, it&#8217;s still not going to be efficient.  Although it&#8217;ll work with smaller numbers than the first method, it&#8217;ll take more time and memory to compute.</p>
<p>Basically, we&#8217;ll create three arrays.  One for each set &#8211; {1, 2, 3, &#8230; 52}, {1, 2, 3, &#8230; 7}, {1, 2, 3, &#8230; 45}.</p>
<p>Since we know that the third set (45!) will be in the denominator and the first set (52!) will be in the numerator, we can use a nifty function called array_diff to cancel out all of the common values and shrink the numerator for us.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$newNumerator</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array_diff</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$oldNumerator</span><span style="color: #339933;">,</span> <span style="color: #000088;">$oldDenominator</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Then we can calculate the factorials by multiplying all of the values in the array.  We can also make use of another PHP function here &#8211; array_product.  It does more or less what it sounds like &#8211; it finds the product of all the values in an array.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$num</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$a</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span> <span style="color: #000088;">$a</span> <span style="color: #339933;">&lt;=</span> <span style="color: #000088;">$x</span><span style="color: #339933;">;</span> <span style="color: #000088;">$a</span><span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000088;">$num</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$a</span><span style="color: #339933;">;</span>  <span style="color: #666666; font-style: italic;">// the numerator array, 52!</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000088;">$denOne</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$b</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span> <span style="color: #000088;">$b</span> <span style="color: #339933;">&lt;=</span> <span style="color: #000088;">$y</span><span style="color: #339933;">;</span> <span style="color: #000088;">$b</span><span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000088;">$denOne</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$b</span><span style="color: #339933;">;</span>  <span style="color: #666666; font-style: italic;">//  The first denominator array, 7!</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000088;">$denTwo</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$c</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span> <span style="color: #000088;">$c</span> <span style="color: #339933;">&lt;=</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$x</span> <span style="color: #339933;">-</span> <span style="color: #000088;">$y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000088;">$c</span><span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000088;">$denTwo</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$c</span><span style="color: #339933;">;</span>  <span style="color: #666666; font-style: italic;">// The second denominator array, 45!</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//  Use array_diff to cancel out the common values in 52! and 45!</span>
<span style="color: #000088;">$num</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array_diff</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$num</span><span style="color: #339933;">,</span> <span style="color: #000088;">$denTwo</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$combinations</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array_product</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$num</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> <span style="color: #990000;">array_product</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$denOne</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>This keeps the numbers much smaller.  Therefore we can work with bigger combinations before PHP putts out.  However, the arrays can eat up a lot of memory and processing power&#8230; so there still should be a better way.</p>
<h4>Combine the Two Concepts</h4>
<p>The more efficient way is to combine the two concepts.  We&#8217;ll use the first method of multiplying through a loop to generate the factorials.  This is far more efficient than iterating an array.</p>
<p>However, we&#8217;ll still cancel out the common values between 52! and 45!.  To do this, we modify the first loop so that it counts down from $x (52) to $x &#8211; $y (45).  Then we simply ignore the third loop &#8211; since it&#8217;s values were essentially counted when we calculated the first loop.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$num</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$a</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$x</span><span style="color: #339933;">;</span> <span style="color: #000088;">$a</span> <span style="color: #339933;">&gt;</span> <span style="color: #000088;">$x</span> <span style="color: #339933;">-</span> <span style="color: #000088;">$y</span><span style="color: #339933;">;</span> <span style="color: #000088;">$a</span><span style="color: #339933;">--</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000088;">$num</span> <span style="color: #339933;">*=</span> <span style="color: #000088;">$a</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000088;">$den</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$b</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span> <span style="color: #000088;">$b</span> <span style="color: #339933;">&lt;=</span> <span style="color: #000088;">$y</span><span style="color: #339933;">;</span> <span style="color: #000088;">$b</span><span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000088;">$den</span> <span style="color: #339933;">*=</span> <span style="color: #000088;">$b</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000088;">$combinations</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$num</span> <span style="color: #339933;">/</span> <span style="color: #000088;">$den</span><span style="color: #339933;">;</span></pre></div></div>

<p>At this point, our script is pretty efficient.  It doesn&#8217;t use up a lot of memory, it executes quickly, and it&#8217;s not calculating very many redundant values.</p>
<p>However, there&#8217;s still a limit to what we can do.  The biggest number PHP seems to be able to calculate is 170!.  After PHP sees the value 7.25741561531E+306 it just seems to give up.  Geez, like 300 zeroes is a lot.</p>
<p>You could improve this a bit more, and increase the number of combinations it could compute.  Rather than calculating the $numerator and $denominator separate, as we did here, you&#8217;d want to calculate the $denominator first and then cancel out values as you multiply the numerator.</p>
<p>In other words, calculate the $denominator as normal.  Then, while you&#8217;re looping through to calculate the numerator, you factor out any common values in the $denominator and the number about to be multiplied into the numerator.</p>
<h4>Who Cares About How Many Combinations&#8230; I Want to See Them</h4>
<p>This is really the boring part.  Who cares how many combinations there are?  We can easily find that with a calculator.</p>
<p>The interesting part &#8211; where we definitely need a computer to help us &#8211; is to iterate through the set and find all of the possible combinations.  We&#8217;ll come back to this later in the week.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.earn-web-cash.com/2008/02/24/combinations-binomial-coefficients/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Javascript Function: Random Number Generator</title>
		<link>http://www.earn-web-cash.com/2008/02/24/random-number-function/</link>
		<comments>http://www.earn-web-cash.com/2008/02/24/random-number-function/#comments</comments>
		<pubDate>Sun, 24 Feb 2008 20:07:28 +0000</pubDate>
		<dc:creator>Walkere</dc:creator>
				<category><![CDATA[Code Snippets]]></category>
		<category><![CDATA[Game Design]]></category>
		<category><![CDATA[JS Tutorials]]></category>
		<category><![CDATA[function]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[math]]></category>
		<category><![CDATA[random]]></category>
		<category><![CDATA[snippet]]></category>

		<guid isPermaLink="false">http://www.earn-web-cash.com/2008/02/24/random-number-function/</guid>
		<description><![CDATA[Yesterday, I wrote a short article on generating random numbers in Javascript. The Javascript random number generator is similar to C/++ &#8211; it gives you a random number from 0 to 1 and you need to make it useful. At the suggestion of a reader (thanks Justin), I decided to go ahead and turn the [...]]]></description>
			<content:encoded><![CDATA[<p>Yesterday, I wrote a short <a href="http://www.earn-web-cash.com/2008/02/23/random-number-javascript/">article on generating random numbers in Javascript</a>.  The Javascript random number generator is similar to C/++ &#8211; it gives you a random number from 0 to 1 and you need to make it useful.</p>
<p>At the suggestion of a reader (thanks Justin), I decided to go ahead and turn the general formula for this into a short helper function to generate a random number.<br />
<span id="more-158"></span></p>
<h4>Random Numbers: General Formula</h4>
<p>First, let&#8217;s take a minute and recap the general formula for finding a random number.</p>
<p>Javascript&#8217;s Math.random() method returns a random number between 0 and 1.  By multiplying this decimal value by a whole number, we can generate a desired range of values.  For example, by multiplying Math.random()&#8217;s result by 10, we get a range of 0 to 10.</p>
<p>Next, we take the Math.floor value of that random number.  This gives us just the integer portion &#8211; and it effectively cuts our range to 0 through 9.  Finally, we can modify this by adding an offset number.  So if we wanted a random number between 51 and 60, we&#8217;d add 51 to that result.</p>
<h4>Creating a Random Number Function</h4>
<p>The basic formula we end up with is&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span> Math.<span style="color: #660066;">rand</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> setSize<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> setOffset<span style="color: #339933;">;</span></pre></div></div>

<p>Our code would be much more readable if we had a helper function that could be called like this&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">randomNumber <span style="color: #339933;">=</span> rand<span style="color: #009900;">&#40;</span>min<span style="color: #339933;">,</span> max<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Our function is going to take two parameters &#8211; min and max.  From these two parameters, we can calculate the offset and the set size and generate the proper random number.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> rand<span style="color: #009900;">&#40;</span>min<span style="color: #339933;">,</span> max<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #003366; font-weight: bold;">var</span> offset <span style="color: #339933;">=</span> min<span style="color: #339933;">;</span>
  <span style="color: #003366; font-weight: bold;">var</span> range <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>max <span style="color: #339933;">-</span> min<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #003366; font-weight: bold;">var</span> randomNumber <span style="color: #339933;">=</span> Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span> Math.<span style="color: #660066;">random</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> range<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> offset<span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">return</span> randomNumber<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>All done.</p>
<p>Add that function to a utility file, and you&#8217;ve got a handy random number generator at your disposal.  It even uses the same format as PHP&#8217;s rand() function, to help increase consistency and readability in your code.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.earn-web-cash.com/2008/02/24/random-number-function/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>How to Create a Random Number in Javascript</title>
		<link>http://www.earn-web-cash.com/2008/02/23/random-number-javascript/</link>
		<comments>http://www.earn-web-cash.com/2008/02/23/random-number-javascript/#comments</comments>
		<pubDate>Sun, 24 Feb 2008 04:34:19 +0000</pubDate>
		<dc:creator>Walkere</dc:creator>
				<category><![CDATA[Game Design]]></category>
		<category><![CDATA[JS Tutorials]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[math]]></category>
		<category><![CDATA[random]]></category>

		<guid isPermaLink="false">http://www.earn-web-cash.com/2008/02/23/random-number-javascript/</guid>
		<description><![CDATA[I've been working with PHP for some time now, and I've become spoiled with the rand() function for generating random numbers.  It's so simple - pass a min, pass a max, and get the number you want.

While I was working on various game-related scripts this weekend, I was left wondering how to create a random number in Javascript.  It's not quite as simple as the rand() function - we'll have to go back to the old C-style random number generation.]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve been working with PHP for some time now, and I&#8217;ve become spoiled with the rand() function for generating random numbers.  It&#8217;s so simple &#8211; pass a min, pass a max, and get the number you want.</p>
<p>While I was working on various game-related scripts this weekend, I was left wondering how to create a random number in Javascript.  It&#8217;s not quite as simple as the rand() function &#8211; we&#8217;ll have to go back to the old C-style random number generation.<br />
<span id="more-156"></span></p>
<h4>The Math Object and Random Numbers</h4>
<p>Javascript comes with a built-in random number generator as part of the Math object.  This Math object does a number of calculations &#8211; trig functions (sine, cosine, and tangent), rounding, logarithms, exponents, etc.</p>
<p>To use the Math class to generate a random number, you begin with the random method.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Math.<span style="color: #660066;">random</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>This method returns a random value &#8211; between 0 and 1.</p>
<h4>How Can I Make a Useful Random Number?</h4>
<p>If you&#8217;ve ever programmed in C/C++, you&#8217;ll know what to do.  If you&#8217;re used to working with something like PHP &#8211; which comes with an intelligent built-in random number generator &#8211; you may be left in the dark.</p>
<p>How can you take a random decimal &#8211; between 0 and 1 &#8211; and turn it into a random number between, say, 1 and 100?</p>
<p>The answer is simple &#8211; math.  You need to multiply the random() result to get a certain sized range and then use addition to start the range at the right number.</p>
<p>Let&#8217;s say you multiply the result of Math.random() by 10.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Math.<span style="color: #660066;">random</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">10</span></pre></div></div>

<p>Since the results of Math.random() are between 0 and 1, the results of this statement will be 0 to 10.  The minimum result is (0 * 10 = 0) and the highest result is (1 * 10 = 10).</p>
<p>If you were to only look at the whole number part of the result, you would get a range of 0 to 9.  In actuality, the result of Math.random() is never 0 or 1, so the above statement won&#8217;t give you a result of 10.</p>
<p>Therefore we can use the whole number portion of the result to get a random integer &#8211; 0 to 9.</p>
<h4>How Do We Get a Whole Number?</h4>
<p>Simple.  Use the floor method of the Math class.  Math.floor returns the whole number portion of a float/decimal.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1.45</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//  Result is 1</span></pre></div></div>

<p>Simply pass a float/decimal to the Math.floor method, and it will return the integer portion of that number.  If you&#8217;re working with negative numbers, it will always round down.  Keep that in mind.  For positive numbers, it&#8217;s simply a truncation function.</p>
<p>To get a random integer, we simply pass the result of Math.rand() to Math.floor().</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span> Math.<span style="color: #660066;">rand</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<h4>What If My Random Set Doesn&#8217;t Start at 0?</h4>
<p>Here&#8217;s the last piece of the random puzzle.</p>
<p>You can determine the size of your random number set with multiplication.  The coefficient you use (like we used 10 before) determines the range your random number can be in.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span> Math.<span style="color: #660066;">rand</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// 10 Numbers, 0-9</span>
Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span> Math.<span style="color: #660066;">rand</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">5</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// 5 Numbers, 0-4</span>
Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span> Math.<span style="color: #660066;">rand</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">100</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// 100 Numbers, 0-99</span></pre></div></div>

<p>If the set you want to create a random number from doesn&#8217;t start with 0, you simply use addition to get what you want.</p>
<p>Let&#8217;s say you want a random number from 101-150.  Your set contains 50 numbers, and it starts with 101.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span> Math.<span style="color: #660066;">rand</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">50</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">101</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// 101 - 150</span></pre></div></div>

<p>The basic statement &#8211; Math.floor( Math.rand() * 50) &#8211; returns a value between 0 and 49.  We  want to offset that by 101 places and we&#8217;ll have our desired random set &#8211; 101 to 150.</p>
<p>At this point, you should have a general equation you can use for generating random numbers from any given set.  Take Math.rand(), apply a coefficient to determine the size of the random number set, and then use addition to offset that number to your desired starting point.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">floor</span><span style="color: #009900;">&#40;</span> Math.<span style="color: #660066;">rand</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> setSize<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> setOffset<span style="color: #339933;">;</span></pre></div></div>

<p>Now go find something useful to use these random numbers for.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.earn-web-cash.com/2008/02/23/random-number-javascript/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Javascript Game Spotlight: 3d Worm</title>
		<link>http://www.earn-web-cash.com/2008/02/23/javascript-3d-worm/</link>
		<comments>http://www.earn-web-cash.com/2008/02/23/javascript-3d-worm/#comments</comments>
		<pubDate>Sat, 23 Feb 2008 15:09:07 +0000</pubDate>
		<dc:creator>Walkere</dc:creator>
				<category><![CDATA[Game Design]]></category>
		<category><![CDATA[Sundry Musings]]></category>
		<category><![CDATA[game]]></category>
		<category><![CDATA[graphics]]></category>
		<category><![CDATA[input]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.earn-web-cash.com/2008/02/23/javascript-3d-worm/</guid>
		<description><![CDATA[I was browsing the <a href="http://www.frihost.com" rel="nofollow">Frihost</a> forums this morning, and I stumbled on a cool Javascript game.

One of the Frihost users and his friend made a <a href="http://tekage.com.ar/uploaded/3Dworm/">3d Worm game</a>.  Although the directions are in Spanish (as is the source code), the game is pretty cool.  It's a good example of what you can accomplish with some Javascript/DOM trickery.]]></description>
			<content:encoded><![CDATA[<p><a href='http://www.earn-web-cash.com/wp-content/uploads/2008/02/3dworm.png' title='3d Worm Screenshot'><img class="alignright" src='http://www.earn-web-cash.com/wp-content/uploads/2008/02/3dworm.thumbnail.png' alt='Screenshot of a 3d Worm game written in Javascript.' /></a>I was browsing the <a href="http://www.frihost.com" rel="nofollow">Frihost</a> forums this morning, and I stumbled on a cool Javascript game.</p>
<p>One of the Frihost users and his friend made a <a href="http://tekage.com.ar/uploaded/3Dworm/">3d Worm game</a>.  Although the directions are in Spanish (as is the source code), the game is pretty cool.  It&#8217;s a good example of what you can accomplish with some Javascript/DOM trickery.<br />
<span id="more-153"></span><br />
Playing the game is simple enough.  You use the four arrow keys and the Q/A key to pick one of six directions to go in.</p>
<p>At first, it can be very difficult to gauge the &#8220;3d&#8221; position of the apple.  Once you learn to use the shadows to your advantage, the game becomes pretty easy.  It&#8217;s still fun, though, and a great example of how Javascript can be used to make an interface for a game.</p>
<p>You see a few cool things here.</p>
<p>For one, the script captures keyboard input to drive the action.  Rather than clicking on buttons/boxes on the screen, the user can hit the appropriate keys and the game responds.  This is important for making a game feel &#8220;real&#8221; and not a kind of mash-up.</p>
<p>A lot of the positioning is done with &#8220;position: absolute&#8221; and the &#8220;top&#8221;/&#8221;left&#8221; styles.  This let&#8217;s you use the screen as a kind of canvas &#8211; drawing the images where-ever you need them.  It frees you from the constraints of normal HTML positioning, where you need to float/margin/padding stuff to get it to line up where you want.</p>
<p>It&#8217;s possible to read source code written in another language.  I just find this interesting.  The source is written in Spanish &#8211; so most of the variable/function names don&#8217;t mean a lot to me.  However, the code is pretty straightforward so it&#8217;s still easy enough to follow what&#8217;s going on.</p>
<p>Well go play some Worm.  This has inspired me to go do some coding.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.earn-web-cash.com/2008/02/23/javascript-3d-worm/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>

