为什么这段代码没有任何动画？答案

【问题标题】：why doesn't this code animate anything?为什么这段代码没有任何动画？
【发布时间】：2016-05-10 10:26:20
【问题描述】：

我正在尝试创建一个黑洞模拟，这是代码，现在问题是我的代码没有显示任何内容，我尝试了代码美化器，但它不起作用，所以这是什么问题：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></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) {
  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 Vector (0,0);
  var forceDirection2 = Math.atan2(pos.y - 400, pos.x - 700);
  var g = (pixel_G*pixel_M)/(distance*distance*1e3);
  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 -= 0.50;
  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() {
 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>

现在你可以看到的问题是我不能让它显示任何东西，所以如果有人能告诉我为什么它会很棒

Ps：我认为问题来自更新功能但我不确定

【问题讨论】：

美容师对你有什么好处？这是你的代码吗？我认为linter 可能会帮助您更轻松地找出问题所在。虽然，仔细研究您将遇到的所有错误需要一段时间。

标签： javascript html canvas

【解决方案1】：

你有一个 ReferenceError: invalid assignment left-hand side on line 44:

您的代码：

if (pos.x = 700 && pos.y = 400)

只需将其更改为：

if (pos.x == 700 && pos.y == 400){

应该可以的。

【讨论】：

如果我这样做没有任何动作，但至少我让它显示一些东西
查看第 35 行：var delta2 = new Vector (0,0); 这需要是：var delta2 = new Vector2D(0,0);
@carretero_1 看看https://jsfiddle.net/wzys3o4x/2/
很抱歉再次打扰，但我不明白为什么黑洞上的圆圈没有向黑洞的圆圈移动