JSFiddle - React, Tailwind, and code Playground

by Chandana Thota

HTML

<body>        
        <canvas id="canvas" width="500px" height="500px"></canvas>
        <div id="stats"></div>
        <div id="buttons">
            <button id="startAnimation">Start</button>
            <button id="stopAnimation">Stop</button>
        </div>
    </body>

CSS

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;}

html,body{
    width:100%;
    height:100%;
}

canvas{
  display:block;
  margin:auto;
}

#buttons{
    position:absolute;
    bottom:20px;
    left:20px;
}
#buttons button{
}
#stats{
    position:absolute;
    bottom:20px;
    right:20px;
}

JavaScript

$(document).ready(function(){


    // Canvas Variables
    var canvas = $('#canvas');
    var context = canvas.get(0).getContext('2d');  
    var canvasWidth = canvas.width();
      var canvasHeight = canvas.height();


    // Keyboard Variables
    var leftKey = 37;
    var upKey = 38;
    var rightKey = 39;
    var downKey = 40;


    // Keyboard event listeners
    $(window).keydown(function(e){
        var keyCode = e.keyCode;
    
        if(keyCode == leftKey){
            car.left = true;
        } else if(keyCode == upKey){
            car.forward = true;
        } else if(keyCode == rightKey){
            car.right = true;
        } else if (keyCode == downKey){
            car.backward = true;
        }
    });
    $(window).keyup(function(e){
        var keyCode = e.keyCode;/22222222222222222222222222222222222233
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        if(keyCode == leftKey){
            car.left = false;
        } else if(keyCode == upKey){
            car.forward = false;
        } else if(keyCode == rightKey){
            car.right = false;
        } else if (keyCode == downKey){
            car.backward = false;
        }
    });


    // Start & Stop button controlls
    var playAnimation = true;
    
    var startButton = $('#startAnimation');
    var stopButton = $('#stopAnimation');
    
    startButton.hide();
    startButton.click(function(){
        $(this).hide();
        stopButton.show();
      ...