腳本創建的圓圈的隨機移動-有解無憂

我有一個用圓圈創建 div 的函式。

現在它們都已創建并出現在頁面的開頭并按順序走得更遠。

接下來，我需要每個圓圈出現在隨機位置。我這樣做了。

現在我需要他們所有人在整個頁面上隨機移動，我對此有困難。

這是一個示例，說明一切如何適用于頁面上已經存在的一個元素。

https://jsfiddle.net/quej8wko/

但是當我添加此代碼時，我創建的所有圓圈都不會移動。

我收到一個錯誤：

"message": "Uncaught TypeError: Cannot set properties of null (setting 'willChange')",

這可能是因為最初頁面上沒有圓圈。如何連接代碼以使所有創建的圓圈移動？

//creating circles

var widthHeight = 40; // <-- circle width
var margin = 20; // <-- margin - is it necessary ?
var delta = widthHeight   margin;

function createDiv(id, color) {
  let div = document.createElement('div');
  var currentTop = 0;
  var documentHeight = document.documentElement.clientHeight;
  var documentWidth = document.documentElement.clientWidth;
  div.setAttribute('class', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  }
  else {
   div.style.backgroundColor = color; 
  }
  div.classList.add("circle");
  div.classList.add("animation");
  
  // Get the random positions minus the delta
  currentTop = Math.floor(Math.random() * documentHeight) - delta;
  currentLeft = Math.floor(Math.random() * documentWidth) - delta;
  
  // Keep the positions between -20px and the current positions
  var limitedTop = Math.max(margin * -1, currentTop);
  var limitedLeft = Math.max(margin * -1, currentLeft);

  div.style.top = limitedTop   "px";
  div.style.left = limitedLeft   "px";
  document.body.appendChild(div);
}
    
let i = 0;

const oneSecond = 1000;

setInterval(() => {
  i  = 1;
  createDiv(`circle${i}`)
}, oneSecond);

//move circles

function RandomObjectMover(obj, container) {
    this.$object = obj;
  this.$container = container;
  this.container_is_window = container === window;
  this.pixels_per_second = 250;
  this.current_position = { x: 0, y: 0 };
  this.is_running = false;
}

// Set the speed of movement in Pixels per Second.
RandomObjectMover.prototype.setSpeed = function(pxPerSec) {
    this.pixels_per_second = pxPerSec;
}

RandomObjectMover.prototype._getContainerDimensions = function() {
   if (this.$container === window) {
       return { 'height' : this.$container.innerHeight, 'width' : this.$container.innerWidth };
   } else {
       return { 'height' : this.$container.clientHeight, 'width' : this.$container.clientWidth };
   }
}

RandomObjectMover.prototype._generateNewPosition = function() {

    // Get container dimensions minus div size
  var containerSize = this._getContainerDimensions();
    var availableHeight = containerSize.height - this.$object.clientHeight;
  var availableWidth = containerSize.width - this.$object.clientHeight;
    
  // Pick a random place in the space
  var y = Math.floor(Math.random() * availableHeight);
  var x = Math.floor(Math.random() * availableWidth);
    
  return { x: x, y: y };    
}

RandomObjectMover.prototype._calcDelta = function(a, b) {
    var dx   = a.x - b.x;         
  var dy   = a.y - b.y;         
  var dist = Math.sqrt( dx*dx   dy*dy ); 
  return dist;
}

RandomObjectMover.prototype._moveOnce = function() {
        // Pick a new spot on the page
    var next = this._generateNewPosition();
    
    // How far do we have to move?
    var delta = this._calcDelta(this.current_position, next);
    
        // Speed of this transition, rounded to 2DP
        var speed = Math.round((delta / this.pixels_per_second) * 100) / 100;
    
    //console.log(this.current_position, next, delta, speed);
          
    this.$object.style.transition='transform ' speed 's linear';
    this.$object.style.transform='translate3d(' next.x 'px, ' next.y 'px, 0)';
    
    // Save this new position ready for the next call.
    this.current_position = next;
  
};

RandomObjectMover.prototype.start = function() {

    if (this.is_running) {
    return;
  }

    // Make sure our object has the right css set
  this.$object.willChange = 'transform';
  this.$object.pointerEvents = 'auto';
    
  this.boundEvent = this._moveOnce.bind(this)
  
  // Bind callback to keep things moving
  this.$object.addEventListener('transitionend', this.boundEvent);
  
  // Start it moving
  this._moveOnce();
  
  this.is_running = true;
}

RandomObjectMover.prototype.stop = function() {

    if (!this.is_running) {
    return;
  }
  
  this.$object.removeEventListener('transitionend', this.boundEvent);
  
    this.is_running = false;
}


// Init it
var x = new RandomObjectMover(document.querySelector(".circle"), window);

// Start it off

x.start();

.circle {
  clip-path: circle(50%);
  height: 40px;
  width: 40px;
  margin: 20px;
  position: absolute;
}

uj5u.com熱心網友回復：

我已經修改了按您預期作業的代碼段。

有一個錯誤，您只初始化和創建了一次物件實體，而您在setInterval函式內部創建的任何 div 元素都沒有被實體化。

