Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <h1>Hello</H1>
  <canvas width=300 height=300 id="myCanvas"></canvas>
  
  
<video width=200 id="vid1" autoplay loop>
    <source  src="http://www.pablopixel.com/HTML5/assignment2/video/sky.mp4" type="video/mp4">
</video>
  
     <video width=200 id="skin" autoplay loop controls>
        <source src="http://www.pablopixel.com/HTML5/assignment2/video/skin.mp4" type="video/mp4">
    </video>
</body>
</html>
 
#myCanvas {
  border:1px solid black;
  background-color:pink
}
video {
  display:none;
}
 
var canvas, ctx;
var largeurCanvas, hauteurCanvas;
var video, video2;
var CALME = 0, EN_COLERE = 1;
var monstre = {
  x:10, 
  y:10,
  largeur: 100,
  hauteur:100,
  etat : CALME,
  vitesseX : 0,
  vitesseY : 0,
  vitesseMax: 5
};
// état des touches qu'on surveille, de la souris, etc.
var inputStates = {};
window.addEventListener('load', init);
function init() {
  console.log("page chargée");
  
  // On récupère un pointeur sur la vidéo
  video = document.querySelector("#vid1");
  video2 = document.querySelector("#skin");
  
  // On va récupérer un pointeur sur l'élément canvas
  canvas = document.querySelector("#myCanvas");
  ctx = canvas.getContext('2d');
  largeurCanvas = canvas.width;
  hauteurCanvas = canvas.height;
  
  // Pour le compteur d'images / s
  fpsContainer = document.createElement('div');
  fpsContainer.id="toto";
document.body.appendChild(fpsContainer); 
  
  // Ici on définit des écouteurs pour le clavier et la souris (manette jeu etc.)
  definitLesEcouteurs();
  
  // maintenant on peut dessiner !
  animeMonstre();
}
function definitLesEcouteurs() {
  // Ecouteur de clavier pour les touches enfoncées
  document.addEventListener('keydown', traiteToucheEnfoncee);
  // Pour les touches relachées
  document.addEventListener('keyup', traiteToucheRelachee);
  
  // La souris
  canvas.addEventListener('mousedown', traiteMouseDown);
  canvas.addEventListener('mouseup', traiteMouseUp);
  canvas.addEventListener('mousemove', traiteMouseMove);
}
function traiteMouseDown(evt) {
  console.log("souris cliquée bouton No : " + evt.button);
  inputStates.mouseDown = true;
  inputStates.button = evt.button;
  
}
function traiteMouseUp(evt) {
  console.log("souris bouton relachee");
    inputStates.mouseDown = false;
}
function traiteMouseMove(evt) {
  // On v devoir enlever la valeur de la position du 
  // canvas dans la page.
  var rect = canvas.getBoundingClientRect();
  inputStates.mouseX = evt.clientX - rect.left;
  inputStates.mouseY = evt.clientY - rect.top;
  
  //console.log(" du canvas = " + rect.top);
  //console.log("mouse move x = " + inputStates.mouseX + " y = " + inputStates.mouseY);
}
function traiteToucheEnfoncee(evt) {
  console.log("touche enfoncée code = " + evt.keyCode);
  
  switch(evt.keyCode) {
    case 39:
      // flèche droite
      inputStates.droite = true;
      break;
    case 37:
      // flèche gauche
      inputStates.gauche = true;
      break;
    case 38:
      // flèche haut
      inputStates.haut = true;
      break;
    case 40:
      // flèche bas
      inputStates.bas = true;
      break;
    case 32:
      // space
      inputStates.space = true;
      break;
  }
}
function traiteToucheRelachee(evt) {
    console.log("touche relachee code = " + evt.keyCode);
  switch(evt.keyCode) {
    case 39:
      // flèche droite
      inputStates.droite = false;
      break;
    case 37:
      // flèche gauche
      inputStates.gauche = false;
      break;
    case 38:
      // flèche haut
      inputStates.haut = false;
      break;
    case 40:
      // flèche bas
      inputStates.bas = false;
      break;
    case 32:
      // space
      inputStates.space = false;
      break;
  }
}
function animeMonstre(time) {
  // 0 - affichage du nombre d'images / s
  measureFPS(time);
  
  // 1 On efface le canvas
  //ctx.clearRect(0, 0, largeurCanvas, hauteurCanvas);
  // Pour du blur à la place
  //ctx.fillStyle='rgba(0, 255, 255, 0.1)'
  // ctx.fillRect(0, 0, largeurCanvas, hauteurCanvas);
  ctx.clearRect(0, 0, largeurCanvas, hauteurCanvas);
  
  
  // 2 On dessine 
  drawMonstre(monstre.x, monstre.y);
  
  // 2 et demie : on regarde l'état des entrées (clavier, etc)
  // pour déplacer le monstre...
  deplaceMonstre();
  
  // 3 On revien au 1, mais à 60 images/s,
  // on demande au browser de rappeler cette 
  // fonction
  requestAnimationFrame(animeMonstre);
}
function deplaceMonstre() {
  // on regarde l'état du clavier
  monstre.vitesseX = monstre.vitesseY = 0;
  
  if(inputStates.droite) {
    monstre.vitesseX = monstre.vitesseMax;
  }
  if(inputStates.gauche) {
    monstre.vitesseX = -monstre.vitesseMax;
  }
    if(inputStates.haut) {
    monstre.vitesseY = -monstre.vitesseMax;
  }
    if(inputStates.bas) {
    monstre.vitesseY = monstre.vitesseMax;
  }
  if(inputStates.space) {
    ctx.fillText("SPACE APPUYEE",10, 10);
  }
  if(inputStates.mouseDown) {
    monstre.etat = EN_COLERE;
    monstre.x = inputStates.mouseX-monstre.largeur/2;
    monstre.y = inputStates.mouseY-monstre.hauteur/2;
  } else {
    monstre.etat = CALME;
  }
  
  monstre.x += monstre.vitesseX;
  monstre.y += monstre.vitesseY;
}
function drawMonstre(x, y) {
  ctx.save();
  
  ctx.translate(x, y);
  if(monstre.etat == CALME)
      ctx.fillStyle = 'green';
  if(monstre.etat == EN_COLERE)
      ctx.fillStyle = 'red';
  
  //ctx.drawImage(video, 0, 0, monstre.largeur, monstre.hauteur);
  ctx.fillRect(0, 0, monstre.largeur, monstre.hauteur);
  ctx.fillStyle = 'yellow';
  ctx.fillRect(20, 20, 10, 10);
  ctx.fillRect(70, 20, 10, 10);
  
  //ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
  //ctx.fillRect(80, 80, 100, 120);
  drawNez();
  
  ctx.restore();
}
function drawNez() {
  ctx.save();
  //ctx.translate(20, 0);
  ctx.fillStyle= 'blue';
  ctx.fillRect(45, 50, 5, 30);
  
  if(monstre.etat == EN_COLERE)
    drawCercleVideo(48, 80, 30, 'green', true);
  if(monstre.etat == CALME)
    drawCercleVideo(48, 80, 10, 'green', true);
  
  
  ctx.restore();
}
function drawCercle(cx, cy, r, couleur, rempli) {
  ctx.save();
  
  // on démarre un nouveau chemin/path
  ctx.beginPath();
  
  ctx.arc(cx, cy, r, 0, 2*Math.PI);
  
  if(rempli) {
    ctx.fillStyle = couleur;
    ctx.fill();
  } else {
    ctx.strokeStyle = couleur;
    ctx.stroke();
  }
  
  ctx.restore();
}
function drawCercleVideo(cx, cy, r, couleur) {
  ctx.save();
  
  // on démarre un nouveau chemin/path
  ctx.beginPath();
  
  ctx.arc(cx, cy, r, 0, 2*Math.PI);
  ctx.clip();
  ctx.drawImage(video, 0, 0, 300, 300);
  ctx.restore();
  /*
  ctx.save();
   ctx.beginPath();
  ctx.arc(cx+100, cy, 20, 0, 2*Math.PI);
  ctx.clip();
  ctx.drawImage(video2, 0, 0, 300, 300);
 */
  ctx.restore();
}
// ------- Pour le compteur d'images/s
    // vars for counting frames/s, used by the measureFPS function
    var frameCount = 0;
    var lastTime;
    var fpsContainer;
    var fps; 
 
    var measureFPS = function(newTime){
 
         // test for the very first invocation
         if(lastTime === undefined) {
           lastTime = newTime; 
           return;
         }
 
        //calculate the difference between last & current frame
        var diffTime = newTime - lastTime; 
 
        if (diffTime >= 1000) {
            fps = frameCount;    
            frameCount = 0;
            lastTime = newTime;
        }
 
        //and display it in an element we appended to the 
        // document in the start() function
       fpsContainer.innerHTML = 'FPS: ' + fps; 
       frameCount++;
    };
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
micbuffapro
0viewers