JavaScript - Forms In Javascript Game

// awesome goblin game
// assetLoader
  /**
   * Ensure all assets are loaded before using them
   * @param {number} dic  - Dictionary name ('imgs', 'sounds', 'fonts')
   * @param {number} name - Asset name in the dictionary
   */
  function assetLoaded(dic, name) {
    // don't count assets that have already loaded
    if (this[dic][name].status !== 'loading') {
      return;
    }
    this[dic][name].status = 'loaded';
    assetsLoaded++;
    // progress callback
    if (typeof this.progress === 'function') {
      this.progress(assetsLoaded, this.totalAssest);
    }
    // finished callback
    if (assetsLoaded === this.totalAssest && typeof this.finished === 'function') {
      this.finished();
    }
  }
// before assetLoader.finished()
/**
 * Show asset loading progress
 * @param {integer} progress - Number of assets loaded
 * @param {integer} total - Total number of assets
 */
assetLoader.progress = function(progress, total) {
  var pBar = document.getElementById('progress-bar');
  pBar.value = progress / total;
  document.getElementById('p').innerHTML = Math.round(pBar.value * 100) + "%";
}
/**
 * Show the main menu after loading all assets
 */
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

function mainMenu() {
  $('#progress').hide();
  $('#main').show();
  $('#menu').addClass('main');
}

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
	bgReady = true;
};
bgImage.src = "images/background.png";

// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
	heroReady = true;
};
heroImage.src = "images/hero_sheet.png";

// Treasure image
var treasureReady = false;
var treasureImage = new Image();
treasureImage.onload = function () {
	treasureReady = true;
};
treasureImage.src = "images/treasure.png";

// Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
	monsterReady = true;
};
monsterImage.src = "images/monster.png";

// Game objects
var backgrounder = {
	speed: 0,
	x: 0,
	y: 0
};
var hero = {
	speed: 256, // movement in pixels per second
	x: 0,
	y: 0
};
var monster = {
	speed: 256, 
	x: 0,
	y: 0
};
var treasure = {
	x:0,
	y:0
};
var treasureCaught = 0;
var treasureTimer= 0;
var treasureTime= 50;
var monstersCaught = 0;
var delta = 0;
var lives = 3;
var directionMonster = 0;
var directionDuration = 20;



var goThisWay = 1;
// Handle keyboard controls
var keysDown = {};

addEventListener("keydown", function (e) {
	keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
	delete keysDown[e.keyCode];
}, false);

// Reset the game when the player catches a monster
var reset = function () {
	hero.x = canvas.width / 2;
	hero.y = canvas.height / 2;

	// Throw the monster somewhere on the screen randomly
	monster.x = 32 + (Math.random() * (canvas.width - 64));
	monster.y = 32 + (Math.random() * (canvas.height - 64));
};
//restart the game
var restartGame = function (){
	
//when you die screen turns black
ctx.fillStyle="#000000";//color
ctx.fillRect(32,32,canvas.width-64,canvas.height-64);//draw rectangle with the bushes still in place
//show that you're dead
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.textAlign = "center";
ctx.fillText("GameOver Press R to reset",canvas.width/2, canvas.height/2);
//R to reset pressed	
if (82 in keysDown){
	//reset assets
	lives = 3;
	treasureCaught = 0;
}	
	
};
// Update game objects
var update = function (modifier) {
	if (38 in keysDown) { // Player holding up
		
		//check if hero walks from screen
		if (hero.y <= 32){
			//if hero walks from screen top, stay at exact y axle
			hero.y = hero.y;
		} 
		else{
			//move hero up
		hero.y -= hero.speed * modifier;
		}
		// end of upmovement
	}
	if (40 in keysDown) { // Player holding down
		//check if hero walks from screen
		if (hero.y >= canvas.height -64){
			//if hero walks from screen bottom, stay at exact y axle
			hero.y = hero.y;
		} 
		else{
			//move hero down
		hero.y += hero.speed * modifier;
		}// end of downmovement
	}
	
	if (37 in keysDown) { // Player holding left
		//check if hero walks from screen
		if (hero.x <= 32){
			//if hero walks from screen left, stay at exact x axle
		hero.x = hero.x;
			
		}
		else{
			//move hero left
		hero.x -= hero.speed * modifier;
		}//end of left movement
	}
	if (39 in keysDown) { // Player holding right
		//check if hero walks from screen
		if (hero.x >= canvas.width -64){
			//if hero walks from screen right, stay at exact x axle
			hero.x=hero.x;
		}
		else{
			//move hero right
		hero.x += hero.speed * modifier;
		}//end of right movement
	}

	// Are they touching? MONSTER
	if (
		hero.x <= (monster.x + 32)
		&& monster.x <= (hero.x + 32)
		&& hero.y <= (monster.y + 32)
		&& monster.y <= (hero.y + 32)
	) {
		--lives;
		reset();
	}
	// Are they touching? TREASURE
	if (
		hero.x <= (treasure.x + 32)
		&& treasure.x <= (hero.x + 32)
		&& hero.y <= (treasure.y + 32)
		&& treasure.y <= (hero.y + 32)
	) {
		treasureTimer = treasureTime;
		++treasureCaught;

	}
};
//make our monster move :)
var monsterMove = function (modifier){
	
	
	
	++directionMonster;
	
	if (directionMonster <= directionDuration){
		//bewegingen
		//rechts => links
	if (goThisWay == 1)	{
		monster.x = monster.x - (monster.speed * modifier);
	if (monster.x <= 32){
		goThisWay = 2;
	}
	}
	//links => rechts
	if (goThisWay == 2)	{
		monster.x = monster.x + (monster.speed * modifier);
	if (monster.x >= canvas.width-64){
		goThisWay=1;
	}
	}
	//boven => onderen
	if (goThisWay == 3)	{
		monster.y = monster.y + (monster.speed * modifier);
	if (monster.y >= canvas.height-64){
		goThisWay=4;

	}
	}
	//onderen => boven
	if (goThisWay == 4)	{
		monster.y = monster.y - (monster.speed * modifier);
	if (monster.y <= 32){
		goThisWay=3;

	}
	}		
	//bepalen welke richting
	if (directionMonster ==directionDuration){
		directionMonster = 0;
		goThisWay = Math.floor((Math.random() * 4) + 1);
		//console.log (goThisWay);
	}	
	}
	};
// Draw everything
var render = function () {
	if (bgReady) {
	 //backgrounder.x = backgrounder.x +1;	
	backgrounder.x = 0;
		ctx.drawImage(bgImage, backgrounder.x, 0);
	}
	

	if (heroReady) {
		ctx.drawImage(heroImage, hero.x, hero.y);
	}

	if (monsterReady) {
		ctx.drawImage(monsterImage, monster.x, monster.y);
	}
if (treasureReady) {
		ctx.drawImage(treasureImage, treasure.x, treasure.y);
	}
	// Score
	ctx.fillStyle = "rgb(250, 250, 250)";
	ctx.font = "24px Helvetica";
	ctx.textAlign = "left";
	ctx.textBaseline = "top";
	ctx.fillText("Treasure caught: " + treasureCaught, 32, canvas.height-64);
	ctx.fillText("Lives: " + lives, 32, 32);
};
var spawnTreasure = function(){
	
	if (treasureTimer >= treasureTime){
treasure.x = 32 + (Math.random() * (canvas.width - 64));
	treasure.y = 32 + (Math.random() * (canvas.height - 64));
	treasureTimer = 0;
	
	}
	
	++treasureTimer;
};
// The main game loop
var main = function () {
	var now = Date.now();
	delta = now - then;

if (lives > 0){
	update(delta / 1000);		
		render();
monsterMove(delta / 1000);
spawnTreasure();
} 
else {
	restartGame();
}
	then = now;
	

	// Request to do this again ASAP
	requestAnimationFrame(main);
};

// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

// Let's play this game!
var then = Date.now();
reset();
main();

<html>

<head>

<title>
Blackjack </title>

<script LANGUAGE="JavaScript1.1">


var dealer_hand = new Array();

var player_hand = new Array();

var game_over = false;


function Card(num,suit) {

   this.num = num;

   this.suit = suit;

   this.fname = fname;

}

function fname() {

   return this.num + this.suit + ".gif";

}



function Deck() {

   this.cards = new Array(52);

   this.next_card = 0;

   // fill the deck (in order, for now)

   for (i=1; i<14; i++) {

     this.cards[i-1] = new Card(i,"c");

     this.cards[i+12] = new Card(i,"h");

     this.cards[i+25] = new Card(i,"s");

     this.cards[i+38] = new Card(i,"d");

   }

   this.shuffle = shuffle;

   this.dealCard = dealCard;

}

function shuffle() {

   for (i=1; i<1000; i++) {

      // switch two randomly selected cards

      card1 = Math.floor( 52*Math.random() );

      card2 = Math.floor( 52*Math.random() );

      temp = this.cards[card2];

      this.cards[card2] = this.cards[card1];

      this.cards[card1] = temp;

   }

   this.next_card = 0;

}

function dealCard() {

   return this.cards[ this.next_card++ ];

}


var deck = new Deck();

deck.shuffle();


