// VARIABLES //

​

var score= 0;

​

​

var coeurs = ["♥", "♥", "♥"];

//

var canvas;

var ctx;

var w, h;

var mousePos = {};

​

var tableauDesCoins = [];

var tableauDesPoliciers = [];

​

​

var soundOn = true ;

​

​

/*MENU PRINCIPAL*/ 

​

// tik sur les choix 

​

 $("#options").mouseenter(function() {

   var tik = $("#tik")[0];

   //si le son est desactiver

   if (soundOn === true){

       tik.play();

   }

 }); 

​

​

// Lancement du jeu

$('#start').click(function() {

  $('#menuPrincipal').hide();

  init();

  $('#myCanvas').show();

});

​

// Menu regle du jeu

$('#rules').click(function() {

  $('#menuRules').show();

});

​

// Menu options

$('#option').click(function() {

  $('#menuOptions').show();

});

​

// Menu meilleurs scores

$('#highScore').click(function() {

  $('#menuScore').show();

  $('#menuPrincipal').stop();

var t = [];

​

for (var a = 0; a < localStorage.length ; a++){

    t.push(localStorage.key(a));

}

t.sort(function(a,b){return b - a;}) ;  

var x = localStorage.getItem(t[1]);

​

for (var i = 0; i < t.length && i < 4; i++){

  $('#list').append(t[i]+"&nbsp; -->&nbsp;" +localStorage.getItem(t[i])+"</br>");

}

​

});

​

​

// Boutton retour au menu principal

$('.retour').click(function() {

   $('#gameOVER').hide();

​

$('#menuRules').hide();

  $('#menuScore').hide();

  $('#menuOptions').hide();

  $('#list').empty();

});

​

// Boutton rejouer au menu principal

$('.rejouer').click(function() {

   $('#gameOVER').hide();

  var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

  ctx.clearRect(0,0,500,500);

​

init();

$('#myCanvas').show();

});

​

// Activer/Desactiver le son menu

$('#sonOn').click(function() {

  soundOn = !soundOn;

  if (soundOn === true ){

    this.style.opacity = "1";

    Play('song');

  }else {

    this.style.opacity = "0.4";

     Stop('song');

​

  }

});

​

// Jouer le son

function Play(objetSon) {

    var son=document.getElementById(objetSon);

    son.play();

}

​

// Stopper le son

function Stop(objetSon) {

    var son=document.getElementById(objetSon);

    son.pause();

}

​

//------------------------------------------------------

​

//

​

​

/* Le joueur  *

 **************/

var player = {

    x:100,

    y:100,

    vitesseX : 0,

    vitesseY: 0,

    taille: 70,

    couleur : "black",

    draw : function(ctx) {

    // sauve tous les états du contexte : couleur,

    // épaisseur du trait, repère...

    ctx.save();

    // On déplace le repère

    ctx.translate(this.x, this.y);

    //ctx.scale(scale, scale);

​

    // Là on peut dessiner !!!!!!

​

    //-- couleur du visage --//

    ctx.fillStyle = 'red';

    var grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);

    grd.addColorStop(0, '#FDE3A7');   

    grd.addColorStop(1, '#004CB3');

    ctx.fillStyle = grd;

    //-- cagoule --//

    ctx.fillRect(0, 0, this.taille, this.taille);

    ctx.fillStyle = player.couleur;

    ctx.fillRect(0, 10, this.taille, this.taille-40);

    //-- yeux --// 

    ctx.beginPath();

    ctx.arc(20, 22,12, 0, Math.PI, false);

    ctx.arc(50, 22, 12, 0, Math.PI, false);

    ctx.closePath();

    ctx.lineWidth = 3;

    ctx.fillStyle = 'white';

    ctx.fill();

    ctx.strokeStyle = '#000';

    ctx.stroke();

    ctx.strokeStyle = "black";

    ctx.arc(50, 23, 3, 0, 2 * Math.PI, false);

    ctx.arc(20, 23, 3, 0, 2 * Math.PI, false);

    ctx.stroke();

​

    //-- Cheveux --//

    for (i=0;i<17;i++){

       ctx.lineWidth = 1;

       ctx.beginPath();

       ctx.moveTo(1+i*4,1);

       ctx.lineTo(5+i*4,10);

       ctx.stroke();

       ctx.closePath();

    }

    //-- poiles --//

    ctx.strokeStyle = "GRAY";

    for (i=0;i<24;i++){

    ctx.strokeRect(0+i*3, 65, 1, 0);

    ctx.strokeRect(0+i*3, 62, 1, 0);

    ctx.strokeRect(1+i*3, 68, 1, 0);

    ctx.strokeRect(1+i*3, 59, 1, 0);

    }

    //-- Bouche --//

    ctx.beginPath();

    ctx.strokeStyle = "BLACK";

    ctx.lineWidth = 2;

    ctx.moveTo(18, 54);

    ctx.lineTo(56, 48);

    ctx.lineWidth = 1;

    ctx.moveTo(48, 54);

    ctx.lineTo(56, 52);

    ctx.stroke();      

    //-- On restaure le contexte --//

    ctx.restore();

  }   

};

