Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Mon jeu fantastiqeu</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/jeu.js"></script>
</head>
<body>
    <canvas id="myCanvas" width=500 height=400></canvas>
</body>
 
var canvas, ctx, w, h;
var couleur = "red";
window.onload = init;
function init() {
  console.log("page chargée");
  
  canvas = document.querySelector("#myCanvas");
  ctx = canvas.getContext("2d");
  w = canvas.width;
  h = canvas.height;
 
  requestAnimationFrame(mainloop);
  id = setInterval(changeCouleur, 1000); // on appelle la fonction à peu
            // près toutes les secondes
}
var oldTime;
var delta;
var totalTime = 5000; // 5 secondes
function mainloop(time) {
  if(oldTime === undefined)
    oldTime = time;
  // temps écoulé entre deux images
  delta = time - oldTime;
  //console.log("delta = " + delta);
  //console.log(time);
  ctx.clearRect(0, 0, w, h);
  
  ctx.fillStyle = couleur;
  ctx.fillRect(10, 10, 100, 100);
  oldTime = time;
  totalTime -= delta;
  if(totalTime < 0) {
    ctx.fillText("Niveau Suivant", 0, 0);
    totalTime = 5000;
  }
  var temps = (totalTime/1000).toFixed(1);
  ctx.fillText("Temps : " + temps, 10, 10)
  requestAnimationFrame(mainloop);
}
function changeCouleur() {
  if(couleur === "red") {
    couleur = "green";
  } else {
    couleur = "red";
  }
}
Output 300px

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

Dismiss x
public
Bin info
micbuffapro
0viewers