Web Development Project: Coinflip

49 Projects
You are not logged in
Web
Development
Project
Project: Coinflip
Creator:	Graphix
Project type:	Games
Created on:	2010-11-01 15:21:01
Last edit:	2010-11-17 22:13:20
Download:	Start download now
Introduction

This project is one of the simpelest: the user chooses a side and the script calculates a random side. If the user chose the correct side, the win counter increments, if not the lose counter. It also keeps statistics for the player.
Interface

The interface consists out of the following elements:

A title at the top

A dropdown with the two choices: head or tail

A button that has 'Flip Coin!' as title

A sidebar with statistics, including winnings, loses, total games, win percentage


Programming

We will use 3 global variables:

Code Snippet (Syntax highlighted) - Toggle Wrap

var player_wins = 0;
var player_loses = 0;
var total_games = 0; 


We are going to create 3 functions:

FlipCoin() - Retrieves the player's choice, retrieves the random side (using GetRandomSide() ) and updates the interface (using UpdateStatus)

GetRandomSide() - Calculates a random side and returns it

UpdateStatus() - Takes the global variables and puts them in the interface

First we will write the HTML of the interface:
Code Snippet (Syntax highlighted) - Toggle Wrap

<form action="" onsubmit="return false;" style="font-family:Arial; font-size:13px; width:300px; height:125px; border:1px solid #BBB; background-color:rgb(250,250,250); position:relative; top:0px; left:0px;">
 <div style="position:absolute; top:5px; left:5px; width:283px; height:30px; background-color:rgb(253,253,253); border:1px solid #BBB; padding:3px;">
  Choose side:
  <select id='player_choice'>
   <option value='head'>Head</option>
   <option value='tail'>Tail</option>
  </select>
  <input type='button' onclick='FlipCoin()' value='Flip Coin!' />
 </div>
 <div id='coin_text' style="position:absolute; font-size:11px; top:48px; left:5px; width:118px; height:65px; background-color:rgb(253,253,253); border:1px solid #BBB; padding:3px;">
 </div>
 <div style="position:absolute; top:48px; left:135px; width:153px; height:65px; background-color:rgb(253,253,253); border:1px solid #BBB; padding:3px;">
  <table cellpadding='0' cellspacing='0'>
   <tr><td>Total wins:</td><td><span id='wins'>0</span></td></tr>
   <tr><td>Total loses:</td><td><span id='loses'>0</span></td></tr>
   <tr><td>Total games:</td><td><span id='total'>0</span></td></tr>
   <tr><td style='width:104px;'>Win percentage:</td><td><span id='win_perc'>0%</span></td></tr>
  </table>
 </div>
</form>


Then we write the function that calculates a random side:

Code Snippet (Syntax highlighted) - Toggle Wrap

function GetRandomSide() {
 
 /* Calculating random number, 0 (= head) or 1 (= tail): */
 var random_number = Math.floor(Math.random() * (1 + 1));
 
 /* Returning the side: */
 if (random_number == 0) {
  return 'head';
 } else if (random_number == 1) {
  return 'tail';
 }
 
}


Then the function that updates the interface:

Code Snippet (Syntax highlighted) - Toggle Wrap

function UpdateStatus() { 
 
 /* Updating the wins, loses and total games: */
 document.getElementById('wins').innerHTML = player_wins;
 document.getElementById('loses').innerHTML = player_loses;
 document.getElementById('total').innerHTML = total_games;
 
 /* Calculating win percentage and update it: */ 
 var win_percentage = (Math.floor((player_wins / total_games) * 100)) + "%";
 document.getElementById('win_perc').innerHTML = win_percentage;
 
 
}


And then the main function that combines the above two functions and is the core of the project:

Code Snippet (Syntax highlighted) - Toggle Wrap

function FlipCoin() { 
 
 /* Retrieving the player's choice: */
 var player_choice = document.getElementById('player_choice').value;
 
 /* Retrieving the side the coin 'fell' on: */
 var coin_side = GetRandomSide();
 
 if (player_choice == coin_side) {
 
    /* If the user got it right: */
	player_wins++;
	total_games++;
	
	/* Update status: */
	UpdateStatus();
	 
	/* Creating the text: */
    var text = "The coin is flipped...<br />";
	text += "It fell on " + coin_side + "<br />";
    text += "You win!<br />";
    text += "Try again?";
	
	/* Showing the text: */
	document.getElementById('coin_text').innerHTML = text;
 
 } else {
 
    /* If the user got it wrong: */
	player_loses++;
	total_games++;
	
	/* Update status: */
	UpdateStatus();
	
	/* Creating the text: */
    var text = "The coin is flipped...<br />";
	text += "It fell on " + coin_side + "<br />";
    text += "You loose!<br />";
    text += "Try again?";
	
	/* Showing the text: */
	document.getElementById('coin_text').innerHTML = text;
 }
 
} 


This code in action

You can download the code from the below link:
http://www.webdevproject.com/zips/CoinFlip.zip

Not alot of more explaination on how to use it is (hopefully) necessary ;) I also tested out the code by spam clicking the flip coin! button and this is what I ended up with:

Total wins:	157
Total loses:	143
Total games:	300
Win percentage:	52%

And then I got bored and went on with another project :)
Comments
Options