Two Small issues/improvements #1
Description
Firstly, just wanted to say thanks for going to the effort of creating the youtube video and also the code. I did notice two small things.
I liked that you used variables to allow for the canvas size to change, and the game adjusts to the size. However your logic was slightly flawed. In drawSnake and drawApple you use tileCount multiplied by the x and y cord to get the location to draw the rectangle. When you increase the size of the canvas, eg double it to 800, the tileCount remains 20, therefore the rectangles overdraw themselves, and therefore the game does not use the whole canvas, and you hit the wall, about half way across.
To fix the issue, and keep the nice looking 2px gap between the rectangles, I added a new variable called tileFillSize and set the value to be tileSize -2, and modified the tileSize, to be the full tileSize. Then I modified the fillRect lines to be (xcord * tileSize + 1, ycord * tileSize + 1, tileFillSize, tileFillSize). This small change allows for the canvas size to be changed to what ever value and the game adjusts, just like you had planned to have it do.
The second small issue, was with the logic of checking after the keypress, to stop the snake turning back on itself. eg if the snake is going down, and the user presses up, you check the value of inputsYVelocity to confirm the snake is not going back on itself. However the keypress event, does not trigger the drawgame function, therefore if the snake is going down, and the user presses left, then up, quickly, then the value of inputsYVelocity changes after the left press, and if up is pressed before the timeout triggers the drawGame function, the inputsYVelocity will update, and cause the game end to be triggered due to the snake hitting itself.
To fix this, all I changed was the if statement in the keyDown event, to check the yValocity, or xVelocity, rather then the inputsYVelocity inputsXVelocity. Therefore checking the current direction of the snake, rather then the future direction of the snake, after drawGame is called.