I've created a snake game, and when the snake hit the wall or itself, it still wont stop moving. I figured out if I used the clearTimeout(), it would help. but it didn't. 
Is there a way to stop the loop? or it is another issue?

```js
jQuery(document).ready(function($) {
    init();
});

var move;
function init() {
    board.initBoard();
    drawSnake();
    food.createFood();
}

function play() {
    $('.newGame').css('visibility', 'hidden');
    $('.playgame').css('visibility', 'hidden');
    moveSnake();
    getSnakeDir();
}

function gameover() {
    clearTimeout(move);
    $('.newGame').css('visibility', 'visible');
}

function playGame() {
    $('#gameboard').empty();
    $('.newGame').hide();
    init();
    play();
}

var board = {
    DIM: 20,
    initBoard: function() {
        for (var i = 0; i < board.DIM; i++) {
            var row = $('<div class="row-' + i + '"></div>');

            for (var j = 0; j < board.DIM; j++) {
                var col = ('<div class="col-' + j + '-' + i + '"></div>');
                $(row).append(col);
            }
            $("#gameboard").append(row);
        }
    }
}

var snake = {
    position: ['10-10', '10-11', '10-12'],
    direction: 'r',
    speed: 200,
};

function drawSnake() {
    $('.col-10-10').addClass('snake');
    $('.col-11-10').addClass('snake');
}

function getSnakeDir() {
    $(document).keydown(function(event) {
        //event.preventDefault();
        if (event.which == 38) {
            snake.direction = 'u';
        } else if (event.which == 39) {
            snake.direction = 'r';
        } else if (event.which == 40) {
            snake.direction = 'd';
        } else if (event.which == 37) {
            snake.direction = 'l';
        }
    });
}

function moveSnake() {
    var tail = snake.position.pop();
    $('.col-' + tail).removeClass('snake');

    var coords = snake.position[0].split('-');
    var x = parseInt(coords[0]);
    var y = parseInt(coords[1]);

    if (snake.direction == 'r') {
        x = x + 1;
    } else if (snake.direction == 'd') {
        y = y + 1;
    } else if (snake.direction == 'l') {
        x = x - 1;
    } else if (snake.direction == 'u') {
        y = y - 1;
    }

    var currentcoords = x + '-' + y;
    snake.position.unshift(currentcoords);

    $('.col-' + currentcoords).addClass('snake');

    //when snake eats food
    if (currentcoords == food.coords) {
        console.log('true');
        $('.col-' + food.coords).removeClass('food');
        snake.position.push(tail);
        food.createFood();
    }

    //game over
    if (x < 0 || y < 0 || x > board.DIM || y > board.DIM) {
        gameover();

    }

    //if snake touch itself
    if (hitItself(snake.position) == true) {
        gameover();
    }

    move=setTimeout(moveSnake, 200);
}

var food = {
    coords: "",

    createFood: function() {
        var x = Math.floor(Math.random() * (board.DIM-1)) + 1;
        var y = Math.floor(Math.random() * (board.DIM-1)) + 1;
        var fruitCoords = x + '-' + y;
        $('.col-' + fruitCoords).addClass('food');
        food.coords = fruitCoords;
    },
}

function hitItself(array) {
    var valuesSoFar = Object.create(null);
    for (var i = 0; i < array.length; ++i) {
        var value = array[i];
        if (value in valuesSoFar) {
            return true;
        }
        valuesSoFar[value] = true;
    }
    return false;
}
```

```css
.buttonnewgame {
     position: relative;
}

.newGame {
    position: absolute;
    top: 45%;
    left: 25%;
    padding: 15px;
    font-size: 1em;
    font-family: arial;
    visibility: hidden;
}

.gameContainer{
    width: 100%;
}

#gameboard {
    background-color:#eee;
    padding:3px;
}

.playgame {
    position: absolute;
    top: 45%;
    left: 20%;
    padding: 15px;
    font-size: 1em;
    font-family: arial;    
}

/* styling the board */
div[class^='row'] {
    height: 15px;
    text-align: center;
}

div[class*='col']{
    display: inline-block;
    border: 1px solid grey;
    width: 15px;
    height: 15px;
}

/*display the snake*/
.snake {

    background-color: blue;
    z-index: 99;
}

.food {
    background: red;
    z-index: 99;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="game">
    <div class="buttonnewgame">
        <input type="button" name="new game" value="new game" class="newGame" onclick="playGame()" />
        <button class="playgame" onclick="play()">Play Game</button>
        <div class="gameContainer">
            <div id="gameboard">
                <!-- snake game in here -->
            </div>
        </div>
    </div>
</div>
```