Snake Game in JavaScript

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Snake Game!</title>
    <style>
        canvas{
            margin-left:42%;
        }
    </style>
</head>
<body>
   <script>
       window.onload = function () {
           var canvas = document.createElement('canvas');
           var ctx = canvas.getContext('2d');
           var score = 0;
           var level = 0;
           var direction = 0;
           var snake = new Array(3);
           var active = true;
           var speed = 200;

           //matrix field
           var map = new Array(20);
           for (var i = 0; i < map.length; i++) {
               map[i] = new Array(20);
           }

           canvas.width = 204;
           canvas.height = 224;

           var body = document.getElementsByTagName('body')[0];
           body.appendChild(canvas);

           //adding the snake
           map = dSnake(map);

           //adding the food
           map = dFood(map);


           drawGame();

           //keybindings
           window.addEventListener('keydown', function (e) {
               if (e.keyCode === 38 && direction !== 3) {
                   direction = 2;//up
               }
               else if (e.keyCode === 40 && direction !== 2) {
                   direction = 3;//down
               }
               else if (e.keyCode === 37 && direction !== 0) {
                   direction = 1;//left
               }
               else if (e.keyCode === 39 && direction !== 1) {
                   direction = 0;//right
               }

           })

           function drawGame() {
               //clearing the canvas
               ctx.clearRect(0, 0, canvas.width, canvas.height);

               for (var i = snake.length - 1; i >= 0; i--) {

                   if (i === 0) {
                       switch (direction) {
                           case 0://right
                               snake[0] = { x: snake[0].x + 1, y: snake[0].y }
                               break;
                           case 1://left
                               snake[0] = { x: snake[0].x - 1, y: snake[0].y }
                               break;
                           case 2://up
                               snake[0] = { x: snake[0].x, y: snake[0].y - 1 }
                               break;
                           case 3://down
                               snake[0] = { x: snake[0].x, y: snake[0].y + 1 }
                               break;
                       }

                       //check if the snake hits the wall
                       if (snake[0].x < 0 || snake[0].x >= 20 || snake[0].y < 0 || snake[0].y >= 20) {
                           gameOver();
                           return;
                       }

                       //check if we hit a food and add a piece to snake
                       if (map[snake[0].x][snake[0].y] === 1) {
                           score += 1;
                           map = dFood(map);
                           //add a piece to snake
                           snake.push({ x: snake[snake.length - 1].x, y: snake[snake.length - 1].y });
                           map[snake[snake.length - 1].x][snake[snake.length - 1].y] = 2;
                           //if score is 10,20,30... increase lvl(speed)
                           if ((score % 10) == 0) {
                               level += 1;
                           }
                       }
                           //check if the snake hits a part of her body
                       else if (map[snake[0].x][snake[0].y] === 2) {
                           gameOver();
                           return;
                       }
                       map[snake[0].x][snake[0].y] = 2;
                   }
                   else {
                       if (i === (snake.length - 1)) {
                           map[snake[i].x][snake[i].y] = null;
                       }
                       snake[i] = { x: snake[i - 1].x, y: snake[i - 1].y };
                       map[snake[i].x][snake[i].y] = 2;
                   }
               }

               //border and score draw
               drawMain();
               //matrix cycling
               for (var x = 0; x < map.length; x++) {
                   for (var y = 0; y < map[0].length; y++) {
                       if (map[x][y] === 1) {
                           ctx.fillStyle = 'red';
                           ctx.fillRect(x * 10, y * 10 + 20, 10, 10);
                       }
                       else if (map[x][y] === 2) {
                           ctx.fillStyle = 'black';
                           ctx.fillRect(x * 10, y * 10 + 20, 10, 10);
                       }
                   }
               }
               //speeding up and leveling
               if (active) {
                   setTimeout(drawGame, speed - (level * 50));
               }
           }
           function drawMain() {
               ctx.lineWidth = 2;
               ctx.strokeStyle = 'black';
               //moving the border to leaving space for interface
               ctx.strokeRect(2, 20, canvas.width - 4, canvas.height - 24);
               ctx.font = "12px sans-serif";

               ctx.fillText("Score:" + score + " Level:" + level, 2, 12);
           }


           function dFood(map) {
               //random position
               var rX = Math.round(Math.random() * 19);
               var rY = Math.round(Math.random() * 19);
               //not placing the food on the snake
               while (map[rX][rY] === 2) {
                   rX = Math.round(Math.random() * 19);
                   rY = Math.round(Math.random() * 19);
               }
               map[rX][rY] = 1;
               return map;
           }


           function dSnake(map) {
               //random HEAD position
               var rX = Math.round(Math.random() * 19);
               var rY = Math.round(Math.random() * 19);

               //the other two body pieces
               while ((rX - snake.length) < 0) {
                   rX = Math.round(Math.random() * 19);
               }

               for (var i = 0; i < snake.length; i++) {
                   snake[i] = { x: rX - i, y: rY };
                   map[rX - i][rY] = 2;
               }
               return map;
           }

           function gameOver() {
               active = false;
               ctx.clearRect(0, 0, canvas.width, canvas.height);
               ctx.fillStyle = "red";
               ctx.font = "17px sans-serif";
               ctx.fillText("Game Over!", ((canvas.width / 2) - (ctx.measureText("Game Over!").width / 2)), 50);
               ctx.font = "13px sans-serif";
               ctx.fillText("Your Score:" + score, ((canvas.width / 2) - (ctx.measureText("Your Score:" + score).width / 2)), 70);

           }
       };
    </script>
</body>
</html>
            Hope you enjoy it :);):D