【发布时间】：2016-02-02 18:40:07
【问题描述】：
我正在尝试创建一个黑洞模拟，其中所有在它之外的球以给定的速度远离它，而那些落在它上面的球被拖向圆圈，直到它们到达它的中心，在那里它们会停止并消失，这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>blackhole simulation escape velocity</title>
<script>
var canvas, ctx;
var blackhole;
var circle;
var circles = new Array();
var G = 6.67e-11, //gravitational constant
pixel_G = G / 1e-11,
c = 3e8, //speed of light (m/s)
M = 12e31, // masseof the blackhole in kg (60 solar masses)
pixel_M = M / 1e32
Rs = (2 * G * M) / 9e16, //Schwarzchild radius
pixel_Rs = Rs / 1e3, // scaled radius
ccolor = 128;
function update() {
var pos, i, distance, somethingMoved = false;
for (i = 0; i < circles.length; i++) {
pos = circles[i].position;
distance = Math.sqrt(((pos.x - 700) * (pos.x - 700)) + ((pos.y - 400) * (pos.y - 400)));
if (distance > pixel_Rs-5 ) {
var delta = new Vector2D(0, 0);
var forceDirection = Math.atan2(pos.y - 400, pos.x - 700);
var evelocity = Math.sqrt((2 * pixel_G * pixel_M) / (distance * 1e-2));
delta.x += Math.cos(forceDirection) * evelocity;
delta.y += Math.sin(forceDirection) * evelocity;
pos.x += delta.x;
pos.y += delta.y;
somethingMoved = true;
} else {
var delta2 = new Vector2D (0,0);
var forceDirection2 = Math.atan2(pos.y - 400, pos.x - 700);
var g = (pixel_G*pixel_M)/(distance*distance*1e2);
delta2.x += Math.cos(forceDirection2)*g;
delta2.y += Math.sin(forceDirection2)*g;
pos.x -= delta2.x;
pos.y -= delta2.y;
somethingMoved = true;
circles[i].color -= 1;
if (pos.x == 700 && pos.y == 400){
somethingMoved = false;
};
}
}
if (somethingMoved) {
drawEverything();
requestAnimationFrame(update);
};
}
function drawEverything() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
blackhole.draw(ctx);
for (var i = 0; i < circles.length; i++) {
circles[i].draw(ctx);
}
}
function init(event) {
canvas = document.getElementById("space");
ctx = canvas.getContext('2d');
blackhole = new Ball(pixel_Rs, { x: 700,
y: 400 }, 0);
for (var i = 0; i < 200; i++) {
var vec2D = new Vector2D(Math.floor(Math.random() * 1400), Math.floor(Math.random() * 800));
circle = new Ball(5, vec2D, ccolor);
circles.push(circle);
}
drawEverything();
requestAnimationFrame(update);
}
function Ball(radius, position, color) {
this.radius = radius;
this.position = position;
this.color = color;
}
Ball.prototype.draw = function(ctx) {
var c=parseInt(this.color);
ctx.fillStyle = 'rgba(' + c + ',' + c + ',' + c + ',1)';
ctx.beginPath();
ctx.arc(this.position.x, this.position.y, this.radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
};
function Vector2D(x, y) {
this.x = x;
this.y = y;
}
function onClick (){
canvas = document.getElementById ('space');
ctx = canvas.getContext ('2d')
canvas.addEventListener ("mousedown", init, false)
blackhole = new Ball (5, {x: 700,
y: 400 }, 0);
blackhole.draw (ctx) ;
}
window.onload = onClick;
</script>
<style>
body {
background-color:#021c36 ;
margin: 0px;
}
</style>
</head>
<body>
<canvas id = "space", width = "1400", height = "800">
</canvas>
</body>
</html>
现在你可以看到，我创建了第二个变量 delta2，但问题是它不能更新圆圈的位置，这使得圆圈无法移动，谁能告诉我什么是错误的。另外，如何在一定时间后制作大黑圈，我知道我可能应该创建一个计时器，但我不知道它们是如何工作的
【问题讨论】：
-
您一直在询问有关如何调试此项目的问题。也许尝试正确地格式化你的代码，这样你就可以看到一切逻辑上适合的地方，然后使用控制台来帮助调试。没有明确限制
delta2更新您圈子的位置。这只是你是否正确使用该变量的问题。 -
但我不知道
delta2有什么问题，我的意思是从我的观点来看，我没有正确使用它，所以我不知道它有什么问题，我是对不起，我只是个初学者 -
@carretero_1。 初学者提示：根据您问题中的模式，您似乎在为项目添加每个新功能时遇到了困难。调试时，创建一个只关注新功能的较小示例通常很有用。然后，当您对新功能有了很好的了解后，就可以更轻松地将新功能重新插入到更大的完整项目中。
-
调试代码的任何提示，或者至少是一个开始的地方
-
打开开发工具（通常是 F12）。包括
console.log语句以查看您的关键变量是如何变化的。开发工具还会向您显示错误消息。从项目中提取不必要的代码，直到您只处理行为不端的部分。
标签： javascript html canvas