Question

需要帮助克隆javascript中的移动球。因此球在点击时继承了移动球的相同属性和动作。我尝试使用cloneNode()，使用原型和继承。代码中的克隆区域位于注释//Clone prototype and constructor

之后

以下是完整的代码以及此代码底部的JS小提琴演示。

    #balling {
      border:1px solid rgb(0,0,0);
    }

  </style>
</head>
<body>
  <canvas id="balling" width="500" height="400"></canvas>

  <script type="text/javascript">
    var canvas = document.getElementById('balling');
    var context = canvas.getContext('2d');

    // The Properties of the Circle and Position within the Viewport
    var CircleOptions = {
      posBall: {
        x: 160, 
        y: 180
      },
      radius: 40,
      startAngle: 0, 
      endAngle: Math.PI * 2, 
      anticlockwise: false,
      radians: 0,
      xMove: Math.random(),
      yMove: Math.random(),
      speed:2,
      angle:80,
      velocityX:1,
      velocityY:1
    }; 

    //Math to make the ball move
    function moveBall() {
      CircleOptions.radians = CircleOptions.angle * Math.PI/180;
      CircleOptions.xMove = Math.cos(CircleOptions.radians) * CircleOptions.speed * CircleOptions.velocityX;
      CircleOptions.yMove = Math.sin(CircleOptions.radians) * CircleOptions.speed * CircleOptions.velocityY;
    }

    //Function to draw the ball
    function DrawOptions() {

      //Reset Canvas
      context.fillStyle = "white";
      context.fillRect(0, 0, canvas.width, canvas.height);

      //Drawing of the ball
      context.fillStyle = "rgb(142, 68, 173)";
      context.beginPath();
      context.arc(CircleOptions.posBall.x, CircleOptions.posBall.y, CircleOptions.radius, CircleOptions.startAngle, CircleOptions.endAngle, CircleOptions.anticlockwise);
      context.closePath();
      context.fill(); 
    }

    //finding the coordinates of the circle
    function CircleCoordinates() {
      CircleOptions.left = CircleOptions.posBall.x - CircleOptions.radius,
      CircleOptions.right = CircleOptions.posBall.x + CircleOptions.radius,
      CircleOptions.top = CircleOptions.posBall.y - CircleOptions.radius,
      CircleOptions.bottom = CircleOptions.posBall.y + CircleOptions.radius;
    }

    // Animate and call the function to move the ball
    setInterval(Move, 20);

    //Function call for the ball
    moveBall();

    //The function to make it move, reset canvas for movement and color/create shape of ball
    function Move() {
      //Function call for drawing and pinpointing the coordinates
      DrawOptions();
      CircleCoordinates();

      //Power to make it move
      CircleOptions.posBall.x += CircleOptions.xMove;
      CircleOptions.posBall.y += CircleOptions.yMove; 

      //checks for ball hitting the Wall
      if(CircleOptions.posBall.x > canvas.width || CircleOptions.posBall.x < 0) {
        CircleOptions.angle -= 770;
        moveBall();
      } else if(CircleOptions.posBall.y > canvas.height || CircleOptions.posBall.y < 0) {
        CircleOptions.angle -= 2760;
        moveBall();
      } else if(CircleOptions.posBall.y == canvas.height || CircleOptions.posBall.y > canvas.width) {
        CircleOptions.angle += 90;
        moveBall();
      }
    }

    canvas.addEventListener('click', function (e) {
      var clickedX = e.pageX - this.offsetLeft;
      var clickedY = e.pageY - this.offsetTop;

      if (clickedX < CircleOptions.right && clickedX > CircleOptions.left && clickedY > CircleOptions.top && clickedY < CircleOptions.bottom) {
        // alert('Double Me Please!');
        Clone();
      }
    });

    // Clone prototype and constructor
    function Clone() {
      var newCanvas = document.getElementById('balling');
      var context = newCanvas.getContext('2d');

      context.fillStyle = "rgb(142, 68, 173)";
      context.beginPath();
      context.arc(CircleOptions.posBall.x, CircleOptions.posBall.y, CircleOptions.radius, CircleOptions.startAngle, CircleOptions.endAngle, CircleOptions.anticlockwise);
      context.closePath();
      context.fill(); 

      return newCanvas;
    }

    //function call for clone

    //For cursor style in and out element
    canvas.addEventListener('mouseover', function () {
      document.body.style.cursor = "pointer";
    });

    canvas.addEventListener('mouseout', function () {
      document.body.style.cursor = "default";
    });
  </script>

