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>
  <canvas width=300 height=300 id="myCanvas"></canvas>
</body>
</html>
 
#myCanvas {
  border:1px solid black;
  background-color:pink
}
 
var canvas, ctx;
var largeurCanvas, hauteurCanvas;
var monstre = {
  x:10, 
  y:10,
  largeur: 100,
  hauteur:100,
  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 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);
}
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);
  }
  monstre.x += monstre.vitesseX;
  monstre.y += monstre.vitesseY;
}
function drawMonstre(x, y) {
  ctx.save();
  
  ctx.translate(x, y);
  ctx.fillStyle = 'red';
  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);
  drawCercle(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();
}
// ------- 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