JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<h1>velocity test</h1>
<h3>by frogggeee</h3>
<h3>==================</h3>
<button onclick = "hhh()">click me</button>
<style>
* { padding: 0; margin: 0; } 
canvas { background: #eee; display: block; margin: 0 auto; }
</style>
<canvas id="myCanvas" width="480" height="360"></canvas>

<!--<script>

</script>-->
</body>
</head>
</html>

JavaScript

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 480;
var y = 360;
var vx = 5;
var vy = 10;
function clear() {
	ctx.clearRect(0, 0, 2000, 2000);
}
function hhh() {
alert ("hi");
x = 480;
y = 360;
 vx = 5;
 vy = 10;
	var i = 0;
  for (i = 0;i < 50;i++) {
  	setTimeout(draw, 10);
  }
}
function draw() {
	clear();
changevel();
x = x - vx;
y = y + vy;
	ctx.beginPath();
ctx.rect(x, y, 20, 20);
ctx.fillStyle = "	#FF0000";
ctx.fill();
ctx.closePath();
}
function changevel() {
	vx = vx - 0.2;
  vy = vy - 0.2;
}