title: How to stop sprite on collision (Keep it from walking on walls)?
body: <p>Thanks to ellertsmari, I am able to get collision detection.
  <a href="https://stackoverflow.com/questions/55625639/adding-collision-to-rectangles-so-sprite-wont-go-through">Adding Collision to Rectangles so Sprite Wont Go Through?</a></p>
  
  <p>Just now I want to get my sprite to stop on collision so he won't be walking on walls. </p>
  
  <p>Here's my link to the game:
  <a href="https://yewtreedesign.github.io/441_HW/HW11/index.html" rel="nofollow noreferrer">https://yewtreedesign.github.io/441_HW/HW11/index.html</a></p>
  
  <p>Here's the source code that helped me to use sprites.
  <a href="https://dev.to/martyhimmel/moving-a-sprite-sheet-character-with-javascript-3adg" rel="nofollow noreferrer">https://dev.to/martyhimmel/moving-a-sprite-sheet-character-with-javascript-3adg</a></p>
  
  <p>so I figure that :</p>
  
  <p><code>positionX + deltaX &gt; 0</code>  (checks for left edge collision.)</p>
  
  <p><code>positionX + SCALED_WIDTH + deltaX &lt; canvas.width</code> (checks for right edge collision.)</p>
  
  <p><code>positionY + deltaY &gt; 0</code> (checks for top edge collision.)</p>
  
  <p><code>positionY + SCALED_HEIGHT + deltaY &lt; canvas.height</code> (checks for bottom edge collision.)</p>
  
  <p>I've tried using the guide of how collision is detected on the sprite.
  I have accomplished getting the collision detection on the rectangles.</p>
  
  <p>I've tried to add <code>walls.x</code>, <code>walls.y</code>, <code>walls.width</code>, and <code>walls.height</code> within the code where it prevents the sprite from going out of boundaries. My sprite still gets stuck on his starting point. I am not sure what I need to do. I am very new at this. I know instead of <code>canvas.height/canvas.width</code>. I should use <code>walls.height/walls.width</code>for the walls.  </p>
  
  <pre><code>
  const SCALE = 1;
  const WIDTH = 18;
  const HEIGHT = 31;
  const SCALED_WIDTH = SCALE * WIDTH;
  const SCALED_HEIGHT = SCALE * HEIGHT;
  const CYCLE_LOOP = [0, 1, 0, 2];
  const FACING_DOWN = 0;
  const FACING_UP = 1;
  const FACING_LEFT = 2;
  const FACING_RIGHT = 3;
  const FRAME_LIMIT = 12;
  const MOVEMENT_SPEED = 1;
  let canvas = document.querySelector('canvas');
  let ctx = canvas.getContext('2d');
  let keyPresses = {};
  let currentDirection = FACING_DOWN;
  let currentLoopIndex = 0;
  let frameCount = 0;
  let positionX = 0;
  let positionY = 0;
  let img = new Image();
  let shiba = new Image();
  let rays = new Image();
  let doritos = new Image();
  let walls=     [{"id": "wall1", "x": 105.3, "y": -1,    "width": 14.1, "height": 73.5},
                  {"id": "wall2", "x": 366.5, "y": -1,    "width": 14.1, "height": 73.5},
                  {"id": "wall3", "x": 367,   "y": 173.2, "width": 120,  "height": 14.1},
                  {"id": "wall4", "x": -1,    "y": 173.2, "width": 120,  "height": 14.1},
                  {"id": "wall5", "x": 105.3, "y": 267.5, "width": 14.1, "height": 73.5},
                  {"id": "wall6", "x": 366.5, "y": 267.5, "width": 14.1, "height": 73.5}
                ];
                function drawWalls(){
                  for(var i=0; i&lt; walls.length; i++){
                    ctx.fillStyle="white";
                    ctx.fillRect(walls[i].x, walls[i].y, walls[i].width,walls[i].height);
                  }
              }
              function collidingWith(walls){
                console.log("you are colliding with:", walls.id);
  
  }
  window.addEventListener('keydown', keyDownListener);
  function keyDownListener(event) {
      keyPresses[event.key] = true;
  }
  window.addEventListener('keyup', keyUpListener);
  function keyUpListener(event) {
      keyPresses[event.key] = false;
  }
  function loadImage() {
      img.src = 'atlus/mainsprite.png';
    shiba.src = 'image/shiba.gif';
    rays.src='image/shades.png';
    doritos.src='image/dorit.png';
    img.onload = function() {
      window.requestAnimationFrame(gameLoop);
    };
  }
  function drawFrame(frameX, frameY, canvasX, canvasY) {
    ctx.beginPath();
    ctx.drawImage(shiba, 225,20);
    ctx.closePath();
    ctx.beginPath();
    ctx.drawImage(rays, 400,20);
    ctx.drawImage(doritos, 420,250);
    ctx.drawImage(img,
                  frameX * WIDTH, frameY * HEIGHT, WIDTH, HEIGHT,
                  canvasX, canvasY, SCALED_WIDTH, SCALED_HEIGHT);
    ctx.closePath();
  }
  
  loadImage();
  function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawWalls();
  
    let hasMoved = false;
    if (keyPresses.ArrowUp) {
      moveCharacter(0, -MOVEMENT_SPEED, FACING_UP);
      hasMoved = true;
    } else if (keyPresses.ArrowDown) {
      moveCharacter(0, MOVEMENT_SPEED, FACING_DOWN);
      hasMoved = true;
    }
    if (keyPresses.ArrowLeft) {
      moveCharacter(-MOVEMENT_SPEED, 0, FACING_LEFT);
      hasMoved = true;
    } else if (keyPresses.ArrowRight) {
      moveCharacter(MOVEMENT_SPEED, 0, FACING_RIGHT);
      hasMoved = true;
    }
    if (hasMoved) {
      frameCount++;
      if (frameCount &gt;= FRAME_LIMIT) {
        frameCount = 0;
        currentLoopIndex++;
        if (currentLoopIndex &gt;= CYCLE_LOOP.length) {
          currentLoopIndex = 0;
        }
      }
    }
    if (!hasMoved) {
      currentLoopIndex = 0;
    }
    drawFrame(CYCLE_LOOP[currentLoopIndex], currentDirection, positionX, positionY);
    window.requestAnimationFrame(gameLoop);
  }
  function moveCharacter(deltaX, deltaY, direction) {
    walls.forEach(walls=&gt;{
    if( positionX + deltaX + SCALED_WIDTH &gt; walls.x &amp;&amp; positionX + deltaX &lt; walls.x + walls.width
      &amp;&amp; positionY + deltaY + SCALED_HEIGHT &gt; walls.y &amp;&amp; positionY + deltaY &lt; walls.y +walls.height
    ){
      collidingWith(walls);
    }
  })
  
  if (positionX + deltaX &gt; 0 &amp;&amp; positionX + SCALED_WIDTH + deltaX &lt; canvas.width) {positionX += deltaX;}
  if (positionY + deltaY &gt; 0 &amp;&amp; positionY + SCALED_HEIGHT + deltaY &lt; canvas.height) {positionY += deltaY;}
    currentDirection = direction;
  }
  
  </code></pre>
  
  <p>Everything is showing up as it should. In the console, once you collided with one of the walls, it will show you have collided with wall[i].
  Which is great. 
  I just need help so my sprite won't be walking on walls.</p>
  
  <p>UPDATE:</p>
  
  <p>The sprite does stop when colliding with the wall... Problem is that teleports back to it's begining position...
  <a href="https://jsfiddle.net/YewtreeStudio/b1v9Loey/4/" rel="nofollow noreferrer">https://jsfiddle.net/YewtreeStudio/b1v9Loey/4/</a></p>