JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<div id="snake"></div>
<input type="button" value="start" id="bt1" >
<script>
    $("#bt1").click(function(){
        $(document).bind('keydown', function(e) {
            var head = $("#snake"),
            left = 37,
            up = 38,
            right = 39,
            down = 40
    
            switch(e.keyCode){
                case left:            
                        head.css("left","-=10");
                        break;
                case up:            
                        head.css("top","-=10");
                        break;
                case right:   
                        head.css("left","+=10");
                        break;
                case down:            
                        head.css("top","+=10");
                        break;
            }
        });
    });
    
</script>

CSS

#snake{    
    width:30px;
    height:30px;
    background:green;
    position:absolute;
    top:150px;
    left:150px;
   
 }