function newGame() {


   if ( deck.next_card > 39 ) {  

      deck.shuffle();            

   }

   dealer_hand = new Array();

   player_hand = new Array();
   
   dealer_hand[ 0 ] = deck.dealCard();   // This is the hole card.

   document.images[0].src = "http://www.litchzen.com/cardback.PNG"; // The hole card is not shown

   dealer_hand[ 1 ] = deck.dealCard();

   document.images[ 1 ].src = dealer_hand[ 1 ].fname();

   for ( i=2; i<6; i++) {

      document.images[i].src = "http://www.litchzen.com/cardback.PNG";

   }
    num = i + 1;     

   player_hand[ 0 ] = deck.dealCard();

   document.images[ 6 ].src = player_hand[ 0 ].fname();

   player_hand[ 1 ] = deck.dealCard();

   document.images[ 7 ].src = player_hand[ 1 ].fname();

   for (i=8; i<12; i++) {

      document.images[i].src = "http://www.litchzen.com/cardback.PNG";

   }


   window.status = "";

   document.form1.dealer.value = "";

   document.form1.result.value = "";

   document.form1.player.value = score( player_hand );

   game_over = false;


} // end function newGame()


function hit() {

   var total = 0;

   var new_card = 0;  // index for the new card position

   if ( game_over ) {

      window.status = "Game over.  Click the Deal button to start a new hand."

   } else {

      new_card = player_hand.length;

      player_hand[ new_card ] = deck.dealCard();

      document.images[ new_card + 6 ].src = player_hand[ new_card ].fname();

      total = score( player_hand );

      if ( total > 21 ) {  // Busted, game over.

         document.form1.player.value = total + "  busted";

         document.images[ 0 ].src = dealer_hand[ 0 ].fname(); 

         document.form1.dealer.value = score( dealer_hand );

         winner();

         game_over = true;

      } else {

         document.form1.player.value = total;

      }

   }

} // end function hit()


function stand() {

   var total = 0;

   var new_card = 0;  

   if ( game_over ) {

      window.status = "Game over.  Click the Deal button to start a new hand."

   } else {

      document.images[ 0 ].src = dealer_hand[ 0 ].fname(); 

      while ( score( dealer_hand ) < 17 ) {  

         new_card = dealer_hand.length;

         dealer_hand[ new_card ] = deck.dealCard();

         document.images[ new_card ].src = dealer_hand[ new_card ].fname();

      }


      total = score( dealer_hand );

      if ( total > 21 ) {  // Busted

         document.form1.dealer.value = total + "  busted";

      } else {

         document.form1.dealer.value = total;

      }



   }

   winner();

   game_over = true; // The game ends after the player stands.



} // end function stand()


function score(hand) {

   var total = 0;

   var soft = 0; // This variable counts the number of aces in the hand.

   var pips = 0; // The trump pictures on a card used to be called pips.

   for ( i=0; i<hand.length; i++ ) {

      pips = hand[i].num;

      if ( pips == 1 ) { 

         soft = soft + 1;

         total = total + 11;

      } else {

         if ( pips == 11 || pips == 12 || pips == 13 ) {

            total = total + 10;

         } else {

            total = total + pips;

         }

      }

   }

   while ( soft > 0 && total > 21 ) {  // Count the aces as 1 instead

      total = total - 10;              // of 11 if the total is over 21

      soft = soft - 1;

   }   

   return total;

}  // end function score


function winner() {

   var player_total = score( player_hand );

   var dealer_total = score( dealer_hand );

   if ( player_total > 21 ) {  // Busted

      document.form1.result.value = "Dealer wins";

   } else {

      if ( dealer_total > 21 ) { // Busted

         document.form1.result.value = "Player wins";

      } else {

         if ( player_total  == dealer_total ) {

            document.form1.result.value = "Tie game";

         } else {

            if ( player_total  > dealer_total ) {

               document.form1.result.value = "Player wins";

            } else {

               document.form1.result.value = "Dealer wins";

            }

         }

      }

   }

}


</script>



</head>



<body>

<h1>Blackjack Javascript Example</h1>

<hr>

<form NAME="form1">

<table>

<tr>

  <td> <B>Dealer: </B>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> </td>

</tr>

<tr>

  <td> <B>Player: <B>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

  <td> <img border=0 src="http://www.litchzen.com/cardback.PNG" height=125 width=95>

</tr>

<tr>

  <td> <B>Dealer Sco </B><BR>

       <input TYPE="TEXT" SIZE=12 NAME="Dealer" VALUE="0"></td>

  <td> <B>Player Sco </B><BR>

       <input TYPE="TEXT" SIZE=12 NAME="You" VALUE="0">

  <td> <input TYPE="BUTTON" VALUE="      Stay      " onClick="stand();">

  <td> <input TYPE="BUTTON" VALUE="         Hit         " onClick="hit();">

  <td> <a href="#" onClick="newGame();"

        onMouseOver = "window.status = 'Deal a new hand.'; return true; "

        onMouseOut = "window.status = '';">

       <img border=0 src="http://us.cdn3.123rf.com/168nwm/fuzzbones/fuzzbones1105/fuzzbones110500782/9628185-deal-word-in-male-hand.jpg" height=50 width=106></a>

  <td> <B>Game Result:</B><BR>

       <input TYPE="TEXT" SIZE=10 NAME="result" VALUE=""</td>

</tr>

</table>

</form>

<P>Click the Deal button to start a new game.<BR>

Click the Hit button to get another card.<BR>

Click the Stay button to end your turn.
Try and get as close to 21 as possible to win. Good luck!</P>


</body>

</html>

<html>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
var die = 6;
var dice = 2;
var ary=[];

function dice_roll(die, dice,nu) {
 var txt=document.form.text;
 for (var roll=0,loop=0; loop < dice; loop++) {
  roll = roll + Math.round(Math.random() * die) % die + 1;
 }
 if (ary.length==0&&nu==0){
  txt[0].value =ary[0]= roll;
  txt[1].value = 0;
 }
 if (ary.length==1&&nu==1){
  txt[1].value = ary[1]= roll;
  if (ary[0]==ary[1]){
   alert('Draw');
  }
  else if (ary[0]>ary[1]){
   alert('Player 1 Wins');
  }
  else {
   alert('Player 2 Wins');
  }
  ary=[];

 }
}
// End -->


</script>

<body>
<form name=form>
<table border=2 cellpadding=5>
<tr>
 <td colspan=2 align=middle>No. of sides/dice</td>

</tr>
<tr>
<td valign=top align=middle>
<p><input type=radio checked name=sides onClick="die = 6">6 Sided
</td>
<td valign=top align=middle>
<p><input name=number type=radio onClick="dice = 2" checked>
2
</td>
</tr>
<tr>
<td colspan=2 >
Player 1
</td>
</tr>
<tr>
<td align=middle colspan=4>
<input type=button value="Roll Dice" name=button onClick="dice_roll(die, dice,0)">
<input type=text size=10 name=text value="0" disabled="disabled" >
</td>
</tr>
<tr>
<td colspan=2 >
Player 2
</td>
</tr>
<tr>
<td align=middle colspan=4>
<input type=button value="Roll Dice" name=button onClick="dice_roll(die, dice,1)">
<input type=text size=10 name=text value="0" disabled="disabled" >
</td>
</tr>
</table>
</form>

</center>
</body>
</html

<html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var deck=new Array; var hand=new Array(53); var hcrd=new Array(53); var hsut=new Array(53);
var isPlaying=-1; var betn=1; var dpos=0; var crdts; var ncard=0;
/* ----------------------------------------------------------------------------------------- */
function initdeck(){
crd=0;
for(i=0;i<4;i++){
if(i==0){st="club";} else if(i==1){st="heart";} else if(i==2){st="diamond";}else{st="spade";}
for(c=1;c<14;c++){
if(c==1){num="ace";}else if(c==11){num="jack";}
else if(c==12){num="queen";}else if(c==13){num="king";}else{num=c;}
deck[crd++]=st+"|"+num;
} //for c
} //for i
}

/* ----------------------------------------------------------------------------------------- */
function showcard(cnum)
{
p = hand[cnum].indexOf("|");
s = hand[cnum].substring(0,p);
c = hand[cnum].substring(p+1,hand[cnum].length);
if(cnum==0){document.images.card1.src="cards/"+s+c+".jpg";}
else if(cnum==1){document.images.card2.src="cards/"+s+c+".jpg";}
else if(cnum==2){document.images.card3.src="cards/"+s+c+".jpg";}
else if(cnum==3){document.images.card4.src="cards/"+s+c+".jpg";}
else{document.images.card11.src="cards/"+s+c+".jpg";}
}
function hit(ncard)
{
p = hand[ncard].indexOf("|");
s = hand[ncard].substring(0,p);
c = hand[ncard].substring(p+1,hand[ncard].length);
if(ncard==4){document.images.card5.src="cards/"+s+c+".jpg";}
else if(ncard==5){document.images.card6.src="cards/"+s+c+".jpg";}
else if(ncard==6){document.images.card7.src="cards/"+s+c+".jpg";}
}
function stand()
{
document.images.card8.src="cards/"+s+c+".jpg";
}

function deal()
{
if(isPlaying < 0)
{ // new game
dpos = 0; isPlaying=1;
for(i=0;i<500;i++)
{ //shuffle the cards(mix up the deck)
tmp = Math.round(Math.random()*51); tmp2= Math.round(Math.random()*51);
stmp = deck[tmp]; deck[tmp] = deck[tmp2]; deck[tmp2] = stmp;
}
for(i=0;i<53;i++)
{
hand[i]=deck[dpos++];showcard(i);
hand[i]=deck[dpos++];hit(i);
}
} 
}
function quit(){window.close();}
/* ----------------------------------------------------------------------------------------- */
initdeck();

// End -->
</script>
</HEAD>
<BODY>
<table>
<tr><form name="drwcrd">
<td width=590></td>
<td><b>Computer</b></td>
</tr><tr></form> 
<table>
<tr><form name="drwcrd">
<td width=500></td>
<td width=30 align=center><img name="card1" src="cards/cardback.jpg"></td>
<td width=30 align=center><img name="card3" src="cards/cardback.jpg"></td>
<td width=30 align=center><img name="card8" src=""></td>
<td width=30 align=center><img name="card9" src=""></td>
<td width=30 align=center><img name="card10" src=""></td>
<table>
<tr><form name="drwcrd">
<td width=590></td>
<td><b>Player</b></td>
</tr><tr></form> 
<table>
<tr><form name="drwcrd">
<td width=500></td>
<td width=30 align=center><img name="card2" src="cards/cardback.jpg"</td>
<td width=30 align=center><img name="card4" src="cards/cardback.jpg"</td>
<td width=30 align=center><img name="card5" src=""</td>
<td width=30 align=center><img name="card6" src=""</td>
<td width=30 align=center><img name="card7" src=""</td>
</tr><tr></form>
<table>
<tr><td><input type="button" value ="DEAL Cards" onClick="javascript:deal();"></td>
<td><input type="button" value ="Hit" onClick="javascript:hit();"></td>
<td><input type="button" value ="Stand" onClick="javascript:stand();"></td>
</body>
</html>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Brian Gosselin (bgaudiodr@aol.com) -->
<!-- Web Site:  http://www.bgaudiodr.iwarp.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://www.javascriptsource.com -->


<!-- Begin
var image_directory = "http://www.your-web-site-address-here.com/simon-says-pics/";
var ok = false; 
var pcbusy = false; 
var userturn = true;
var butdown = false;
var stage = 1;
var cnt = 1;
var pcclicks = new Array();
var userclicks = new Array();
var pos;
var tst = true;
var msg = "Click Go!";
btn1 = new Image();
btn1.src = image_directory + "purple.gif";
btn2 = new Image();
btn2.src = image_directory + "yellow.gif";
function updown(isdn) {
if (isdn) {
document.f[('pl'+pos)].src = image_directory + 'yellow.gif';
}
else {
document.f[('pl'+pos)].src= image_directory + 'purple.gif';
   }
}
function getPattern() {
  if(stage=1)
    return new Array(1);
  if(stage=2)
   return new Array(1,2);
  if(stage=3)
   return new Array(1,2,3);
  if(stage=4)
   return new Array(1,2,3,4);
  if(stage=5)
   return new Array(1,2,3,4,5);
  if(stage=6)
   return new Array(1,2,3,4,5,6);
  else
    return new Array(1,2,3,4,5,6,7);
}
function dopc() {
document.f.st.value = stage;
if (cnt <= stage) {
pcbusy = true;
userturn = false;
document.f.s.value = getPattern()[0];
pos=getPattern()[cnt - 1];
setTimeout("updown(true)",500);
setTimeout("updown(false) ; pcclicks[cnt]=pos; cnt++; dopc()",1200);
}
else {
userclicks = new Array();
cnt = 1;
document.f.s.value = "Player's  Turn";
pcbusy = false;
userturn = true;
document.f.b.focus();
   }
}
function testclicks() {
tst = true;
for(i = 1;cnt > i; i++) {
if (pcclicks[i] == userclicks[i]) {
tst = true && tst;
}
else {
tst = false && tst;
   }
}
if(tst) {
setTimeout("stage++ ; document.f.st.value=stage ; alert('That is correct!  Advancing to the next level....'); document.f.s.value=msg ; document.f.b.focus()",300);
}
else {
setTimeout("stage=1 ; cnt=1 ; pcclicks=new Array() ; document.f.st.value=stage ; alert('Sorry, that is not correct.  Start a new game if you would like to play again.') ; document.f.s.value=msg",300);
}
cnt = 1;
}
function testclk(downflag, pos) {
if (userturn&&(!pcbusy)) {
if (downflag) {
document.f[('pl'+pos)].src = image_directory + 'yellow.gif';
}else{
document.f[('pl'+pos)].src = image_directory + 'purple.gif';
}
if (ok && !downflag) {
userclicks[cnt] = pos;
cnt++;
if (pcclicks.length == userclicks.length) {
testclicks();
         }
      }
   }
}
//  End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->


<BODY>

<embed src="G#.wav" autostart="false" hidden="true" name="sound1" enablejavascript="true">	

<!-- <a href="#" onclick="playSound('G#.wav');"></a> !-->

<img src="piano.png" />

