You may have already noticed that the key presses in the snippet actually make the window scroll. That's because you haven't prevented the default behavior, which can easily do if you add a preventDefault() for the keys that you handle:

  onkeydown=e=>{
      //... the switch code

      if (e.keyCode >= 37 && e.keyCode <= 40){
          e.preventDefault();
      }
  }

The arrayMatch function:

  let arrayMatch=(array,item)=>{
      for(let x of array) if(x.x==item.x&&x.y==item.y) return true;
  }

Can be simplified using Array.prototype.some():

  const arrayMatch=(array,item)=> array.some(x => x.x==item.x&&x.y==item.y);

Which has a subtle benefit of returning false when it doesn't matching anything instead of returning undefined.

The move switch has an assignment that you can simplify for all cases, this one:

  switch(snake.dir.current){
      case "up":
          ...
          snake.dir.pre="up"; // <--
          break;
      case "down":
          ...     
          snake.dir.pre="down"; // <--
          break;
      case "left":
          ...
          snake.dir.pre="left"; // <--
          break;
      case "right":
          ... 
          snake.dir.pre="right"; // <--
          break;
      }

Since the new value is always equal to the switched value, you can take the assignment of the switch and after it do:

  snake.dir.pre = snake.dir.current;

Also note that while your indentation is mostly consistent, the closing brace for this switch is mispositioned.

getBetweenInt treats both min and max as floats by ceiling and flooring them:

  min = Math.ceil(min);
  max = Math.floor(max);

But the values you pass in come from canvas.offset.x, canvas.offset.y, canvas.width and canvas.height which are always integer values. So there is no need to do that, you can simply use them directly.

Also the name is a bit odd for me, and i would rename it to getIntBetween.

You may have already noticed that the key presses in the snippet actually make the window scroll. That's because you haven't prevented the default behavior, which can easily do if you add a preventDefault() for the keys that you handle:

  onkeydown=e=>{
      //... the switch code

      if (e.keyCode >= 37 && e.keyCode <= 40){
          e.preventDefault();
      }
  }

The arrayMatch function:

  let arrayMatch=(array,item)=>{
      for(let x of array) if(x.x==item.x&&x.y==item.y) return true;
  }

Can be simplified using Array.prototype.some():

  const arrayMatch=(array,item)=> array.some(x => x.x==item.x&&x.y==item.y);

Which has a subtle benefit of returning false when it doesn't matching anything instead of returning undefined.

The move switch has an assignment that you can simplify for all cases, this one:

  switch(snake.dir.current){
      case "up":
          ...
          snake.dir.pre="up"; // <--
          break;
      case "down":
          ...     
          snake.dir.pre="down"; // <--
          break;
      case "left":
          ...
          snake.dir.pre="left"; // <--
          break;
      case "right":
          ... 
          snake.dir.pre="right"; // <--
          break;
      }

Since the new value is always equal to the switched value, you can take the assignment off the switch and do it afterwards:

  snake.dir.pre = snake.dir.current;

Also note that while your indentation is mostly consistent, the closing brace for this switch is mispositioned.

getBetweenInt treats both min and max as floats by ceiling and flooring them:

  min = Math.ceil(min);
  max = Math.floor(max);

But the values you pass in come from canvas.offset.x, canvas.offset.y, canvas.width and canvas.height which are always integer values. So there is no need to do that, you can simply use them directly.

Also the name is a bit odd for me, and i would rename it to getIntBetween.

You may have already noticed that the key presses in the snippet actually make the window scroll. That's because you haven't prevented the default behavior, which can easily do if you add a preventDefault() for the keys that you handle:

  onkeydown=e=>{
      //... the switch code

      if (e.keyCode >= 37 && e.keyCode <= 40){
          e.preventDefault();
      }
  }

The arrayMatch function:

  let arrayMatch=(array,item)=>{
      for(let x of array) if(x.x==item.x&&x.y==item.y) return true;
  }

Can be simplified using Array.prototype.some():

  const arrayMatch=(array,item)=> array.some(x => x.x==item.x&&x.y==item.y);

Which has a subtle benefit of returning false when it doesn't matching anything instead of returning undefined.

The move switch has an assignment that you can simplify for all cases, this one:

  switch(snake.dir.current){
      case "up":
          ...
          snake.dir.pre="up"; // <--
          break;
      case "down":
          ...     
          snake.dir.pre="down"; // <--
          break;
      case "left":
          ...
          snake.dir.pre="left"; // <--
          break;
      case "right":
          ... 
          snake.dir.pre="right"; // <--
          break;
      }

Since the new value is always equal to the switched value, you can take the assignment of the switch and after it do:

  snake.dir.pre = snake.dir.current;

Also note that while your indentation is mostly consistent, the closing brace for this switch is mispositioned.

getBetweenInt treats both min and max as floats by ceiling and flooring them, but the values you pass in come from canvas.offset.x, canvas.offset.y, canvas.width and canvas.height which are always integer values. So there is no need to do that, you can simply use them directly. Also the name is a bit odd for me, and i would rename it to getIntBetween.

You may have already noticed that the key presses in the snippet actually make the window scroll. That's because you haven't prevented the default behavior, which can easily do if you add a preventDefault() for the keys that you handle:

  onkeydown=e=>{
      //... the switch code

      if (e.keyCode >= 37 && e.keyCode <= 40){
          e.preventDefault();
      }
  }

The arrayMatch function:

  let arrayMatch=(array,item)=>{
      for(let x of array) if(x.x==item.x&&x.y==item.y) return true;
  }

Can be simplified using Array.prototype.some():

  const arrayMatch=(array,item)=> array.some(x => x.x==item.x&&x.y==item.y);

Which has a subtle benefit of returning false when it doesn't matching anything instead of returning undefined.

The move switch has an assignment that you can simplify for all cases, this one:

  switch(snake.dir.current){
      case "up":
          ...
          snake.dir.pre="up"; // <--
          break;
      case "down":
          ...     
          snake.dir.pre="down"; // <--
          break;
      case "left":
          ...
          snake.dir.pre="left"; // <--
          break;
      case "right":
          ... 
          snake.dir.pre="right"; // <--
          break;
      }

Since the new value is always equal to the switched value, you can take the assignment of the switch and after it do:

  snake.dir.pre = snake.dir.current;

Also note that while your indentation is mostly consistent, the closing brace for this switch is mispositioned.

getBetweenInt treats both min and max as floats by ceiling and flooring them:

  min = Math.ceil(min);
  max = Math.floor(max);

But the values you pass in come from canvas.offset.x, canvas.offset.y, canvas.width and canvas.height which are always integer values. So there is no need to do that, you can simply use them directly. 

Also the name is a bit odd for me, and i would rename it to getIntBetween.