JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<canvas id="canvas" width="750" height="350"></canvas>
<div id="log"></div><div id="log2"></div>
<!-- Jquery -->
CSS
canvas{border:1px solid #666;}
JavaScript
var w = $("#canvas").width();
var h = $("#canvas").height();
var right = false;
var up = false;
var left = false;
var down = false;
var x = 0;
var y = 150;
var dx = 0;
var dxlimit = 16;
var dy = 0;
var WIDTH;
var HEIGHT;
var ms = 20;
var limit = 10000;
var ctx = document.getElementById("canvas").getContext("2d");
var img = new Image();
img.src = 'http://www.wpclipart.com/toys/balls/red_snooker_ball.png';
img.width = 15;
img.height = 15;
function draw(){
if(left == true && up == true && down == false && right == false){
dx -= 0.1; dy -= 0.1;
$("#log2").html('1');
}else if(up == true && right == true && down == false && left == false){
dx += 0.1; dy -= 0.1;
$("#log2").html('2');
}else if(right == true && down == true && left == false && up == false){
dx += 0.1; dy += 0.1;
$("#log2").html('3');
}else if(down == true && left == true && up == false && right == false){
dx -= 0.1; dy+= 0.1;
$("#log2").html('4');
}else if(right == true && left == false && up == false && down == false){
dx += 0.1;
$("#log2").html('5');
}else if(left == true && right == false && up == false && down == false){
dx -= 0.1;
$("#log2").html('6');
}else if(up == true && left == false && right == false && down == false){
dy-= 0.1;
$("#log2").html('7');
}else if(down == true && left == false && up == false && right == false){
dy+= 0.1;
$("#log2").html('8');
}else{
if(dx < 0 && dy <0){
dx += 0.1;
dy += 0.1;
}else if(dx < 0 && dy >= 0){
dx += 0.1;
dy -= 0.1;
}else if(dx >=0 && dy < 0){
dx -= 0.1;
dy += 0.1;
}else if(dx >=0 && dy >= 0){
dx -= 0.1;
dy -= 0.1;
}
}
ctx.clearRect(0, 0, w, h);
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect(x, y, 22, 22);
ctx.fill();
x += dx;
y += dy;
/*if(dx <= dxlimit){
dxlimit = 16;
dx += 0.1;
}else{
dxlimit = 2;
dx...