<center>
<form name="f">
<table cellspacing="20" cols="8" width="600">
<tr height="60">
<td align="center" width="20%"><img src="purple.gif" onclick="playsound('G#.wav')"; name="1" onMousedown="testclk(true,1)" onMouseup="testclk(false,1)"></td>
<td align="center" width="20%"><img src="purple.gif" name="2" onMousedown="testclk(true,2)" onMouseup="testclk(false,2)"></td>
<td align="center" width="20%"><img src="purple.gif" name="3" onMousedown="testclk(true,3)" onMouseup="testclk(false,3)"></td>
<td align="center" width="20%"><img src="purple.gif" name="4" onMousedown="testclk(true,4)" onMouseup="testclk(false,4)"></td>
<td align="center" width="20%"><img src="purple.gif" name="5" onMousedown="testclk(true,5)" onMouseup="testclk(false,5)"></td>
<td align="center" width="20%"><img src="purple.gif" name="6" onMousedown="testclk(true,6)" onMouseup="testclk(false,6)"></td>
<td align="center" width="20%"><img src="purple.gif" name="7" onMousedown="testclk(true,7)" onMouseup="testclk(false,7)"></td>
<td align="center" width="20%"><img src="purple.gif" name="8" onMousedown="testclk(true,8)" onMouseup="testclk(false,8)"></td>

</tr>
<tr height = 60>
<td width="20%" align="center"><font size="3">Level<br></font><input type="text" size="2" value="1" name="st" readonly></td>
<td align="center" colspan="3"><input type="text"  name="s" value="Click 'Go!' to start" readonly></td>
<td align="center"><input type="button" value="    Go!    " name="b" onClick="ok=true ; if(!pcbusy) dopc()"></td>
</tr>
</table>
</form>
</center>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br/>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  4.21 KB -->

<html>
<head>

<script language="javascript" type="text/javascript">

// cursor drag and drop variables
var IE = document.all;
var selectedImage = null; 
var tx = 0;
var ty= 0;
var x = 0;
var y = 0;

//change names
var rand=null;
var myround=null;

//timer variables
var c= 0;
var t;
var timer_is_on= null


// Where images are supposed to go
var image1 = new Array ("804px","70px"); 
var image2 = new Array ("661px","70px");
var image3 = new Array ("225px","70px");
var image4 = new Array ("950px","70px");
var image5 = new Array ("517px","70px");
var image6 = new Array ("372px","70px");
var picLocs = new Array(image1,image2,image3,image4,image5,image6);


//

var correctPitchPosition = new Array("0","0","0","0","0","0");

var allCorrect = true;

var correctPosition = 50;
var counter = 0;
 


// start drag and drop 

function enableDragging(evt) {
	if(IE) {
		selectedImage = event.srcElement;
	} else {
		selectedImage = evt.target; 
	}
	
	tx = parseInt (selectedImage.style.left +0) 
	ty = parseInt (selectedImage.style.top +0)
	
   	if(IE) {
		x = event.clientX;
		y = event.clientY;
	} else {
    	x = evt.clientX;
		y = evt.clientY;
	}

    document.onmousemove = dragImage;
    document.onmouseup = disableDragging;

    return false;
  }


// Do drag and Drop
 
function dragImage(evt) {

    if (!evt) evt = window.event;

	selectedImage.style.left = tx + evt.clientX -x;
    selectedImage.style.top = ty + evt.clientY- y;

    return false;
}


//Stop Drag and Drop

function disableDragging() {

	correctImg();
    document.onmousemove = null;
    document.onmouseup = null;
	correctTeam();

    return false;

  }


//Set Up Events for every image 
 
function setupEvents() {
	
	for (var j=0; j < document.images.length; j++)
	{
    	document.images[j].onmousedown = enableDragging;
	}
}
  

//Timer Control
function timedCount()
{
	document.getElementById('txt').value=c;
	c=c+1;
	t=setTimeout("timedCount()",1000);

}


//Timer function

function doTimer()
{
	if (!timer_is_on)
  	{
   		timer_is_on=1;
   		timedCount();
 	}
}

//Stop Timer
function stopCount()
{
	clearTimeout(t);
	timer_is_on=0;
	alert("Timer stopped!");
}


function gameStart() { 

	doTimer(); 
	setupEvents();
	c = 0;
	for (var i=0; i < 6; i++)
	{
		randX = Math.random()*800;
		myroundX = Math.floor(randX);
		document.images[i].style.left = myroundX;
	}
	alert("You must put the Liverpool player in their correct spaces based on the descriptions, press OK to continue")
}



function correctImg()
{

for (i=0; i < picLocs.length; i++)
{ 
  if  ( parseInt(document.images[i].style.left) > parseInt(picLocs [i][0])-correctPosition && 
		parseInt(document.images[i].style.left) < parseInt(picLocs[i][0])+correctPosition &&
		parseInt(document.images[i].style.top) > parseInt(picLocs[i][1])-correctPosition && 
		parseInt(document.images[i].style.top) < parseInt(picLocs[i][1])+correctPosition)
  {
  correctPitchPosition[i] = 1;
  }
}

}

function correctTeam() {
	for(var k=0; k < 6; k++) {
		if(correctPitchPosition[k] == 1)
		counter = counter + 1;
	}
	
	if (counter==6)
	{
		alert("Your time was " + c + " well done!");
		stopCount();
	}
	counter=0;
}


</script>
<link href="_css/styles.css" rel="stylesheet" type="text/css">
</head>

<body>
		<img src="_images/agger.jpg" alt="Daniel Agger" class="imgPos" style="position: absolute; top: 320px; left: 804px" />
        <img src="_images/carragher.jpg" alt="Jamie Carragher" class="imgPos" style="position: absolute; top: 320px; left: 950px"/>
        <img src="_images/gerrard.jpg" alt="Steven Gerrard" class="imgPos" style="position: absolute; top: 320px; left: 372px"/>
        <img src="_images/mascherano.jpg" alt="Javier Mascherano" class="imgPos" style="position: absolute; top: 320px; left: 225px"/>
        <img src="_images/reina.jpg" alt="Pepe Reina" class="imgPos" style="position: absolute; top: 320px; left: 517px"/>
        <img src="_images/torres.jpg" alt="Fernando Torres" class="imgPos" style="position: absolute; top: 320px; left: 661px"/>
   
   		<div id="desAgger" class="description" style="left:804px;">
            <p>"I have a wicked left foot but i like to stay and defend"</p>
</div>
<div id="desMascherano" class="description" style="left:950px;">
            <p>"I'm a tenacious Argentinian who'll chase anything down"</p>
        </div>
<div id="desTorres" class="description" style="left:372px;">
            <p>"I am from Spain, they call me El Nino"</p>
        </div>
<div id="desGerrard" class="description" style="left:225px;">
            <p>"I'm the captain of Liverpool FC, and a proud scouser"</p>
        </div>
<div id="desReina" class="description" style="left:517px;">
            <p>"My real name is Jose and i'm the Liverpool goalkeeper"</p>
        </div>
<div id="desCarragher" class="description" style="left:661px;">
            <p>"I'm the defensive stalwart, and vice-captain"</p>
        </div>
    
<form>
		<input type="button" value="Start game!" onClick="gameStart()" style="position:absolute; left: 500px; top: 539px; width: 20px; height: 20px; width: 120px; height: 40px;">
		<input type="button" value="Stop count!" onClick="stopCount()" style="position: absolute; left: 792px; top: 537px; width: 120px; height: 40px;">
		<input type="text" disabled id="txt" style="position: absolute; top: 547px; left: 633px" value="0" readonly="readonly">
</form>
		
</body>
</html>

var missed = 0;
var score = 0;
var on = 1;
var bulletx = [];
var bullety = [];
var zombiex = [700,600,800,1000,900];
var zombiey = [0,100,300,200,50];
function draw(image, x, y){
	var canvas = document.getElementById("game");
	var context = canvas.getContext("2d");
	var imageObj = new Image();
	imageObj.onload = function() {
	context.drawImage(imageObj, x, y);
	};
	imageObj.src = image;
}
document.onkeydown = checkKey;
function checkKey(e) {
if(on === 1){
	if(on === 1){
		e = e || window.event;
		if (e.keyCode == '40') {
			down();
		}else if (e.keyCode == '38') {
			up();
		}else if(e.keyCode == '32'){
			bullety.push(y+50);
			bulletx.push(100);
			score = score - 1;
    		}
	}
}
}
var y = 300;
function down(){
	y = y+50;
	draw("player.png", 0, y);
}
function up(){
	y = y-50;
	draw("player.png", 0, y);
}
draw("player.png",0,y);
function main(){
	draw("background.png",0,0);
	draw("player.png",0,y);
	for(i = 0; i < 5; i++){
		draw("zombie.png",zombiex[i],zombiey[i]);
		zombiex[i] = zombiex[i] - 5;
		if(zombiex[i] < -100){
			zombiex[i] = 600;
			zombiey[i] = Math.random()*450
			missed = missed+1;
		}
	}
	if(missed === 5){
		clearInterval(mainint);
		alert("5 zombies passed you, and America has fallen");
		alert("sco  "+score);
		on = 0;
	}
	for(i = 0; i < bulletx.length; i++){
		draw("background.png",0,0);
		draw("bullet.png",bulletx[i],bullety[i]);
		bulletx[i] = bulletx[i]+30;
		if(bulletx[i] > 700){
			bulletx.splice(i,1);
			bullety.splice(i,1);
		}
		if(bulletx[i] > zombiex[i] && bullety[i] > zombiey[i]-20 && bullety[i] < zombiey[i]+70){
			zombiex[i] = 600;
			zombiey[i] = Math.random()*450
			score = score + 10;
		}
	}
}
var mainint = setInterval(function(){main();}, 50);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  <head>
    <title>Dice Game</title>
    <link href="Dicegame.css" type="text/css" rel="stylesheet" /> 
  </head>
  <body>
  
    <div id='human' class='playerArea'>
      <h3>Human</h3>
      <div id='humanDice'>
      </div>
      <p id='humanTotal' class='total'></p>
    </div>
    
    <div id='computer' class='playerArea'>
      <h3>Computer</h3>
      <div id='computerDice'>
      </div>
      <p id='computerTotal' class='total'></p>
    </div>
    
    <div id='roll'>
      <a href='#' onclick='play(); return false;'>Roll</a>
    </div>
    
    <script type='text/javascript' src='lib.js'></script>
    <script type='text/javascript' src='dicegame.js'></script>
    
  </body>