我認為您只是從這個示例專案開始使用 JavaScript。

以下是幾點建議：

學習除錯代碼。您應該通過使用debugger陳述句來使用開發工具，該陳述句將您帶到源代碼以在運行時分析變數范圍和堆疊。console.log在少數情況下也有幫助。
我可以看到很多令人困惑的命名約定（您已將 create div 引數命名為 id，但使用該 id 創建了一個 div 類）
嘗試使用 ES6 特性（在 JS 中撰寫 OOP 時，類語法非常好，盡管它只是原型的語法糖）

//creating circles

var widthHeight = 40; // <-- circle width
var margin = 20; // <-- margin - is it necessary ?
var delta = widthHeight   margin;

function createAndInitializeDivObject(id, color) {
  let div = document.createElement('div');
  var currentTop = 0;
  var documentHeight = document.documentElement.clientHeight;
  var documentWidth = document.documentElement.clientWidth;
  div.setAttribute('class', id);
  if (color === undefined) {
    let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547'];
    div.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  }
  else {
   div.style.backgroundColor = color; 
  }
  div.classList.add("circle");
  div.classList.add("animation");
  
  // Get the random positions minus the delta
  currentTop = Math.floor(Math.random() * documentHeight) - delta;
  currentLeft = Math.floor(Math.random() * documentWidth) - delta;
  
  // Keep the positions between -20px and the current positions
  var limitedTop = Math.max(margin * -1, currentTop);
  var limitedLeft = Math.max(margin * -1, currentLeft);

  div.style.top = limitedTop   "px";
  div.style.left = limitedLeft   "px";
  document.body.appendChild(div);

  var x = new RandomObjectMover(document.querySelector(`.${id}`), window);
  x.start();
}
    
let i = 0;

const oneSecond = 1000;



setInterval(() => {
  i  = 1;
  createAndInitializeDivObject(`circle${i}`)
}, oneSecond);

//move circles

function RandomObjectMover(obj, container) {

    this.$object = obj;
  this.$container = container;
  this.container_is_window = container === window;
  this.pixels_per_second = 250;
  this.current_position = { x: 0, y: 0 };
  this.is_running = false;
}

// Set the speed of movement in Pixels per Second.
RandomObjectMover.prototype.setSpeed = function(pxPerSec) {
    this.pixels_per_second = pxPerSec;
}

RandomObjectMover.prototype._getContainerDimensions = function() {
   if (this.$container === window) {
       return { 'height' : this.$container.innerHeight, 'width' : this.$container.innerWidth };
   } else {
       return { 'height' : this.$container.clientHeight, 'width' : this.$container.clientWidth };
   }
}

RandomObjectMover.prototype._generateNewPosition = function() {

    // Get container dimensions minus div size
  var containerSize = this._getContainerDimensions();
    var availableHeight = containerSize.height - this.$object.clientHeight;
  var availableWidth = containerSize.width - this.$object.clientHeight;
    
  // Pick a random place in the space
  var y = Math.floor(Math.random() * availableHeight);
  var x = Math.floor(Math.random() * availableWidth);
    
  return { x: x, y: y };    
}

RandomObjectMover.prototype._calcDelta = function(a, b) {
    var dx   = a.x - b.x;         
  var dy   = a.y - b.y;         
  var dist = Math.sqrt( dx*dx   dy*dy ); 
  return dist;
}

RandomObjectMover.prototype._moveOnce = function() {
        // Pick a new spot on the page
    var next = this._generateNewPosition();
    
    // How far do we have to move?
    var delta = this._calcDelta(this.current_position, next);
    
        // Speed of this transition, rounded to 2DP
        var speed = Math.round((delta / this.pixels_per_second) * 100) / 100;
    
    //console.log(this.current_position, next, delta, speed);
          
    this.$object.style.transition='transform ' speed 's linear';
    this.$object.style.transform='translate3d(' next.x 'px, ' next.y 'px, 0)';
    
    // Save this new position ready for the next call.
    this.current_position = next;
  
};

RandomObjectMover.prototype.start = function() {

    if (this.is_running) {
    return;
  }

    // Make sure our object has the right css set
  this.$object.willChange = 'transform';
  this.$object.pointerEvents = 'auto';
    
  this.boundEvent = this._moveOnce.bind(this)
  
  // Bind callback to keep things moving
  this.$object.addEventListener('transitionend', this.boundEvent);
  
  // Start it moving
  this._moveOnce();
  
  this.is_running = true;
}

RandomObjectMover.prototype.stop = function() {

    if (!this.is_running) {
    return;
  }
  
  this.$object.removeEventListener('transitionend', this.boundEvent);
  
    this.is_running = false;
}


// Init it
var x = new RandomObjectMover(document.querySelector(".circle"), window);

// Start it off

x.start();

.circle {
    width: 35px;
    height: 35px;
    border-radius: 35px;
    background-color: #ffffff;
    border: 3px solid purple;
    position: absolute;
  }

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="circle"></div>
        <script src="app.js"></script>
    </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/441419.html

標籤：javascript html css

上一篇：如何在ACF背景影像上設定半透明顏色？

下一篇：如何使用字串格式回圈并列印行號？