javascript - 使 Canvas 文本对象相互反弹并由数组创建

Question

我最近开始在一个网站上工作并学习 HTML/CCS/JS，并发现我不确定如何执行。基本上，我希望当前四处移动并从窗口边框反弹的 float 文本也相互反弹。我还认为数组可能会很好地能够设置我想要生成的文本对象的数量。这是我的网站，供引用文本如何弹跳 http://gmtrash.ga/

这里是控制文本对象和颜色的 JavaScript

setInterval(function() {
	myContainer = document.getElementById("colortext");
	displayRandomColor();

	function getRandomColor() {
		r = Math.floor(Math.random() * 256);
		g = Math.floor(Math.random() * 256);
		b = Math.floor(Math.random() * 256);
		hexR = r.toString(16);
		hexG = g.toString(16);
		hexB = b.toString(16);
		if (hexR.length == 1) {
			hexR = "0" + hexR;
		}
		if (hexG.length == 1) {
			hexG = "0" + hexG;
		}
		if (hexB.length == 1) {
			hexB = "0" + hexB;
		}
		hexColor = "#" + hexR + hexG + hexB;
		return hexColor.toUpperCase();
	}

	function displayRandomColor() {
		myRandomColor = getRandomColor();
	}
}, 450);
myRandomColor = 000000;
var context;
var x = Math.floor(Math.random() * window.outerWidth);
var y = Math.floor(Math.random() * window.outerHeight);
var x1 = Math.floor(Math.random() * window.outerWidth);
var y1 = Math.floor(Math.random() * window.outerHeight);
var x2 = Math.floor(Math.random() * window.outerWidth);
var y2 = Math.floor(Math.random() * window.outerHeight);
var x3 = Math.floor(Math.random() * window.outerWidth);
var y3 = Math.floor(Math.random() * window.outerHeight);
var x4 = Math.floor(Math.random() * window.outerWidth);
var y4 = Math.floor(Math.random() * window.outerHeight);
var x5 = Math.floor(Math.random() * window.outerWidth);
var y5 = Math.floor(Math.random() * window.outerHeight);
var x6 = Math.floor(Math.random() * window.outerWidth);
var y6 = Math.floor(Math.random() * window.outerHeight);
var x7 = Math.floor(Math.random() * window.outerWidth);
var y7 = Math.floor(Math.random() * window.outerHeight);
var x8 = Math.floor(Math.random() * window.outerWidth);
var y8 = Math.floor(Math.random() * window.outerHeight);
var x9 = Math.floor(Math.random() * window.outerWidth);
var y9 = Math.floor(Math.random() * window.outerHeight);
var dx = Math.floor(Math.random() * 15);
var dy = Math.floor(Math.random() * 15);
var dx1 = Math.floor(Math.random() * 15);
var dy1 = Math.floor(Math.random() * 15);
var dx2 = Math.floor(Math.random() * 15);
var dy2 = Math.floor(Math.random() * 15);
var dx3 = Math.floor(Math.random() * 15);
var dy3 = Math.floor(Math.random() * 15);
var dx4 = Math.floor(Math.random() * 15);
var dy4 = Math.floor(Math.random() * 15);
var dx5 = Math.floor(Math.random() * 15);
var dy5 = Math.floor(Math.random() * 15);
var dx6 = Math.floor(Math.random() * 15);
var dy6 = Math.floor(Math.random() * 15);
var dx7 = Math.floor(Math.random() * 15);
var dy7 = Math.floor(Math.random() * 15);
var dx8 = Math.floor(Math.random() * 15);
var dy8 = Math.floor(Math.random() * 15);
var dx9 = Math.floor(Math.random() * 15);
var dy9 = Math.floor(Math.random() * 15);

function init() {
	context = myCanvas.getContext('2d');
	setInterval(draw, 10);
}

function draw() {
	context.clearRect(0, 0, window.outerWidth, window.outerHeight);
	context.beginPath();
	context.fillStyle = myRandomColor;
	context.font = "64px fixedsys";
	context.fillText("nerd", x, y);
	context.closePath();
	context.beginPath();
	context.fillStyle = myRandomColor;
	context.font = "64px fixedsys";
	context.fillText("nerd", x1, y1);
	context.closePath();
	context.fill();
	context.beginPath();
	context.fillStyle = myRandomColor;
	context.font = "64px fixedsys";
	context.fillText("nerd", x2, y2);
	context.closePath();
	context.beginPath();
	context.fillStyle = myRandomColor;
	context.font = "64px fixedsys";
	context.fillText("nerd", x3, y3);
	context.closePath();
	context.beginPath();
	context.fillStyle = myRandomColor;
	context.font = "64px fixedsys";
	context.fillText("nerd", x4, y4);
	context.closePath();
	context.fill();
	context.beginPath();
	context.fillStyle = myRandomColor;
	context.font = "64px fixedsys";
	context.fillText("nerd", x5, y5);
	context.closePath();
	context.beginPath();
	context.fillStyle = myRandomColor;
	context.font = "64px fixedsys";
	context.fillText("nerd", x6, y6);
	context.closePath();
	context.beginPath();
	context.fillStyle = myRandomColor;
	context.font = "64px fixedsys";
	context.fillText("nerd", x7, y7);
	context.closePath();
	context.fill();
	context.beginPath();
	context.fillStyle = myRandomColor;
	context.font = "64px fixedsys";
	context.fillText("nerd", x8, y8);
	context.closePath();
	context.beginPath();
	context.fillStyle = myRandomColor;
	context.font = "64px fixedsys";
	context.fillText("nerd", x9, y9);
	context.closePath();
	if (x < 0 || x > window.outerWidth) dx = -dx;
	if (y < 0 || y > window.outerHeight) dy = -dy;
	x += dx;
	y += dy;
	if (x1 < 0 || x1 > window.outerWidth) dx1 = -dx1;
	if (y1 < 0 || y1 > window.outerHeight) dy1 = -dy1;
	x1 += dx1;
	y1 += dy1;
	if (x2 < 0 || x2 > window.outerWidth) dx2 = -dx2;
	if (y2 < 0 || y2 > window.outerHeight) dy2 = -dy2;
	x2 += dx2;
	y2 += dy2;
	if (x3 < 0 || x3 > window.outerWidth) dx3 = -dx3;
	if (y3 < 0 || y3 > window.outerHeight) dy3 = -dy3;
	x3 += dx3;
	y3 += dy3;
	if (x4 < 0 || x4 > window.outerWidth) dx4 = -dx4;
	if (y4 < 0 || y4 > window.outerHeight) dy4 = -dy4;
	x4 += dx4;
	y4 += dy4;
	if (x5 < 0 || x5 > window.outerWidth) dx5 = -dx5;
	if (y5 < 0 || y5 > window.outerHeight) dy5 = -dy5;
	x5 += dx5;
	y5 += dy5;
	if (x6 < 0 || x6 > window.outerWidth) dx6 = -dx6;
	if (y6 < 0 || y6 > window.outerHeight) dy6 = -dy6;
	x6 += dx6;
	y6 += dy6;
	if (x7 < 0 || x7 > window.outerWidth) dx7 = -dx7;
	if (y7 < 0 || y7 > window.outerHeight) dy7 = -dy7;
	x7 += dx7;
	y7 += dy7;
	if (x8 < 0 || x8 > window.outerWidth) dx8 = -dx8;
	if (y8 < 0 || y8 > window.outerHeight) dy8 = -dy8;
	x8 += dx8;
	y8 += dy8;
	if (x9 < 0 || x9 > window.outerWidth) dx9 = -dx9;
	if (y9 < 0 || y9 > window.outerHeight) dy9 = -dy9;
	x9 += dx9;
	y9 += dy9;
}

<html>

<body onLoad="init();"> <canvas id="myCanvas" style='position: absolute; left: 0px; top: 0px;'>
  </canvas>
  <div id="colortext">
  </div>
  <script src="scripts/suchcolor.js"></script>
  <script>
    (function() {
      var htmlCanvas = document.getElementById('myCanvas'),
        context = htmlCanvas.getContext('2d');
      initialize();

      function initialize() {
        window.addEventListener('resize', resizeCanvas, false);
        resizeCanvas();
      }

      function redraw() {
        context.strokeStyle = 'blue';
        context.lineWidth = '5';
        context.strokeRect(0, 0, window.innerWidth, window.innerHeight);
      }

      function resizeCanvas() {
        htmlCanvas.width = window.innerWidth;
        htmlCanvas.height = window.innerHeight;
        redraw();
      }
    })();
  </script>
</body>
</html>

现在我该怎么办？

Answer 1

您可以通过引入数组和循环来大幅改进您的代码。创建一个空数组 varboxs = [] 并将 box 放入其中。每个盒子由位置、尺寸和速度组成，例如:

var box = {x: 0, y: 0, width: 10, height: 10, dx: 1, dy: 1};
boxes.push(box);

然后您可以使用 for 循环迭代所有框:

for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  // Do something with the i-th box...
}

处理盒子与盒子的碰撞可以用几行代码完成，但它不会很健壮。 IE。在检测框重叠并通过直接更新框速度解决碰撞之前，每轮只能更新框位置几个像素。可能需要几帧才能解决多框碰撞，并且在此期间框可以明显重叠。对于处理堆叠、对象之间的力并具有更好的集成机制的更强大的物理，您应该寻找经过测试的 2D 盒子物理库。

对于物理模拟和动画来说，计时非常重要。对于动画，you should use requestAnimationFrame而不是 setInterval。由于这两种方法都不能保证恒定的时间步长，因此您需要计算两次物理更新之间传递的时间 dt，并将该时间步长 dt 上的速度积分(= 相乘)以获取新职位。

用“穷人的物理学”重新组织代码:

// Return random RGB color string:
function randomColor() {
  var hex = Math.floor(Math.random() * 0x1000000).toString(16);
  return "#" + ("000000" + hex).slice(-6);
}

// Poor man's box physics update for time step dt:
function doPhysics(boxes, width, height, dt) {
  for (let i = 0; i < boxes.length; i++) {
    var box = boxes[i];

    // Update positions: 
    box.x += box.dx * dt;
    box.y += box.dy * dt;

    // Handle boundary collisions:
    if (box.x < 0) {
      box.x = 0;
      box.dx = -box.dx;
    } else if (box.x + box.width > width) {
      box.x = width - box.width;
      box.dx = -box.dx;
    }
    if (box.y < 0) {
      box.y = 0;
      box.dy = -box.dy;
    } else if (box.y + box.height > height) {
      box.y = height - box.height;
      box.dy = -box.dy;
    }
  }

  // Handle box collisions:
  for (let i = 0; i < boxes.length; i++) {
    for (let j = i + 1; j < boxes.length; j++) {
      var box1 = boxes[i];
      var box2 = boxes[j];
      var dx = Math.abs(box1.x - box2.x);
      var dy = Math.abs(box1.y - box2.y);

      // Check for overlap:
      if (2 * dx < (box1.width  + box2.width ) &&
          2 * dy < (box1.height + box2.height)) {

        // Swap dx if moving towards each other: 
        if ((box1.x > box2.x) == (box1.dx < box2.dx)) {
          var swap = box1.dx;
          box1.dx = box2.dx;
          box2.dx = swap;
        }

        // Swap dy if moving towards each other: 
        if ((box1.y > box2.y) == (box1.dy < box2.dy)) {
          var swap = box1.dy;
          box1.dy = box2.dy;
          box2.dy = swap;
        }
      }
    }
  }
}

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

// Initialize random boxes:
var boxes = [];
for (var i = 0; i < 10; i++) {
  var box = {
    x: Math.floor(Math.random() * canvas.width),
    y: Math.floor(Math.random() * canvas.height),
    width: 50,
    height: 20,
    dx: (Math.random() - 0.5) * 0.2,
    dy: (Math.random() - 0.5) * 0.2
  };
  boxes.push(box);
}

// Initialize random color and set up interval:
var color = randomColor();
setInterval(function() {
  color = randomColor();
}, 450);

// Update physics at fixed rate:
var last = performance.now();
setInterval(function(time) {
  var now = performance.now();
  doPhysics(boxes, canvas.width, canvas.height, now - last);
  last = now;
}, 50);

// Draw animation frames at optimal frame rate:
function draw(now) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < boxes.length; i++) {
    var box = boxes[i];
    
    // Interpolate position:
    var x = box.x + box.dx * (now - last);
    var y = box.y + box.dy * (now - last);
    
    context.beginPath();
    context.fillStyle = color;
    context.font = "20px fixedsys";
    context.textBaseline = "hanging";
    context.fillText("nerd", x, y);
    context.closePath();
  }
  requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

<canvas id="canvas"></canvas>