<!--bee_warrior.html cisc3650 assignmentII - spring 2012-->

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

var playing;
var paused;
var hittingArea;
var Caterpillar;
var bee;
var pin;
var hit;
var w, h;
var score;
var startTime;
var now;
var timeToHit;
var honeycombImage=new Image();
var beeImage=new Image();
var CaterpillarImage=new Image();


window.requestFrame = ( function( callback ) {
		           return( window.requestAnimationFrame ||
			           window.webkitRequestAnimationFrame ||
				   window.mozRequestAnimationFrame ||
	 			   window.oRequestAnimationFrame ||
	 			   window.msRequestAnimationFrame ||
	 			   function( callback ) { window.setTimeout( callback, 1000 / 60 ); } );
     		        } 
		      ) ();

function animate() {
 
  var c = document.getElementById( "myCanvas" );
  var cntxt = c.getContext( "2d" );
  
  w = c.width;
  h = c.height;
  
  cntxt.clearRect( 0, 0, c.width, c.height );
  
  honeycombImage.src="honeycomb.jpg";
  cntxt.drawImage(honeycombImage, 0,0,w,h); 
  
  beeImage.src="bee.png";
  cntxt.drawImage(beeImage, bee.x,bee.y,bee.w,bee.h);
  
  CaterpillarImage.src="Caterpillar.png";
  cntxt.drawImage(CaterpillarImage,Caterpillar.x, Caterpillar.y, Caterpillar.w, Caterpillar.h);
 
  Caterpillar.x+=Caterpillar.vx;
  Caterpillar.y+=Caterpillar.vy;
  
  
  if (( Caterpillar.x < 0 ) || ( Caterpillar.x > c.width-Caterpillar.w )) Caterpillar.vx = -(Caterpillar.vx);
  if (( Caterpillar.y < 0 ) || ( Caterpillar.y > c.height-Caterpillar.h )) Caterpillar.vy = -(Caterpillar.vy);
  
  if ( pin.visible == "true" ) {
    cntxt.fillStyle = "#000000";
    cntxt.fillRect( pin.x, pin.y, pin.w, pin.h );
    isHit();
    if ( hit == "false" ) {
      pin.y-=4;
      if ( pin.y <= 0 ) {
        pin.visible = "false";
      }
    }
  }
  
  if ( (playing == "true") && (paused=="false")  ) {
    requestFrame( function() { animate(); } );
  }
} 


function isHit() {
  hittingArea.x=Caterpillar.x+8;
  hittingArea.y=Caterpillar.y+8;
  hittingArea.w=Caterpillar.w-16;
  hittingArea.h=Caterpillar.h-16;
  
  if ((( hittingArea.x > pin.x )           && ( hittingArea.x < pin.x + pin.w )           && ( hittingArea.y > pin.y )           && ( hittingArea.y < pin.y + pin.h )) ||
      (( hittingArea.x > pin.x )           && ( hittingArea.x < pin.x + pin.w )           && ( hittingArea.y + hittingArea.h > pin.y ) && ( hittingArea.y + hittingArea.h < pin.y + pin.h )) ||
      (( hittingArea.x + hittingArea.w > pin.x ) && ( hittingArea.x + hittingArea.w < pin.x + pin.w ) && ( hittingArea.y + hittingArea.h > pin.y ) && ( hittingArea.y + hittingArea.h < pin.y + pin.h )) ||
      (( hittingArea.x + hittingArea.w > pin.x ) && ( hittingArea.x + hittingArea.w < pin.x + pin.w ) && ( hittingArea.y > pin.y )           && ( hittingArea.y < pin.y + pin.h )) ||
      (( pin.x > hittingArea.x )         && ( pin.x < hittingArea.x + hittingArea.w )         && ( pin.y > hittingArea.y )         && ( pin.y < hittingArea.y + hittingArea.h )) ||
      (( pin.x > hittingArea.x )         && ( pin.x < hittingArea.x + hittingArea.w )         && ( pin.y + pin.h > hittingArea.y ) && ( pin.y + pin.h < hittingArea.y + hittingArea.h )) ||
      (( pin.x + pin.w > hittingArea.x ) && ( pin.x + pin.w < hittingArea.x + hittingArea.w ) && ( pin.y + pin.h > hittingArea.y ) && ( pin.y + pin.h < hittingArea.y + hittingArea.h )) ||
      (( pin.x + pin.w > hittingArea.x ) && ( pin.x + pin.w < hittingArea.x + hittingArea.w ) && ( pin.y > hittingArea.y )         && ( pin.y < hittingArea.y + hittingArea.h ))) {
    hit = "true";
    
    timeToHit = now.getTime() - startTime.getTime();
    updateTimeToHit();
    score++;
    updateScore();
    playing="false";
    }
} 