更新的小提琴演示：http://jsfiddle.net/coder101/CMW24/5/

Answer 1

在你的jsFiddle版本中：

Clone方法和底部的调用不会做任何事情。

你的CircleOptions真的不是选项，它是代表球的对象。

你的移动功能是让它四处移动的重复控制器。

你的setInterval方法是通过调用Move开始运行它并使用现有的DrawOptions和CircleOptions; CircleCoordinates根本不做任何事情。

如果你想克隆球，你想要创建一个CircleOptions对象数组（更改名称），然后在Move中循环它们，或者它们应该每个都有自己的Move方法并对其进行操作。但如果它是JavaScript，那么让它们在一种方法中移动将会减少处理器密集度。

我清理了代码并删除了没有做任何事情的代码。现在我让球属于一个数组，让你的点击事件添加更多的球。我会把这个练习留给你。

var canvas = document.getElementById('balling');
var context = canvas.getContext('2d');

var ball = function( new_x, new_y) {
    var b = {};
    b.posBall = {
        x: new_x,
        y: new_y
    };
    b.radius = 40;
    b.startAngle = 0;
    b.endAngle = Math.PI * 2;
    b.anticlockwise = false;
    b.radians = 0;
    b.xMove = Math.random();
    b.yMove = Math.random();
    b.speed = 2;
    b.angle = 80;
    b.velocityX = 1;
    b.velocityY = 1;

    return b;
}

//Function to clear the canvas
function DrawReset() {
    //Reset Canvas
    context.fillStyle = "white";
    context.fillRect(0, 0, canvas.width, canvas.height);
    //Drawing of the ball
    context.fillStyle = "rgb(142, 68, 173)";
    context.beginPath();
    context.arc(CurrentBall.posBall.x, CurrentBall.posBall.y, CurrentBall.radius, CurrentBall.startAngle, CurrentBall.endAngle, CurrentBall.anticlockwise);
    context.closePath();
    context.fill();
}

//Math to make the ball move
function moveBall() {
    CurrentBall.radians = CurrentBall.angle * Math.PI / 180;
    CurrentBall.xMove = Math.cos(CurrentBall.radians) * CurrentBall.speed * CurrentBall.velocityX;
    CurrentBall.yMove = Math.sin(CurrentBall.radians) * CurrentBall.speed * CurrentBall.velocityY;
}

//The function to make it move, reset canvas for movement and color/create shape of ball
function Move() {
    //Function call for drawing and pinpointing the coordinates
    DrawReset();

    //Power to make it move
    CurrentBall.posBall.x += CurrentBall.xMove;
    CurrentBall.posBall.y += CurrentBall.yMove;

    //checks for ball hitting the Wall
    if (CurrentBall.posBall.x > canvas.width || CurrentBall.posBall.x < 0) {
        CurrentBall.angle -= 770;
        moveBall();
    } else if (CurrentBall.posBall.y > canvas.height || CurrentBall.posBall.y < 0) {
        CurrentBall.angle -= 2760;
        moveBall();
    } else if (CurrentBall.posBall.y == canvas.height || CurrentBall.posBall.y > canvas.width) {
        CurrentBall.angle += 90;
        moveBall();
    }
}

canvas.addEventListener('click', function (e) {
    var clickedX = e.pageX - this.offsetLeft;
    var clickedY = e.pageY - this.offsetTop;
    alert(e.pageX + ' ' + e.pageY);

    if (clickedX > CurrentBall.right && clickedX > CurrentBall.left && clickedY > CurrentBall.top && clickedY < CurrentBall.bottom) {
        alert('clicked number ');
    }
});

var CurrentBall = ball(160,180);

// Animate and call the function to move the ball
setInterval(Move, 20);

在HTML画布上用javascript克隆一个移动的球

1 个答案: