javascript - 如何让元素在点击时再次执行某些操作
问题描述
当我点击它时,我需要让我的球再次跳跃,但我不知道如何将我的功能组合在一起让它再次跳跃。谁能帮我解决这个问题?我再说一遍,当我点击时我需要球重新跳跃,并且它需要能够在空中做到这一点,不需要反弹。
var canvas, ctx, container;
canvas = document.createElement('canvas');
ctx = canvas.getContext("2d");
var ball;
var vy;
var gravity = 0.5;
var bounce = 0.7;
var xFriction = 0.1;
function init() {
setupCanvas();
vy = (Math.random() * -15) + -5;
ball = {
x: canvas.width / 2,
y: 100,
radius: 20,
status: 0,
color: "red"
};
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
ctx.fillStyle = ball.color;
ctx.fill();
ctx.closePath()
ballMovement();
}
setInterval(draw, 1000 / 35);
function ballMovement() {
ball.y += vy;
vy += gravity;
if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
vx *= -1;
}
if (ball.y + ball.radius > canvas.height) {
ball.y = canvas.height - ball.radius;
vy *= -bounce;
vy = 0;
if (Math.abs(vx) < 1.1)
vx = 0;
xF();
}
}
function setupCanvas() { //setup canvas
container = document.createElement('div');
container.className = "container";
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(container);
container.appendChild(canvas);
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 2;
}
我需要它能够在空中跳跃,并且它能够跌落到一个停止的位置。
解决方案
推荐阅读
- kubernetes - Traefik 截断文件
- sql-server - 如何在具有不同别名的同一个表上的多个左连接中选择相同的表字段
- android - 我可以将在我的应用程序中使用 AndroidX 库的库与 Android 支持库一起使用吗?
- google-cloud-sdk - “from”不被识别为内部命令
- ios - 来自 rawValues 的 Swift 初始化数组
- expression - 如果行包含特定值,则序列号将在 RDLC 报告中为“-”或零和红色,并且 Group CountRows 总计跳过该行
- javascript - 在加载所有静态资产时加载屏幕
- javascript - JSPDF 将数组导出为 PDF
- python - 同时将 onnx 模型转移到 tensorflow
- julia - 如何检查随机数是否在一定范围内?