​

​

/* Fonction d'initialisation *

 *****************************/

function init() {

  //console.log("page chargee");

  canvas = document.querySelector("#myCanvas");

  w = canvas.width;

  h = canvas.height;

​

  ctx = canvas.getContext('2d');

​

​

   var audio = new Audio('http://www.mp3fil.info/get/327c6578747c323032373836/Tetris_-_Original_tetris_theme.mp3');

        //audio.playbackRate = 1;

audio.play();

  // Creer des coins

  creerPleinDeCoins(10);

  // Creer des policiers

  creerPleinDePoliciers(4);

  creerLesEcouteurs();

​

  requestAnimationFrame(animerLeJeu);

}

​

​

​

/* Animation du jeu *

 ********************/

function animerLeJeu() {

    // On efface le canvas

    ctx.clearRect(0, 0, w, h);

​

    // On dessine les coins

   dessineEtDeplaceToutesLesCoins();

    // dessineEtDeplaceToutLesPoliciers 

    dessineEtDeplaceToutLesPoliciers();

    // On dessine le joueur

    player.draw(ctx);

​

    // on le déplace

    player.x += player.vitesseX;

    player.y += player.vitesseY;

    // test collisions entre les coins et le mur

    //testeCollisionsNBallesMurs();

    // Si le joueur touche un mur il rebondit

    if(player.x+100 > w) player.vitesseX = -player.vitesseX;

    if(player.x < 0) player.vitesseX = -player.vitesseX;

    // On rappelle la fonction d'animation à 60 im/s

    requestAnimationFrame(animerLeJeu);

    // SCORE 

    ctx.fill();

    ctx.fillStyle = "black";

    ctx.font="17px Arvo";

    ctx.fillText("SCORE : "+score,8,18);

  // Niveau de vie

    ctx.fillStyle = "red";

    ctx.font="30px Arvo";

  var pas = 0;

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

    ctx.fillText(coeurs[i],400+pas,25);

    pas +=30;

  }

​

    //ctx.fillText(score,370,25);

​

}

​

/* Les Policiers *

 *************/ 

function dessineEtDeplaceToutLesPoliciers() {

  var tab = tableauDesPoliciers ;

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

        var policierCourant = tableauDesPoliciers[i];

        policierCourant.move();

      if(circRectsOverlap(player.x, player.y, player.taille, player.taille, policierCourant.x, policierCourant.y, 10)) {

          policierCourant.y=  0;

          policierCourant.x =  0;

        console.log("collision");

        coeurs.pop();

        var song = document.getElementById("song");

​

        if(coeurs.length===1){

          song.playbackRate = 1.2;

          song.play();

        }

        else if(coeurs.length===0){

          // Arreter le son

          song.pause();

          song.currentTime = 0;

          gameOver();

        }

      }

//       testCollisionAvecPlayer(policierCourant);

​

​

     testCollisionAvecMurs(policierCourant);

       policierCourant.draw(ctx);  

   }

}

​

​

​

/* Les coins *

 *************/ 

function dessineEtDeplaceToutesLesCoins() {

  var tab = tableauDesCoins ;

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

        var coinCourante = tableauDesCoins[i];

        coinCourante.move();

      if(circRectsOverlap(player.x, player.y, player.taille, player.taille, coinCourante.x, coinCourante.y, 10)) {

        console.log("collision");

        //var audio = new Audio('http://dl.dropbox.com/u/26141789/canvas/pingpong/Metal%20Cling%20-%20Hit.mp3');

       // audio.playbackRate = 4;

//audio.play();

        delete( coinCourante.x );

        delete( coinCourante.y );

       // tableauDesCoins.pop();

        score ++ ;

        var p = score % 10 ;

        if ( p === 0){

          coinCourante.y=  40;

          coinCourante.x =  0;

          //dessineEtDeplaceToutesLesCoins();

          creerPleinDeCoins(10);

          //creerPleinDePoliciers(10);

         }

      }

        testCollisionAvecMurs(coinCourante);

        coinCourante.draw(ctx);

   }

}

​

// Policier

