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 fantastique</title>
  
</head>
<body>
    <canvas id="myCanvas" width=500 height=400></canvas>
</body>
 
#myCanvas {
    border:1px solid black;
}
 
var canvas, ctx, w, h;
var couleur = "red";
var mousePos = {};
var monstre = {
  x:100,
  y:100,
  angle:0,
  speed:3,
  width:100,
  height:100
};
window.onload = init;
function init() {
  console.log("page chargée");
  
  canvas = document.querySelector("#myCanvas");
  ctx = canvas.getContext("2d");
  w = canvas.width;
  h = canvas.height;
  
  canvas.addEventListener("mousemove", traiteSourisDeplacee, false);
    canvas.addEventListener("mousedown", traiteSourisAppuyee, false);
   canvas.addEventListener("mouseup", traiteSourisRelachee, false);
  
 
  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);
  
  // On calcule l'angle
  var dy = monstre.y - mousePos.y;
  var dx = monstre.x - mousePos.x;
  monstre.angle = Math.atan2(dy, dx) + Math.PI/2;
  drawMonstre();
  
   
  if(monstre.angle) {
     var dist = distance(monstre.x, monstre.y, mousePos.x, mousePos.y);
    if(dist > 10)
       deplaceMonstre();
  }
  
  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";
  }
}
var angle = 0;
function deplaceMonstre() {
  
  var dx = monstre.speed*-Math.sin(monstre.angle);
  var dy = monstre.speed*Math.cos(-monstre.angle);
    
      monstre.x += dx;
      monstre.y += dy;
  
}
function distance(x1, y1, x2, y2) {
  return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
}
function drawMonstre() {
  ctx.save();
  
  ctx.translate(monstre.x, monstre.y);
  ctx.rotate(monstre.angle);
  //ctx.scale(0.5, 0.5);
  //monstre.angle+=0.1;
  ctx.translate(-monstre.width/2, -monstre.height/2);
  
  
  ctx.fillStyle = couleur;
  ctx.fillRect(0, 0, monstre.width, monstre.height);
  // yeux
  ctx.fillStyle = "black";
  ctx.fillRect(20, 20, 15, 15);
  ctx.fillRect(60, 20, 15, 15);
  // nez
  ctx.fillRect(45, 50, 5, 30);
  ctx.restore();
}
// ---- ECOUTEURS SOURIS
//---------------------
function traiteSourisDeplacee(evt) {
  var rect = canvas.getBoundingClientRect();
   mousePos.x = evt.clientX - rect.left;
  mousePos.y = evt.clientY - rect.top;
  
}
function traiteSourisAppuyee(evt) {
  console.log("souris appuyee");
}
function traiteSourisRelachee(evt) {
  console.log("souris relachee");
}
Output 300px

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

Dismiss x
public
Bin info
micbuffapro
0viewers