Question

我正在尝试创建游戏（在开始阶段）。我正在尝试创建在画布上反弹的球，我创建了球，随机化它们并为它们制作动画。但是当试图添加边界时，我似乎只能将球作为一个对象而不是单独的对象。如果将NumShapes更改为1，则效果非常好。

var ctx;
    var numShapes;
    var shapes;
    var dx = 5; // speed on the X axis
    var dy = 5; // speed on the Y axis
    var ctx = canvas.getContext('2d');
    var width = canvas.width;
    var height = canvas.height;

    function init() // draws on the Canvas in the HTML
      // calling functions here would not run them in the setInterval
      {
        numShapes = 10;
        shapes = [];
        drawScreen();
        ctx = canvas.getContext('2d');
        setInterval(draw, 10); // Runs the Draw function with nestled functions
        makeShapes();
      }

    function draw() {
      clear();
      drawShapes();

    }

    function clear() {
      ctx.clearRect(0, 0, width, height); // clears the canvas by WIDTH and HEIGHT variables
    }

    function makeShapes() {
      var i;
      var tempRad;
      var tempR;
      var tempG;
      var tempB;
      var tempX;
      var tempY;
      var tempColor;
      for (i = 0; i < numShapes; i++) { // runs while i is less than numShapes
        tempRad = 10 + Math.floor(Math.random() * 25); // random radius number
        tempX = Math.random() * (width - tempRad); // random X value 
        tempY = Math.random() * (height - tempRad); // random Y value
        tempR = Math.floor(Math.random() * 255); // random red value
        tempG = Math.floor(Math.random() * 255); // random green value
        tempB = Math.floor(Math.random() * 255); // random blue value
        tempColor = "rgb(" + tempR + "," + tempG + "," + tempB + ")"; // creates a random colour
        tempShape = {
          x: tempX,
          y: tempY,
          rad: tempRad,
          color: tempColor
        }; // creates a random shape based on X, Y and R
        shapes.push(tempShape); // pushes the shape into the array
      }
    }

    function drawShapes() {
      var i;
      for (i = 0; i < numShapes; i++) {
        ctx.fillStyle = shapes[i].color;
        ctx.beginPath();
        ctx.arc(shapes[i].x, shapes[i].y, shapes[i].rad, 0, 2 * Math.PI, false);
        ctx.closePath();
        ctx.fill();
        shapes[i].x += dx; // increases the X value of Shape
        shapes[i].y += dy; // increases the Y value of Shape

        // Boundary, but applies to all shapes as one shape
        if (shapes[i].x < 0 || shapes[i].x > width) dx = -dx;
        if (shapes[i].y < 0 || shapes[i].y > height) dy = -dy;
      }
    }

    function drawScreen() {
      //bg
      ctx.fillStyle = '#EEEEEE';
      ctx.fillRect(0, 0, width, height);
      //Box
      ctx.strokeStyle = '#000000';
      ctx.strokeRect(1, 1, width - 2, height - 2);


    }

移动：

canvas {
     border: 1px solid #333;
   }

见：

＆＃13;

<body onLoad="init();">

  <div class="container container-main">
    <div class="container-canvas">
      <canvas id="canvas" width="800" height="600">
        This is my fallback content.
      </canvas>
    </div>
  </div>
</body>

＆＃13;

position:absolute

＆＃13;

{{1}}

＆＃13;

Answer 1

您的dx和dy是全局变量，对于您正在模拟的每个球对象，它们应该是唯一的。在渲染循环中将它们清除为0（draw）或实际实现一个ball对象/类来保存该对象的唯一变量。

当你进行碰撞检测时，你会改变dx和dy，然后它们会持久存在下一个球对象，因为它们是全局的。

你的小提琴，编辑为每个形状添加本地dx和dy：https://jsfiddle.net/a9b3rm5u/3/

tempDx = Math.random()*5; // random DX value 
tempDy = Math.random()*5; // random DY value

shapes[i].x+=shapes[i].dx;// increases the X value of Shape
shapes[i].y+=shapes[i].dy;// increases the Y value of Shape

if( shapes[i].x<0 || shapes[i].x>width) shapes[i].dx= - shapes[i].dx; 
if( shapes[i].y<0 || shapes[i].y>height) shapes[i].dy= -shapes[i].dy;

需要JS HTMLCanvas帮助

1 个答案: