JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script src="http://files.cnblogs.com/iamzhanglei/JscexMin.js" type="text/javascript"></script>
<canvas id="myCanvas" width="600" height="300" style="border:15px solid gray;
-moz-border-radius-bottomleft:40px;
-moz-border-radius-bottomright:40px;
-webkit-border-bottom-left-radius:40px;
-webkit-border-bottom-right-radius:40px;
-webkit-border-top-left-radius:40px;
-webkit-border-top-right-radius:40px;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
var r=15;
var ball1 = {
x: 20,
y: 285,
r: r,
vx: 120,
vy: 0
};
var ball2 = {
x: 400,
y: 285,
r: r,
vx: -30,
vy: 0
};
var balls = [];
balls.push(ball1);
balls.push(ball2);
cxt.fillStyle = "#030303";
cxt.fillRect(0, 0, canvas.width, canvas.height);
function init() {
cxt.fillStyle = "#fff";
for (i in balls) {
cxt.beginPath();
cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
}
}
init();
var cyc = 20;
var moveAsync = eval(Jscex.compile("async", function () {
while (true) {
cxt.fillStyle = "rgba(0, 0, 0, .3)";
cxt.fillRect(0, 0, canvas.width, canvas.height);
cxt.fillStyle = "#fff";
if (Math.abs(ball1.x - ball2.x) <= 2 * r) {
var temp = ball1.vx;
ball1.vx = ball2.vx;
ball2.vx = temp;
}
for (i in balls) {
balls[i].x += balls[i].vx * cyc / 1000;
cxt.beginPath();
...