</html>

window.onload=function(){
Nifty("div.playerArea", "big");
}

function roll()
{
  var result = 0;
  result = Math.floor((Math.random() * 6) + 1);
  return result;
}


function play()
{
  // create dice array
  var humanDice = new Array();
  var computerDice = new Array();
  
  // totals
  var humanTotal = 0;
  var computerTotal = 0;
  
  // output
  var out = "";
  
  // roll the dice
  for (var i = 0; i < 6; i++)
  {
    humanDice[i] = roll();
    humanTotal += humanDice[i];
    
    computerDice[i] = roll();
    computerTotal += computerDice[i];
  }
  
  // display human dice
  out = displayDice(humanDice);
  document.getElementById('humanDice').innerHTML = out;
  
  // display computer dice
  out = displayDice(computerDice);
  document.getElementById('computerDice').innerHTML = out;
  
  document.getElementById('humanTotal').innerHTML = humanTotal;
  document.getElementById('computerTotal').innerHTML =  computerTotal;  
  
  if (humanTotal > computerTotal)
  {
    document.getElementById('humanTotal').className = 'total winner';
    document.getElementById('computerTotal').className = 'total loser';
  }
  else if (computerTotal > humanTotal)
  {
    document.getElementById('humanTotal').className = 'total loser';
    document.getElementById('computerTotal').className = 'total winner';
  }
  else
  {
    document.getElementById('humanTotal').className = 'total';
    document.getElementById('computerTotal').className = 'total';
  }

}

function displayDice(dice)
{
  var out = "";
  for (var i = 0; i < dice.length; i++)
  {
    out += "<img src='die" + dice[i] + ".png'/>";
  }
  
  return out;
}

function output(text, tag)
{
  document.write("<" + tag + ">" + text + "</" + tag + ">");
}

<html>
<head>
<title>Lunar lander</title>

<script language="JavaScript"> 
var TopPos=100;
var fuel = 300;
var gravity = 0.0001;
var speed = 0.0005;
var moveBy = 366;
var Xpix = 1000;

function animation(){
TopPos +=gravity

document.getElementById("divlander").style.top = TopPos + "px";
if ((TopPos>604)&&(Xpix<526)){
			alert('win');
	}
	else if ((moveBy<100)&&(moveBy>500)){
			alert('crashed');
	}
if(TopPos<610)
window.setTimeout("animation()",30);
gravity +=0.03;
gravity += speed;
var f = document.game.fuel.value;
f--;
document.game.fuel.value = f;
if (f<=0){
document.game.fuel.value ="0";
gravity=10;
gr=0;
speed=10;
f=1;
alert('out of fuel');
}
}
function moveObj(name, Xpix, Ypix) 
{    
   	obj = document.getElementById(name);
	
	px = parseInt(obj.style.left) + Xpix;		
	py = parseInt(obj.style.top) + Ypix;
	obj.style.left = px;
	obj.style.top = py;
}

function ProcessKeypress(e)
{
	var myObj = "divlander";
	var moveBy = 10;
	
	if (e.keyCode) keycode=e.keyCode;
	else keycode=e.which;
	ch=String.fromCharCode(keycode);
   
	if(ch=='a') 		moveObj(myObj, -moveBy, 0);
	else if(ch=='d') 	moveObj(myObj, moveBy, 0);
	else if(ch=='w') 	gravity = -1;
	
		
}



</script>
<form name='game'>
<body onKeyPress="ProcessKeypress(event);">
<body onload ="animation();">
<input type=button value='200' name="fuel">

<p><img id="divlander" style="z-index: 0; left: 1000px; position: absolute; top: 100px" img src="lunar_lander_72dpi2.png"></p>
<img src="Serenity2.jpg";>
<p><<body>

</body>
</form>
</html>