如何在Javascript中的頁面上隨機移動兩個不同的文本元素
[英]How to have two different text elements moving randomly on a page in Javascript
問題描述
所以我一直在閱讀這篇文章，我發現它最接近我想要的。 基本上，我希望兩個不同的文本元素（兩個不同的詞）在頁面上隨機移動，並在它們接觸時相互彈跳。
我試圖編輯代碼，使其為黑色並且只有一個文本元素。 但是，我如何還包含隨機移動的第二個文本元素（不同的單詞）？
另外如何將其更改為 Roboto Mono 字體？
// Return random RGB color string: function randomColor() { var hex = Math.floor(Math.random() * 0x1000000).toString(16); return "#" + ("000000" + hex).slice(0); } // 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 < 1; 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.3, dy: (Math.random() - 0.5) * 0.3 }; 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 = "40px 'Roboto Mono'"; context.textBaseline = "hanging"; context.fillText("motion", x, y); context.closePath(); } requestAnimationFrame(draw); } requestAnimationFrame(draw); canvas.width = window.innerWidth; canvas.height = window.innerHeight;
<!DOCTYPE html> <html> <body> <head> <link rel="stylesheet" href="test.css"> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> </head> <canvas id="canvas"></canvas> <script src="test.js"></script> </body> </html>
1 個解決方案
解決方案1
1 已采納 2019-12-31 20:49:14
多個文本框很容易：
將初始化框部分更改為包含多個。
// Initialize random boxes:
var boxes = [];
var boxCount = 2
for (var i = 0; i < boxCount; i++) {
其次你的隨機顏色有缺陷，試試這個：
function randomColor() {
var hex = Math.floor(Math.random() * 0x1000000).toString(16);
return "#" + ("000000" + hex).substr(hex.length);
}
我不認為機器人在畫布元素中可用。 （我可能是錯的）雖然monospace是可用的。
編輯
如果你想要不同的詞，你可以為它們使用另一個數組：
var words = ['motion','designer']
for (var i = 0; i < words.length; i++) {
創建框時使用 words 數組。
如果您想讓單詞發生沖突，則無法對框的大小進行硬編碼。 高度應該至少是字體高度40px ，如果你想獲得文本框的寬度，有一個上下文幫助功能：
box.width = context.measureText(words[i]).width;
請參閱片段以了解用法：
// Return random RGB color string: function randomColor() { var hex = Math.floor(Math.random() * 0x1000000).toString(16); return "#" + ("000000" + hex).substr(hex.length); } // 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 = []; var words = ["designer","motion","hi"] for (var i = 0; i < words.length; i++) { var box = { x: Math.floor(Math.random() * canvas.width), y: Math.floor(Math.random() * canvas.height), width: 50, // Will be dynamic height: 42, dx: (Math.random() - 0.5) * 0.3, dy: (Math.random() - 0.5) * 0.3 }; 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); box.width = context.measureText(words[i]).width; context.beginPath(); context.fillStyle = color; context.font = "normal 40px monospace"; context.textBaseline = "hanging"; context.fillText(words[i], x, y); context.closePath(); } requestAnimationFrame(draw); } requestAnimationFrame(draw); canvas.width = window.innerWidth; canvas.height = window.innerHeight;
<!DOCTYPE html> <html> <body> <head> <link rel="stylesheet" href="test.css"> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> </head> <canvas id="canvas"></canvas> <script src="test.js"></script> </body> </html>
Javascript onclick，如何為某些元素設置不同的alpha？
[英]Javascript onclick, how to have different alpha for some elements?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.