-2
我試圖創建一個黑洞模擬，其中所有在它外面的球都以給定的速度離開它，而落在它上面的那些球被拖向圓圈直到它們到達它的中心，它們會在那裏停止和消失，這裏是我的代碼：我如何使屬於同一陣列的兩個對象獨立移動使用JavaScript和畫布標籤？
<!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。 **初學者提示：**根據問題中的模式，在添加項目的每個新功能時，您似乎都陷入了困境。在調試時，創建一個僅關注新功能的較小示例通常很有用。然後，當您對新功能有了很好的理解時，可以更輕鬆地將新功能重新插入到更大的完整項目中。 – markE