<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rollBagua</title>
</head>
<body>
<canvas width=600 height=400 style="border:1px solid"></canvas>
<button name="stop">暂停</button>
<button name="jump">跳</button>
<script>
const canvas = document.querySelector("canvas");
const pen = canvas.getContext("2d");
const pi = Math.PI;
const w = canvas.offsetWidth;
const h = canvas.offsetHeight;
function rota(r) {
pen.save();
pen.beginPath();
pen.moveTo(0, -r)
pen.arc(0, 0, r, -1 / 2 * pi, 1 / 2 * pi);
pen.arc(0, r / 2, r / 2, 1 / 2 * pi, -1 / 2 * pi);
pen.arc(0, -r / 2, r / 2, 1 / 2 * pi, -1 / 2 * pi, true);
pen.fill();
pen.arc(0, 0, r, -1 / 2 * pi, 1 / 2 * pi, true);
pen.stroke();
pen.beginPath();
pen.arc(0, -r / 2, r / 6, 0, 2 * pi);
pen.fill();
pen.beginPath();
pen.arc(0, r / 2, r / 6, 0, 2 * pi);
pen.fillStyle = "#fff";
pen.fill();
pen.stroke();
pen.beginPath();
pen.restore();
}
const r = 50;//球的半径
let ang = 0,//当前的旋转角度
vAng = pi / 30;//旋转的速度
let x = r + 1,//球的x坐标
xv = 2;//球x轴方向的速度
let y = 200,//球y轴上的坐标
yv = 5,//球y轴方向上的速度
ay = 0.1;//球受到的向下加速度
let isStop = false;//是否暂停标记
let isJump = false;//是否跳跃标记
function anim() {
pen.clearRect(0, 0, w, h);
pen.save();
if (x >= w - r || x <= r) {
xv = -xv;
vAng = -vAng;
}
if (isJump) {
y -= (yv -= ay);
if(y>=200){
isJump = false;
y = 200;
yv = 5;
}
}
pen.translate(x += xv, y);
pen.rotate(ang += vAng);
rota(r);
pen.restore();
pen.moveTo(0, 200 + r);
pen.lineTo(w, 200 + r)
pen.stroke();
if (isStop) {
return;
}
requestAnimationFrame(() => anim());
}
anim();
document.addEventListener("click", function (e) {
let event = e || window.event;
if (event.target.name === "stop") {
if (isStop === false) {
isStop = true;
event.target.innerHTML = "继续";
} else {
isStop = false;
event.target.innerHTML = "暂停";
anim();
}
} else if (event.target.name === "jump") {
if (isJump === false) {
isJump = true;
}
}
})
</script>
</body>
</html>
