Help for Blessing

HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animate</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/scripts.js"></script>
</head>

<body>
<table>
<tr>
<td><button id="animateTopLeft" class="directionButton">&nwarr;</button></td>
<td><button id="animateUp" class="directionButton">↑</button></td>
<td><button id="animateTopRight" class="directionButton">&nearr;</button></td>
</tr>
<tr>
<td><button id="animateLeft" class="directionButton">←</button></td>
<td><input type="text" id="dist" value="50" class="control"><br><input type="text" id="time1" value="500" class="control"></td>
<td><button id="animateRight" class="directionButton">→</button></td>
</tr>
<tr>
<td><button id="animateBottomLeft" class="directionButton">&swarr;</button></td>
<td><button id="animateDown" class="directionButton">↓</button></td>
<td><button id="animateBottomRight" class="directionButton">&searr;</button></td>
</tr>
</table>

CSS Code

@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
body{
padding-left: 30px;
}

#redSquare{
height:100px;
width:100px;
background-color:#F00;
position: absolute;
}
button{
width:75px;
height:75px;
font-size:24px;
font-weight:bold;
}
input#dist,input#time1{
padding:10px;
font-size:24px;
width:55px;
height:22px;
}

JS Code

// JavaScript Document
$(document).ready(function(){
//Set initial state
var dist = $("#dist").val();
var time1 = parseInt($("#time1").val());
$(".control").blur(function (){
dist = $("#dist").val();
time1 = parseInt($("#time1").val());
});
$("#animateRight").click(function (){
$("#redSquare").animate({left: '+='+dist},time1);
});
$("#animateLeft").click(function (){
$("#redSquare").animate({left: '-='+dist},time1);
});
$("#animateUp").click(function (){
$("#redSquare").animate({top: '-='+dist},time1);
});
$("#animateDown").click(function (){
$("#redSquare").animate({top: '+='+dist},time1);
});
$("#animateTopRight").click(function (){
$("#redSquare").animate({left: '+='+dist,top: '-='+dist},time1);
});
$("#animateTopLeft").click(function (){
$("#redSquare").animate({left: '-='+dist,top: '-='+dist},time1);
});
$("#animateBottomRight").click(function (){
$("#redSquare").animate({left: '+='+dist,top: '+='+dist},time1);
});
$("#animateBottomLeft").click(function (){
$("#redSquare").animate({left: '-='+dist,top: '+='+dist},time1);
});

$(document).keypress(function (e){
if(e.keyCode==119){//W
$("#redSquare").animate({top: '-='+dist},time1);
}
if(e.keyCode==97){//A
$("#redSquare").animate({left: '-='+dist},time1);
}
if(e.keyCode==115){//S
$("#redSquare").animate({top: '+='+dist},time1);
}
if(e.keyCode==100){//D
$("#redSquare").animate({left: '+='+dist},time1);
}
//console.log(e.keyCode);
});
});