HTML/CSS - Snake Online Editor and JavaScript Compiler

html

<!--You can change food and speed from gameover screen by tapping on the food and trophie -->
<!DOCTYPE html>
<html>
    <head>
        <title>Snake Game</title>
        <meta charset="UTF-8">
        <script src="https://cdn.jsdelivr.net/npm/pure-swipe@1.0.7/src/pure-swipe.min.js">  
        </script>
    </head>
    <body>
    
    <div id="info">
        <div id="info-live-score" class="live-score"></div>
        <div id="info-high-score" class="-high-score"></div>
    </div>
    
    <canvas id="canvas"></canvas>
    <canvas id="canvas-bg"></canvas>
    
    <!--Below part for mobile overlays-->
            <div id="mobileoverlay-start" class="start overlay">
                <div class="s-t1">
                    Contains Sound🔊
                </div>
                <div class="s-t2">
                    Increase volume for better audio
                </div>
                <img src="https://thumbs.gfycat.com/AggravatingEvilKestrel-size_restricted.gif" alt="Swipe gesture">

css

body {
    margin:0;
    width:100vw;
    height:100vh;
    background-color: #578A34;
    text-align:center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;  
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    color: white;
    position:fixed;
}
#info{
    height:10vh;
    width:100%;
    margin-bottom:5vh;
    background-color: rgba(0,0,0,0.5);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1em;
}
#info *{
    flex-grow:1;
}

var canvas,canvasBg;
var audioCtx;
var ctx;
var dir;
var posx;
var posy;
var unit;
var buffx=[];
var buffy=[];
var i;
var play,restart,isMobile;
var length;
var foodIndex,food=[],speedIndex,speedIcon=[],delay;
var intervalId;
var foodx,foody;
var liveScore,highScore;
var endScore,endHighScore;
var score,maxScore;
var overlay1,overlay2,info,control,controlImg;
var nH,nW;//no.of units that can fit in  canvas height & width
window.onload=start;
function start(){
    initializer();
    if(!restart){
    eventSetter();
    startOverlay();

BROWSER

Console