Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jeu</title>
  <style type="text/css">
    #jeu{
      width: 600px;
      height: 400px;
      border: 2px black solid;

    }
    #soucoupe{

						width: 10px;
					    height: 80px;
					    background-color: black;
					    border: black 2px solid;
					    border-radius: 5px;
					    z-index: 200;
					    position: absolute;
					    top: 20px;
					    left: 15px;


    }

   #balle{

					     width: 20px;
					    height: 20px;
					    background-color: red;
					    border: black 2px solid;
					    border-radius: 20px;
					    z-index: 200;
					    position: absolute;
					    top: 20px;
					    left: 70px;
    }

 #soucoupe2{

					    width: 10px;
					    height: 80px;
					    background-color: black;
					    border: black 2px solid;
					    border-radius: 5px;
					    z-index: 200;
					    position: absolute;
					    top: 20px;
					    left: 590px;

    }

.Start {

position: absolute;
bottom:50px;
left: 175px;

}

.Stop {

position: absolute;
bottom:50px;
left: 300px;

}


  </style>
</head>

<body>
  <div id="jeu">
    <img id="soucoupe">
    <img id="balle">
	<img id="soucoupe2">

<button class= "Start" id="activer">Start the game</button>

<button class= "Stop" id="desactiver">Stop the game</button>

  </div>


  <script src="jquery.js"></script>
  <script src="jquery-collision.js"></script>
  <script>
    $(function() {
      var stopDetection = 0;
      $(document).keydown(function(e){
      if (e.which == 39) // Vers la droite
      {
        posX = parseInt($('#soucoupe').css('left'));
          if (posX < 575)
            $('#soucoupe').css('left', posX+30);
        }
        if (e.which == 37) // Vers la gauche
        {
          posX = parseInt($('#soucoupe').css('left'));
          if (posX > 40)
            $('#soucoupe').css('left', posX-30);
        }
        if (e.which == 40) // Vers le bas
        {
          posY = parseInt($('#soucoupe').css('top'));
          if (posY < 300)
            $('#soucoupe').css('top', posY+30);
        }
        if (e.which == 38) // Vers le haut
        {
          posY = parseInt($('#soucoupe').css('top'));
          if (posY > 25)
            $('#soucoupe').css('top', posY-30);
        }
        if (e.which == 36) // Vers le haut et la gauche
        {
          posX = parseInt($('#soucoupe').css('left'));
          posY = parseInt($('#soucoupe').css('top'));
          if ((posY > 20) && (posX > 20))
            $('#soucoupe').css('left', posX-30).css('top', posY-30);
        }
        if (e.which == 33) // Vers le haut et la droite
        {
          posX = parseInt($('#soucoupe').css('left'));
          posY = parseInt($('#soucoupe').css('top'));
          if ((posY > 20) && (posX < 470))
            $('#soucoupe').css('left', posX+30).css('top', posY-30);
        }
        if (e.which == 35) // Vers le bas et la gauche
        {
          posX = parseInt($('#soucoupe').css('left'));
          posY = parseInt($('#soucoupe').css('top'));
          if ((posX > 20) && (posY < 230))
            $('#soucoupe').css('left', posX-30).css('top', posY+30);
        }
        if (e.which == 34) // Vers le bas et la droite
        {
          posX = parseInt($('#soucoupe').css('left'));
          posY = parseInt($('#soucoupe').css('top'));
          if ((posY < 230) && (posX < 470))
            $('#soucoupe').css('left', posX+30).css('top', posY+30);
        }
      });


    });

$('#activer').on('click', function bis() {

				      $('#soucoupe2').animate({top: '+=300'}, 'slow')
					 .animate({top: '-=300'}, 'slow');
 						 bis();

					  });

$('#desactiver').on('click', function() {
		      $('#soucoupe2').stop(true, true);
			$('#soucoupe2').css({'bottom': '20px'});
			$('#soucoupe2').css({'left': '580px'});
						    });
/*#############################################################################################################################################################*/
/*if ($("#soucoupe").collision("#balle")) {			// GameQuery Extensions
        alert('Game over');
    }*/

/*#############################################################################################################################################################*/
/*var Hits = $("#balle").collision("#soucoupe", { mode: "collision", obstacleData: "topOData" });

if (Hits.data("topOData") == true)
        {
            alert('Game over')					// Jquery Collission Extension
        }*/
/*#############################################################################################################################################################*/

/*#############################################################################################################################################################*/
function collides(a,  b) {
          return a.x < b.x + b.width &&
            a.x + a.width > b.x &&
            a.y < b.y + b.height &&
            a.y + a.height > b.y;
        }								// Mon propre essaie tirer d'un code jquery d'un jeu preexistant (Space Freak

function handleCollision () {

        if(collides(balle, soucoupe)) {
			alert ("Game over");}


}

/*#############################################################################################################################################################*/
  </script>
</body>
</html>