<iframe 
    src="http://jsxgraph.org/share/iframe/snake-the-game" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Snake - the game" 
    allowfullscreen
></iframe>

<input type="button" onClick="startGame()" value="start game">

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

        var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [0, 20, 20, 0], keepaspectratio: true });
        var snake = {
            points: [[10, 11], [10, 10]],
            dir: [1, 0],
            size: 2,
            newSize: 2,
            speed: 300,
            hitSelf: function(x, y) {
                for (var i = 0; i < this.size - 1; i++) {
                    if (x == this.points[0][i])
                        if (y == this.points[1][i]) { return true; }
                }
                return false;
            }
        }
        var curve = board.create('curve', snake.points, { strokeColor: '#B71313', strokeWidth: 20, strokeOpacity: 0.7 });
        var point = board.create('point', [
            Math.round(Math.random() * 18) + 1, Math.round(Math.random() * 18) + 1], { strokeColor: '#4CADD4',
            fillColor: '#4CADD4', strokeWidth: 10, name: ' ' });
        var t = board.create('text', [2, 1, function() { return snake.size; }], { fontSize: 28 });
    
        var setRandomPosition = function() {
            point.setPositionDirectly(JXG.COORDS_BY_USER,
                [Math.round(Math.random() * 18) + 1,
                Math.round(Math.random() * 18) + 1]);
        }
        var keyDown = function(Evt) {
            var code;
            if (!Evt) Evt = window.event;
            if (Evt.which) {
                code = Evt.which;
            } else if (Evt.keyCode) {
                code = Evt.keyCode;
            }
            // 37: left,  38: up,  39: right,  40: down
            if (code == 37) { snake.dir = [-1, 0]; return false; }
            else if (code == 38) { snake.dir = [0, 1]; return false; }
            else if (code == 39) { snake.dir = [1, 0]; return false; }
            else if (code == 40) { snake.dir = [0, -1]; return false; }
            return true;
        }
        document.onkeydown = keyDown;
    
        var crawl = function() {
            if (snake.size >= snake.newSize) {
                snake.points[0].shift();
                snake.points[1].shift();
            }
            var x = snake.points[0][snake.points[0].length - 1] + snake.dir[0];
            snake.points[0].push(x);
            var y = snake.points[1][snake.points[1].length - 1] + snake.dir[1];
            snake.points[1].push(y);
            snake.size = snake.points[0].length;
            board.update();
            if (x >= 20 || x <= 0 || y >= 20 || y <= 0 || snake.hitSelf(x, y)) {
                alert('Game over');
            } else {
                if (x == point.X())
                    if (y == point.Y()) {
                        snake.newSize += 5;
                        snake.speed -= 10;
                        setRandomPosition();
                        board.update();
                    }
                setTimeout(crawl, snake.speed);
            }
        }
    
        var startGame = function() {
            snake.points[0].splice(0, snake.size, 10, 11);
            snake.points[1].splice(0, snake.size, 10, 10);
            snake.dir = [1, 0];
            snake.size = 2;
            snake.newSize = 2;
            snake.speed = 300;
            setRandomPosition();
            crawl();
        }
 </script>