Javascript 如何使用onclick更改旋转方向

我应该让一颗星星在第一次运行时旋转，一旦鼠标被点击，星星应该改变它的颜色并朝相反的方向旋转，如果再次点击，它应该再次改变颜色和方向，依此类推

我做了两个矩阵，每个方向一个

     function rotateZ(m, angle) {  // angle (distance) = velocity * time
      
        var csine = Math.cos(angle);
        var sine = Math.sin(angle);
      //  var sineanticlockwise= math.sin(angle)*-1;


        var mv0 = m[0], mv4 = m[4], mv8 = m[8];

        m[0] = csine *m[0]-sine *m[1];
       m[4] = csine *m[4]-sine *m[5];

       m[1] = csine *m[1]+sine *mv0;
       m[5] = csine *m[5] +sine *mv4;
     }

     function rotateclockwise(m, angle) {  // angle (distance) = velocity * time
      
        var csine = Math.cos(angle);
        var sine = Math.sin(angle)*-1;
      //  var sineanticlockwise= math.sin(angle)*-1;


        var mv0 = m[0], mv4 = m[4], mv8 = m[8];

        m[0] = csine *m[0]-sine *m[1];
       m[4] = csine *m[4]-sine *m[5];

       m[1] = csine *m[1]+sine *mv0;
       m[5] = csine *m[5] +sine *mv4;
     }

这是一个动画功能，里面有一个条件，当鼠标事件调用它时，它会在每次单击鼠标时改变方向，但它不起作用。我尝试将它放在鼠标事件中，但仍然保持不变

     var click=true;
     var time_old = 0;
     var animate = function(time) {
        var dt = time-time_old;
        
        if (click=true)
        {
            rotateZ(mov_matrix,dt*0.002); // distance = time* velocity(speed)
        time_old = time;
        click=false;
        }

        else
        {
     rotateclockwise(mov_matrix,dt*0.002); // distance = time* velocity(speed)
        time_old = time;
        click=true;
        }
 
     /* Step5: Drawing the required object (triangle) */
     gl.clearColor(0.19, 0.19, 0.20, 1); // Clear the canvas
     gl.enable(gl.DEPTH_TEST); // Enable the depth test
     gl.clear(gl.COLOR_BUFFER_BIT); // Clear the color buffer bit
     gl.viewport(0,0,canvas.width,canvas.height); // Set the view port
     gl.uniformMatrix4fv(Mmatrix, false, mov_matrix);
     gl.drawArrays(gl.TRIANGLES, 0, 9);  // Draw the triangles

        window.requestAnimationFrame(animate);   
     }


      function mouseFunction(e){

    var clickXrelativToCanvas = e.pageX - e.target.offsetLeft;
    var clickYrelativToCanvas = e.pageY - e.target.offsetTop;


    color = [Math.random(), Math.random(), Math.random(), 1];
    var colorLocation = gl.getUniformLocation(shaderProgram, "u_color");
    gl.uniform4fv(colorLocation, color);
      var time_old = 0;
     rotateZ(mov_matrix, dt*0.002);
     //rotateclockwise (mov_matrix, dt*0.002);

  };
     animate(0);

---

代码有问题。修复它们是否足以让代码正常工作还不清楚

首先，如果

未检查
单击
是否为真，则将
单击
设置为真

if (click = true)    // bad
if (click === true)  // good

一般来说，你应该

第二步，如果两个代码都已设置，则单击两个代码路径

  if (click === true) {   // <------------ fixed
    rotateZ(mov_matrix, dt * 0.002); // distance = time* velocity(speed)
    time_old = time;
    click = false;        // <------------ WHAT?
  } else {
    rotateclockwise(mov_matrix, dt * 0.002); // distance = time* velocity(speed)
    time_old = time;
    click = true;         // <------------ WHAT?
  }


不确定为什么这个代码在鼠标函数中

function mouseFunction(e) {
  click = !click;
  ...

     var time_old = 0;
     rotateZ(mov_matrix, dt*0.002);

但更常见的方法是设置旋转速度

var rotationSpeed = 0.002;
var time_old = 0;
var animate = function(time) {
  var dt = time - time_old;
  time_old = time;

  rotateZ(mov_matrix, dt * rotationSpeed); // distance = time* velocity(speed)

  /* Step5: Drawing the required object (triangle) */
  gl.clearColor(0.19, 0.19, 0.20, 1); // Clear the canvas
  gl.enable(gl.DEPTH_TEST); // Enable the depth test
  gl.clear(gl.COLOR_BUFFER_BIT); // Clear the color buffer bit
  gl.viewport(0, 0, canvas.width, canvas.height); // Set the view port
  gl.uniformMatrix4fv(Mmatrix, false, mov_matrix);
  gl.drawArrays(gl.TRIANGLES, 0, 9); // Draw the triangles

  window.requestAnimationFrame(animate);
}


function mouseFunction(e) {
  rotationSpeed = -rotationSpeed; // flip the direction of rotation

  var clickXrelativToCanvas = e.pageX - e.target.offsetLeft;
  var clickYrelativToCanvas = e.pageY - e.target.offsetTop;


  color = [Math.random(), Math.random(), Math.random(), 1];
  var colorLocation = gl.getUniformLocation(shaderProgram, "u_color");
  gl.uniform4fv(colorLocation, color);
};
animate(0);

在鼠标事件中设置制服也不常见。它只起作用，因为你正在画一件东西。一旦你尝试用不同的颜色绘制两件东西，你就需要在
动画中移动设置颜色，所以在鼠标功能中你可以选择一种颜色，但在
动画中你可以调用
gl.uinform4fv（colorLocation，color）
但是，很难深入（缩进、数学等），您的
if
语句中肯定有错误：
if（click=true）
-一个等号指定一个值。如果要比较值，请使用双相等
=
或三相等
==
。首先，试着解决这个问题。你需要在问题本身中发布更多的代码。在帮助中：“寻求调试帮助的问题（“为什么此代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。”也许用一个？是的，谢谢我没有注意到这一点，我改变了它，但问题还是一样的。你的问题是关于角度数学还是关于鼠标交互？哪一部分出了问题？如果您只需要解决旋转问题，可以查看CSS
transform.rotate（）
。这将为您节省大量代码！