function startPlaying() {
  if(paused=="true"){
   paused="false";
   animate();
  }
  else{
  playing = "true";
  hit = "false";
  pin.visible = "false";
  Caterpillar.x = 5;
  Caterpillar.y = 0;
  startTime = new Date();
  animate();
  }
}

function replay(){
  startPlaying();
}


function stopPlaying() {
  playing = "false";
}

function gamePaused(){
  paused= "true";  
}

function moveLeft(){
  bee.x-=bee.vx;
  if(bee.x<0){
  bee.x=w-bee.w;
  }
}

function moveRight(){
  bee.x+=bee.vx;
  if(bee.x>w-bee.w){
  bee.x=0;
  }
}

<!-------i am trying to use this function to make caterpillar move fast by clicking levelup button-------->
<!-------however, once i use it, the canvas becomes blank------------------>
 /*function levelUp(){  
  Caterpillar.vx + = 1;
  Caterpillar.vy + = 1;
}*/


function beeSpeedUp(){  
  bee.vx+=1;
}


function shoot() {
  if ( pin.visible == "false" ) {
    pin.x = bee.x+bee.w/2;
    pin.y = h - pin.h*2;
    pin.visible = "true";
    hit = "false";
  }
}

function doKeyDown(evt){
   switch (evt.keyCode) {
   case 37:  /* Left arrow was pressed */
   moveLeft();
   break;
   case 38:  /* up arrow was pressed */
   beeSpeedUp();
   break;
   case 39:  /* Right arrow was pressed */
   moveRight();
   break;
   case 32:  /*space bar was pressed*/
   shoot();
   break;
   }
}


function updateClock() {
  now = new Date();
  var hh = now.getHours();
  if ( hh < 10 ) hh = "0" + hh;
  var mm = now.getMinutes();
  if ( mm < 10 ) mm = "0" + mm;
  var ss = now.getSeconds();
  if ( ss < 10 ) ss = "0" + ss;
  var msec = now.getMilliseconds();
  document.getElementById( "clock" ).innerHTML = "time = " + hh + ":" + mm + ":" + ss + '.' + msec;
  t = setTimeout( 'updateClock()',100 );
} // end of updateClock()


function updateScore() {
  document.getElementById( "score" ).innerHTML = "score = " + score;
} // end of updateScore();


function updateTimeToHit() {
  document.getElementById( "timeToHit" ).innerHTML = "time to hit = " + timeToHit + " milliseconds";
} // end of updateScore();


function init() {
  updateClock();
  
  Caterpillar = new Object();
  Caterpillar.x = 5;
  Caterpillar.y = 0;
  Caterpillar.w = 60;
  Caterpillar.h = 62;
  Caterpillar.vx = 3;
  Caterpillar.vy = 3;
  
  hittingArea = new Object();
  

  bee = new Object();
  bee.x=360;
  bee.y=435;
  bee.vx=6;
  bee.w=80;
  bee.h=80;
  
  pin = new Object();
  pin.w = 3;
  pin.h = 40;
  
  pin.visible = new Boolean();
  pin.visible = "false";
  
  playing = new Boolean();
  playing = "false";
  paused = new Boolean();
  paused = "false";
  hit = new Boolean();
  hit = "false";
  score = 0;
  updateScore();
  animate();
} 
window.addEventListener('keydown',doKeyDown,true);
</script>
<title>BEE WARRIOR</title>
</head>

<body onload="init()">

<div style="position: absolute;  width: 1024px; height: 40px;  font-family: Arial Black; color: blue; font-size: 24px; margin-top: 10px;  ">
Welcome to become a bee warrior!

<div style="font-family: Arial; color: red; font-size: 18px; margin-left: 10px;">
Instruction:space bar for shooting, left key and right key for moving, up key for increasing speed
</div>
</div>

<br/>
<div style="margin-top:65px;"> 
<canvas id="myCanvas" width="800" height="505" style="border:5px solid #000000;">
Your browser does not support the canvas element.
</canvas>
</div>

<button type="button" onclick="startPlaying()">play</button>
<button type="button" onclick="stopPlaying()">stop</button>
<button type="button" onclick="gamePaused()">pause</button>
<button type="button" onclick="replay()">replay</button>
<!---<button type="button" onclick="levelUp()">levelUp</button>----->

<div id="clock">time= </div>
<div id="score">score = </div>
<div id="timeToHit">time to hit = </div>

</body>
</html>