javascript - 如何在按下按钮时对我拥有的循环执行重置?
问题描述
我正在创建一个代码,其中单击按钮时 3 个球会弹跳。我有一个在互联网上找到的代码并添加了开始按钮,但多次单击它会加速球。此外,我尝试添加一个重置按钮,该按钮将清除画布但无法使其工作。共享 HTML 和 JS 代码。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const width = canvas.width = 1000;
const height = canvas.height = 500;
ctx.fillStyle = 'grey';
ctx.fillRect(0, 0, width, height);
function random(min, max) {
const num = Math.floor(Math.random() * (max - min + 1)) + min;
return num;
}
function Ball(x, y, velX, velY, color, size) {
this.x = x;
this.y = y;
this.velX = velX;
this.velY = velY;
this.color = color;
this.size = size;
}
Ball.prototype.draw = function() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
ctx.fill();
}
Ball.prototype.update = function() {
if ((this.x + this.size) >= width) {
this.velX = -(this.velX);
}
if ((this.x - this.size) <= 0) {
this.velX = -(this.velX);
}
if ((this.y + this.size) >= height) {
this.velY = -(this.velY);
}
if ((this.y - this.size) <= 0) {
this.velY = -(this.velY);
}
this.x += this.velX;
this.y += this.velY;
}
let balls = [];
function loop() {
while (balls.length < 3) {
let size = 35;
let ball = new Ball(
random(0 + size, width - size), random(0 + size, height - size), 5, 5, 'yellow', size);
balls.push(ball);
}
ctx.fillStyle = 'grey';
ctx.fillRect(0, 0, width, height);
for (let i = 0; i < balls.length; i++) {
balls[i].draw();
balls[i].update();
}
requestAnimationFrame(loop);
}
document.getElementById('Begin').addEventListener('click',loop);
<input type='button' id='Begin' value='start'>
<canvas id='myCanvas'></canvas>
解决方案
您需要将 requestAnimationFrame 存储在 var 中并使用 cancelAnimationFrame 停止
我添加了一个 div 来保存按钮,现在从该 div 委托,因此只需要一个事件处理程序。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const width = canvas.width = 1000;
const height = canvas.height = 500;
ctx.fillStyle = 'grey';
ctx.fillRect(0, 0, width, height);
let rq; // this we can use to request and cancel
function random(min, max) {
const num = Math.floor(Math.random() * (max - min + 1)) + min;
return num;
}
function Ball(x, y, velX, velY, color, size) {
this.x = x;
this.y = y;
this.velX = velX;
this.velY = velY;
this.color = color;
this.size = size;
}
Ball.prototype.draw = function() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
ctx.fill();
}
Ball.prototype.update = function() {
if ((this.x + this.size) >= width) {
this.velX = -(this.velX);
}
if ((this.x - this.size) <= 0) {
this.velX = -(this.velX);
}
if ((this.y + this.size) >= height) {
this.velY = -(this.velY);
}
if ((this.y - this.size) <= 0) {
this.velY = -(this.velY);
}
this.x += this.velX;
this.y += this.velY;
}
let balls = [];
function loop() {
while (balls.length < 3) {
let size = 35;
let ball = new Ball(
random(0 + size, width - size), random(0 + size, height - size), 5, 5, 'yellow', size);
balls.push(ball);
}
ctx.fillStyle = 'grey';
ctx.fillRect(0, 0, width, height);
for (let i = 0; i < balls.length; i++) {
balls[i].draw();
balls[i].update();
}
rq = requestAnimationFrame(loop);
}
document.getElementById('butDiv').addEventListener('click', function(e) {
const tgt = e.target;
if (tgt.id === "Begin") {
if (tgt.value === "start") {
loop()
tgt.value = "stop";
document.getElementById("resetCanvas").classList.add("hide");
} else {
cancelAnimationFrame(rq)
this.value = "start";
document.getElementById("resetCanvas").classList.remove("hide");
}
} else if (tgt.id === "resetCanvas") {
cancelAnimationFrame(rq)
ctx.fillStyle = 'grey';
ctx.fillRect(0, 0, width, height);
document.getElementById("Begin").value="start";
tgt.classList.add("hide");
}
})
.hide {
display: none;
}
<div id="butDiv">
<input type='button' id='Begin' value='start'> <input type='button' class="hide" id='resetCanvas' value='reset'>
</div>
<canvas id='myCanvas'></canvas>
推荐阅读
- php - 更新树枝全局变量的问题
- ruby-on-rails - `?` 和 Active Record 中的查询名称有什么区别?
- aem - AEM 6.3 - Sling Use 类中的继承
- java - 将 DirectoryObject 转换为用户
- c# - Xamarin - 遍历 Android 设备上的所有音频文件
- c - 如何检测“snprintf”错误?
- python - Flask_SQLAlchemy select, where, scalar, connection_execute
- go - 将 %s 的十六进制编码从字节设置为变量 golang
- c - printf 覆盖,strcat 仅附加文件的第一行
- swift - Swift - 如何使动画箭头指向正确的方向?