Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
<head>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
  
        #myCanvas {
            border: 1px solid #9C9898;
        }
    </style>
    <script>
        var targetX = 500, targetY = 200, targetRadius = 50;
        var playerX=100, playerY=100;
      var obstacles  = new Array();
      
      obstacles[0] = {type:'rect', x:100, y:100, l:20, h:20, vx:3, vy:10}
      obstacles[1] = {type:'rect', x:350, y:200, l:100, h:100, vx:1, vy:0}
      obstacles[2] = {type:'rect', x:0, y:0, l:100, h:30, vx:10, vy:0}
      obstacles[3] = {type:'cercle', x:200, y:100, rayon:30, vx:1, vy:0}
      
      // generic way to set animation up
      window.requestAnimFrame = (function(callback){
          return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function(callback){
              window.setTimeout(callback, 1000 / 60);
          };
      })();
  
      
        function writeMessage(canvas, message) {
            var context = canvas.getContext('2d');
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.font = '18pt Calibri';
            context.fillStyle = 'black';
            context.fillText(message, 10, 25);
        }
​
        function getMousePos(canvas, evt) {
            // get canvas position
            var obj = canvas;
            var top = 0;
            var left = 0;
            while (obj && obj.tagName != 'BODY') {
                top += obj.offsetTop;
                left += obj.offsetLeft;
                obj = obj.offsetParent;
            }
​
            // return relative mouse position
            var mouseX = evt.clientX - left + window.pageXOffset;
            var mouseY = evt.clientY - top + window.pageYOffset;
            return {
                x:mouseX,
                y:mouseY
            };
        }
      
      function drawObstacles(canvas, context) {
​
        for(i = 0; i < obstacles.length; i++) {
           switch(obstacles[i].type) {
             case 'rect' :
               
                //rebond 
              obstacles[i].x += obstacles[i].vx; 
              if (obstacles[i].x <= 0) 
                obstacles[i].vx = -obstacles[0].vx; 
              
              if ((obstacles[i].x+obstacles[i].l) > 578) 
                obstacles[i].vx = -obstacles[i].vx; 
              
              obstacles[i].y += obstacles[i].vy; 
              if (obstacles[i].y <= 0) 
                obstacles[i].vy = -obstacles[i].vy; 
              
              if ((obstacles[i].y+obstacles[i].h) > 400) 
                obstacles[i].vy = -obstacles[i].vy; 
          
                    context.fillRect(obstacles[i].x,obstacles[i].y+10, obstacles[i].l, obstacles[i].h);
                    
          break;
          case 'cercle' :
              context.beginPath();
              context.arc(obstacles[i].x, obstacles[i].y, obstacles[i].rayon, 0, 2 * Math.PI, false);
              context.closePath();
               // sauver contexte courant
               context.save();
               context.fillStyle = 'red';
               context.fill();
               context.lineWidth= 10;
                context.strokeStyle = 'blue';
               context.stroke();
               context.restore();
          break;
        }
        
        
        }
       
        
      }
      
    
      
      function drawPlayer(canvas, context, x, y) {
        context.fillRect(x,y, 20,20);
      }
      
      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;
      }
      
      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); 
      }
      
      function drawTarget(canvas, context, x, y, r, fillColor) {
               
                context.save();
                context.beginPath();
                context.arc(x, y, r, 0, 2*Math.PI, false);
                context.fillStyle=fillColor;
                context.fill();
                context.lineWidth = 5;
                context.strokeStyle = "black";
             
                context.stroke();
                context.restore();
      }
​
        window.onload = function () {
            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');
            var started = false, previousMousePos;
            var mousePos;
            var vitesseX=0; vitesseY = 0;
          
            function checkCollisionsWithObstacles() {
              var touche = false;
               for(i = 0; i < obstacles.length; i++) {
                 switch(obstacles[i].type) {
                   
                        
                   case 'rect':
                      touche = rectsOverlap(playerX, playerY, 20, 20, obstacles[i].x, obstacles[i].y, obstacles[i].l, obstacles[i].h);
                      break;
                   case 'cercle':
                      touche = circRectsOverlap(playerX, playerY, 20, 20, obstacles[i].x, obstacles[i].y, obstacles[i].rayon);
                      break;                     
                   }
                   if(touche) {
                      context.fillStyle = 'red';
                      vitesseX = 2;
                      vitesseY = 2;
                      return;
                  } else { 
                    context.fillStyle ='black';
                  }
               }  // for
                                  
            }
          
            function checkArrowKeysUp(e){
              var arrs= [], key= window.event? event.keyCode: e.keyCode;
              arrs[37]= 'left';
              arrs[38]= 'up';
              arrs[39]= 'right';
              arrs[40]= 'down';
              if(arrs[key]) console.log(arrs[key]);
              
              if(arrs[key] == 'left') {
                vitesseX= 0;
              } 
              if(arrs[key] == 'right') {
                 vitesseX=0;
              }
              if(arrs[key] == 'up') {
                 vitesseY=0;
              }
              if(arrs[key] == 'down') {
                 vitesseY=0;
              }
           }
          
            function checkArrowKeysDown(e){
              var arrs= [], key= window.event? event.keyCode: e.keyCode;
              arrs[37]= 'left';
              arrs[38]= 'up';
              arrs[39]= 'right';
              arrs[40]= 'down';
              if(arrs[key]) console.log(arrs[key]);
              
              if(arrs[key] == 'left') {
                vitesseX= -4;
              } 
              if(arrs[key] == 'right') {
                 vitesseX=4;
              }
              if(arrs[key] == 'up') {
                 vitesseY=-4;
              }
              if(arrs[key] == 'down') {
                 vitesseY=4;
              }
           }
           document.onkeydown=checkArrowKeysDown;
          document.onkeyup=checkArrowKeysUp;
          
          function mainLoop() {
            // clear canvas, draw obstacles
             context.clearRect(0,0, canvas.width, canvas.height);
             drawObstacles(canvas, context);
            
            if(mousePos != undefined) {
                 drawPlayer(canvas, context, playerX, playerY);
                 
              // Move the player
              playerX += vitesseX; playerY +=vitesseY;
              
               // Collision with rectangular obstacles
              
                 checkCollisionsWithObstacles(playerX, playerY);
              
              if(circRectsOverlap(playerX, playerY, 20, 20, 
                                      targetX, targetY, targetRadius)) {                                         
                      drawTarget(canvas, context, targetX, targetY, targetRadius, 'yellow');                    
                  } else {                    
                     drawTarget(canvas, context, targetX, targetY, targetRadius, "#8ED6FF");
                  }
            }
                 
            // call mainloop 60 times/s
            requestAnimFrame(function(){
                mainLoop();
            });
          }
          
         
            canvas.addEventListener('mousemove', function (evt) {
              
                mousePos = getMousePos(canvas, evt);
              playerX = mousePos.x; playerY = mousePos.y;
              
            }, false);
           
          mainLoop();
        };
    </script>
</head>
<body onmousedown="return false;">
<canvas id="myCanvas" width="578" height="400">
</canvas>
</body>
</html>
Output

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

Dismiss x
public
Bin info
micbuffapro
0viewers