页面刷新后JavaScript中断
页面刷新后JavaScript中断
提问于 2016-01-13 06:39:58
学校项目:同学和我自己正在编程"Agar.io“，(供练习)。做得好，测试不同的东西，那么我们就会遇到一个我们无法解决的问题。看似“随机”的JavaScript在使用各种浏览器打开时并没有完全执行。除了偶尔在页面加载上随机不执行之外，每次刷新页面时，JavaScript都会像以前一样中断。它只在重新打开页面之前完全关闭浏览器后才能工作。1:为什么现在发生这种事，而以前却不是这样? 2:我们如何才能解决它？下面有注释的源代码，谢谢，-Tom
var pixelconversion = 100 * Math.PI; //conversion from made-up "mass" (really area), to area in pixels, which will be converted to a radius
var circleX = 400;
var circleY = 250;
var mouseX = 400;
var mouseY = 250;
var mass = 30;
var radius = 20; //just to make it global
function start() {
drawCircles();
var interval = setInterval(mainloop, 50);
}
function mainloop() {
math();
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");
ctx.clearRect(0, 0, 801, 501); //clears the canvas
drawCircles();
sleep(100); //more efficient than having the set interval at 150 instead
}
function getCoordinates(e) { //gets the cursors coordinates
mouseX = e.clientX;
mouseY = e.clientY;
}
function math() {
var movement = mass / 4; //arbitrary "4", will be replaced with: 1/mass * someConversion
radius = Math.sqrt((mass * pixelconversion) / Math.PI); //from area in "mass" to area in pixels, to radius in pixels
var difY = Math.abs(mouseY - circleY) //finds the difference of each
var difX = Math.abs(mouseX - circleX) //for "A" and "B" of the triangle
var c = Math.sqrt(Math.pow(difX, 2) + Math.pow(difY, 2)); //pythagareon theorem to find diagonal distance from mouse to circle
var scale = movement / c; //use scale to find "A" and "B" of smaller triangle
if (mouseX > circleX) { //if and else statements are for "movement" in the right direction, (towards the mouse)
circleX = circleX + difX * scale; //aditional if statements will be added to (next comment)
} else {
circleX = circleX - difX * scale; //stop the circle from going back and forth past the cursor
}
if (mouseY > circleY) {
circleY = circleY + difY * scale; //the differce * scale is vital; (fourth comment up)
} else {
circleY = circleY - difY * scale;
}
}
function drawCircles() {
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");
ctx.beginPath();
ctx.arc(circleX, circleY, radius, 0, 2 * Math.PI); //draws the circle
ctx.closePath();
ctx.lineWidth = 5; //just for style
ctx.fillStyle = 'green';
ctx.fill();
ctx.strokeStyle = 'darkgreen'; //just for style
ctx.stroke();
}
function sleep(milliseconds) { //"homemade" "sleep" "command"
var start = new Date().getTime();
for (var i = 0; i < 1; i++) {
if ((new Date().getTime() - start) > milliseconds) {
break;
}
}
}<body onload="start()">
<canvas id="canvas" height="501" width="801" onmousemove="getCoordinates(event)"></canvas>
</body>
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-01-13 08:00:55
这条线
var scale = movement / c; //use scale to find "A" and "B" of smaller triangleC可以是零，这使得标度NaN破坏了一切。
尝尝这个
var scale = c ? movement / c : 0;我还添加了一个片段，演示了与体态睡眠功能相比，requestAnimationFrame是如何平滑的
var pixelconversion = 100 * Math.PI; //conversion from made-up "mass" (really area), to area in pixels, which will be converted to a radius
var circleX = 400;
var circleY = 250;
var mouseX = 400;
var mouseY = 250;
var mass = 30;
var radius = 20; //just to make it global
function start() {
document.getElementById("canvas").addEventListener('mousemove', getCoordinates);
mainloop();
}
function mainloop() {
math();
drawCircles();
requestAnimationFrame(mainloop);
}
function getCoordinates(e) { //gets the cursors coordinates
mouseX = e.clientX;
mouseY = e.clientY;
}
function math() {
var movement = mass / 4; //arbitrary "4", will be replaced with: 1/mass * someConversion
radius = Math.sqrt((mass * pixelconversion) / Math.PI); //from area in "mass" to area in pixels, to radius in pixels
var difY = Math.abs(mouseY - circleY) //finds the difference of each
var difX = Math.abs(mouseX - circleX) //for "A" and "B" of the triangle
var c = Math.sqrt(Math.pow(difX, 2) + Math.pow(difY, 2)); //pythagareon theorem to find diagonal distance from mouse to circle
var scale = c ? movement / c : 0; //use scale to find "A" and "B" of smaller triangle
if (mouseX > circleX) { //if and else statements are for "movement" in the right direction, (towards the mouse)
circleX = circleX + difX * scale; //aditional if statements will be added to (next comment)
} else {
circleX = circleX - difX * scale; //stop the circle from going back and forth past the cursor
}
if (mouseY > circleY) {
circleY = circleY + difY * scale; //the differce * scale is vital; (fourth comment up)
} else {
circleY = circleY - difY * scale;
}
}
function drawCircles() {
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");
ctx.clearRect(0, 0, 801, 501); //clears the canvas
ctx.beginPath();
ctx.arc(circleX, circleY, radius, 0, 2 * Math.PI); //draws the circle
ctx.closePath();
ctx.lineWidth = 5; //just for style
ctx.fillStyle = 'green';
ctx.fill();
ctx.strokeStyle = 'darkgreen'; //just for style
ctx.stroke();
}
window.addEventListener('load', start);<canvas id="canvas" height="501" width="801"></canvas>
我让你来弄清楚为什么圆圈会像个看日本卡通的小孩一样跳舞
根据评论中的要求：
Window.requestAnimationFrame()方法告诉浏览器您希望执行动画，并请求浏览器在下一次重新绘制之前调用指定的函数来更新动画。该方法将在重新绘制之前调用的回调作为参数。 当您准备好在屏幕上更新动画时，应该调用此方法。这将请求在浏览器执行下一次重新绘制之前调用您的动画函数。回调的次数通常是每秒60次，但按照W3C的建议，在大多数web浏览器中通常会匹配显示刷新率。在后台选项卡或隐藏的s中运行时，可以将回调率降低到较低的速率，以提高性能和电池寿命。 回调方法传递一个参数，即DOMHighResTimeStamp，该参数指示由requestAnimationFrame排队的回调开始触发的当前时间。因此，单个帧中的多个回调都会收到相同的时间戳，即使在计算以前每个回调的工作负载时时间已经过去了。这个时间戳是一个十进制数，以毫秒为单位，但最小精度为1ms (1000秒)。 来源：https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34759970
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号