function Policier(x, y, rayon, vitesse, angle, couleur) {

    this.x = x;

    this.y = y;

    this.rayon = rayon;

    this.vitesse = vitesse;

    this.angle = angle;

    this.couleur = couleur;

    this.dollar = '$';

​

    this.draw = function(ctx) {

    //ctx.save();

    ctx.beginPath();

    ctx.fillStyle = "black";

​

    ctx.fill();

    ctx.arc(this.x, this.y, this.rayon, 0, 2*Math.PI);

  ctx.save();

    //

      //ctx

    ctx.fill();

    ctx.fillStyle = "white";

    ctx.arc(this.x, this.y, 10, 0, 2*Math.PI);

​

    ctx.font="10px tahoma ";

    ctx.fillText("Bomb",this.x-5 ,this.y);

    ctx.restore();

    };

    this.move = function() {

       var dx = this.vitesse * Math.cos(this.angle);

       var dy = this.vitesse * Math.sin(this.angle);

       this.x += dx;

       this.y += dy;

    };

}

​

​

// Coin

function Coin(x, y, rayon, vitesse, angle, couleur) {

    this.x = x;

    this.y = y;

    this.rayon = rayon;

    this.vitesse = vitesse;

    this.angle = angle;

    this.couleur = couleur;

    this.dollar = '$';

    this.draw = function(ctx) {

    //ctx.save();

    ctx.beginPath();

​

    ctx.fillStyle = "gold";

​

    ctx.fill();

​

    ctx.arc(this.x, this.y, this.rayon, 0, 2*Math.PI);

    //

    ctx.fill();

    ctx.fillStyle = "black";

    ctx.font="20px tahoma ";

    ctx.fillText(this.dollar,this.x-5 ,this.y+5);

    ctx.restore();

    };

    this.move = function() {

       var dx = this.vitesse * Math.cos(this.angle);

       var dy = this.vitesse * Math.sin(this.angle);

       this.x += dx;

       this.y += dy;

    };

}

​

​

// Créer plein de policiers

function creerPleinDePoliciers(nbCoins) {

    for(var i=0; i < nbCoins; i++) {

​

        var x = Math.random() * w;

        var y = Math.random() * h;

        //var taille = 5 + Math.random()*30;

        var v = 1+Math.random() * 4;

        var angle = Math.random() * Math.PI * 2;

        var r = Math.round(Math.random() * 255);

        var g = Math.round(Math.random() * 255);

        var b = Math.round(Math.random() * 255);

        //var couleur = "rgb(" + r + ',' + g + "," + b + ")";

        tableauDesPoliciers[i] = new Policier(x, y,30, 2, angle, "red");

    }  

}

​

// Créer plein de coins

function creerPleinDeCoins(nbCoins) {

    for(var i=0; i < nbCoins; i++) {

​

        var x = Math.random() * w;

        var y = Math.random() * h;

        //var taille = 5 + Math.random()*30;

        var v = 1+Math.random() * 4;

        var angle = Math.random() * Math.PI * 2;

        var r = Math.round(Math.random() * 255);

        var g = Math.round(Math.random() * 255);

        var b = Math.round(Math.random() * 255);

        //var couleur = "rgb(" + r + ',' + g + "," + b + ")";

        tableauDesCoins[i] = new Coin(x, y, 15, 3, angle, "gold");

    }  

​

​

}

function creerLesEcouteurs() {

    // 1er param = le nom de l'évenement

  // 2ème param la fonction écouteur, on appelle cela un callback,

  // 3ème param (optionnel), si false = ne pas propager l'evenement

  document.addEventListener('keydown', traiteToucheEnfoncee, false);

  document.addEventListener('keyup', traiteToucheRelachee, false);

  canvas.addEventListener('mousedown', traiteBoutonSourisEnfonce, false);

  canvas.addEventListener('mouseup', traiteBoutonSourisRelache, false);

  canvas.addEventListener('mousemove', traiteSourisDeplacee, false);

}

function traiteBoutonSourisEnfonce(evt) {

  console.log("bouton souris enfonce no " + evt.button);

}

​

function traiteBoutonSourisRelache(evt) {

  console.log("bouton souris relache no " + evt.button);

}

​

function traiteSourisDeplacee(evt) {

  var rect = canvas.getBoundingClientRect();

  //console.log("souris deplacee x= " + (evt.clientX - rect.left) + " y =" + (evt.clientY - rect.top));

  mousePos.x = evt.clientX - rect.left;

  mousePos.y = evt.clientY - rect.top;

  player.x = mousePos.x;

  player.y = mousePos.y;

​

}

​

function traiteToucheEnfoncee(evt) {

  console.log("touche enfoncee code = " + evt.keyCode);

  if(evt.keyCode === 39) {

    // on va déplacer le joueur à droite

    player.vitesseX = 1;

  }

    if(evt.keyCode === 37) {

    // on va déplacer le joueur à gauche

    player.vitesseX = -1;

  }

  if(evt.keyCode === 40) {

    // on va déplacer le joueur vers le bas

    player.vitesseY = 1;

  }

  if(evt.keyCode === 38) {

    // on va déplacer le joueur vers le haut

    player.vitesseY = -1;

  }

}

​

function traiteToucheRelachee(evt) {

  console.log("touche relachee code = " + evt.keyCode);

  player.vitesseX = 0;

  player.vitesseY = 0;

}

​

function traiteClick(evt) {

  console.log("click");

}

​

//------------

function testCollisionAvecPlayer(ball) {

    // left

    if (ball.x < ball.rayon) {

        ball.x = ball.rayon;

        ball.angle = -ball.angle + Math.PI;     

    } 

    // right

    if (ball.x > w - (ball.rayon)) {

        ball.x = w - (ball.rayon);

        ball.angle = -ball.angle + Math.PI; 

    }     

    // up

    if (ball.y < ball.rayon) {

        ball.y = ball.rayon;

        ball.angle = -ball.angle;     

    }     

    // down

    if (ball.y > h - (ball.rayon)) {

        ball.y = h - (ball.rayon);

        ball.angle =-ball.angle; 

    } 

}

​

//

function testCollisionAvecMurs(ball) {

    // left

    if (ball.x < ball.rayon) {

        ball.x = ball.rayon;

        ball.angle = -ball.angle + Math.PI;     

    } 

    // right

    if (ball.x > w - (ball.rayon)) {

        ball.x = w - (ball.rayon);

        ball.angle = -ball.angle + Math.PI; 

    }     

    // up

    if (ball.y < ball.rayon) {

        ball.y = ball.rayon;

        ball.angle = -ball.angle;     

    }     

    // down

    if (ball.y > h - (ball.rayon)) {

        ball.y = h - (ball.rayon);

        ball.angle =-ball.angle; 

    } 

}

// COLLISIONS CERCLE CERCLE

function circleCollide(x1, y1, r1, x2, y2, r2) {

    var dx = x1 - x2;

    var dy = y1 - y2;

    return ((dx * dx + dy * dy) < (r1 + r2)*(r1+r2));  

}

// COLLISIONS RECTANGE - RECTANGLE ET RECTANGLE-CERCLE

// Collisions between rectangle

function rectsOverlap(x0, y0, w0, h0, x2, y2, w2, h2) {

    if ((x0 > (x2 + w2)) || ((x0 + w0) < x2)) 

        return false;

    if ((y0 > (y2 + h2)) || ((y0 + h0) < y2))

        return false;

    return true;

}

​

// Collisions between rectangle and circle

function circRectsOverlap(x0, y0, w0, h0, cx, cy, r) {

    var testX=cx; 

    var testY=cy; 

    if (testX < x0) { 

      testX=x0 ;

    }

    if (testX > (x0+w0)){

      testX=(x0+w0); 

    } 

    if (testY < y0)  {

      testY=y0; 

    }

    if (testY > (y0+h0)) {

      testY=(y0+h0);

    } 

    return (((cx-testX)*(cx-testX)+(cy-testY)*(cy-testY))<r*r); 

}

​

// GAME OVER

​

function gameOver(){

    $('#myCanvas').hide();

​

    $('#gameOVER').show();

 coeurs.push("♥");

 coeurs.push("♥");

 coeurs.push("♥");

   /* if (typeof (Storage) !== "undefined") {

    var t = [];

​

    if (localStorage.length !==0 ){

    for (var a = 0; a < localStorage.length ; a++){

    t.push(localStorage.key(a));

    var max = Math.max.apply(Math, t);

    alert(max);

    }

   }

        // SI LE TABLEAU NEST PAS VIDE

​

    var monScore = score;

    score =0;

​

    //if (!localStorage.BestScore) {

  //  }

    //var maxScore = localStorage.BestScore;

    $('.OK').click(function() {

    //var input = document.getElementById("Nom");

  // localStorage.setItem( monScore,input.value);

       $('#gameOVER').show();

    });

​

}*/

 // newScore ();

}

​

// NOUVEAU SCORE

function newScore (){

  if (localStorage.length !==0 ){

    localStorage.setItem( score,input.value);

    alert("oui");

  $('#menuNewScore').show();

  $('.OK').click(function() {

    var input = document.getElementById("Nom");

    localStorage.setItem(score,input.value);

  });

  }

}

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​