Как заставить каждый квадрат (div) падать (как гравитация) после его создания

ProgramBox

Как заставить каждый квадрат (div) падать (как гравитация) после его создания

Post author:admin
Запись опубликована:8 марта, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

внутри squareGenerator() функции я создаю желтый квадрат каждые 1000 миллисекунд. Но я хочу, чтобы каждый квадрат падал с верхней части экрана до самого низа, я хочу сделать это fallingFunction(), примерно так, как вы видите в видеоигре «Guitar Hero», где ноты падают. Спасибо.

 //Square Generation
var allSquares = [];
var idGenerated = 0;

function squareGenerator() {
  var newSquare = $(document.createElement("div"));

  newSquare.css({
    "background-color": "yellow",
    "height": "200px",
    "width": "200px",
    "position": "absolute"
  });


  newSquare.attr('id', idGenerated);
  idGenerated  ;
  allSquares.push(newSquare);


  $('.father').append(newSquare);
}

var squareGenerationInterval = setInterval(squareGenerator, 1000);



//Square Falling

function fallingFunction() {

  $("#"   idGenerated).css({"margin-top": "100px",});
}
var squareGenerationInterval = setInterval(fallingFunction, 1000);

 body {
  padding: 0;
  margin: 0;
}

.father {
  width: 100%;
  height: 1000px;
  background-color: lightblue;
}

 <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>NovaNote</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="father">

  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="function.js" charset="utf-8"></script>
</body>

</html>

Ответ №1:

Это просто, вы можете использовать jQuery Animate. Хотя для работы код необходимо настроить в других местах.

Сначала давайте добавим параметр, к fallingFunction которому is square .

 function fallingFunction(square) {
  square.animate(
    // Styles
    {"margin-top": "100px"},

    // Speed in miliseconds
    5000);
}

Это в основном просто анимирует margin-top to 100px .

Во-вторых, удалите interval вызовы that fallingFunction .

Итак, удалите var squareGenerationInterval = setInterval(fallingFunction, 1000); .

Теперь вам нужно будет отредактировать свои квадратные идентификаторы, потому #0 что это не принято, попробуйте что-то вроде #square0 .

newSquare.attr('id', 'square' idGenerated);

И, наконец, вы можете вызвать fallingFunction после $('.father').append(newSquare); передачи newSquare объекта. Назовите это так: fallingFunction(newSquare); .

Итак, вот как должен выглядеть ваш код:

 //Square Generation
var allSquares = [];
var idGenerated = 0;

function squareGenerator() {
  var newSquare = $(document.createElement("div"));

  newSquare.css({
    "background-color": "yellow",
    "height": "200px",
    "width": "200px",
    "position": "absolute"
  });


  newSquare.attr('id', 'square'   idGenerated);
  idGenerated  ;
  allSquares.push(newSquare);


  $('.father').append(newSquare);
  fallingFunction(newSquare);
}

var squareGenerationInterval = setInterval(squareGenerator, 1000);



//Square Falling

function fallingFunction(sqaure) {
  sqaure.animate(
    // Styles
    {"margin-top": "100px"},

    // Speed in miliseconds
    5000);
}

 body {
  padding: 0;
  margin: 0;
}

.father {
  width: 100%;
  height: 1000px;
  background-color: lightblue;
}

 <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>NovaNote</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="father">

  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="function.js" charset="utf-8"></script>
</body>

</html>

1. Эй, спасибо, но это не работает, почему idk… возможно, мои идентификаторы не обнаруживаются, idk

2. Хорошо @WiseEye Я исправил это и протестировал, дайте мне знать, если это вам поможет.

Ответ №2:

Для достижения этой цели я использовал ключевые кадры CSS и некоторые дополнительные CSS.

 //Square Generation
var allSquares = [];
var idGenerated = 0;

function squareGenerator() {
    // if (idGenerated < 5) return false;
  var newSquare = $(document.createElement("div"));

  newSquare.css({
    "background-color": idGenerated % 2 === 0 ? 'green' : 'blue',
    "height": "200px",
    "width": "200px",
    "position": "absolute"
  });

  newSquare.attr('class', 'sq'); // add class
  newSquare.attr('id', idGenerated);
  idGenerated  ;
  allSquares.push(newSquare);


  $('.father').append(newSquare);
}

var squareGenerationInterval = setInterval(squareGenerator, 1000);


// comment out not needed
//Square Falling

// function fallingFunction() {

//   $("#"   idGenerated).css({"margin-top": "100px",});
// }
// var squareGenerationInterval = setInterval(fallingFunction, 1000);

 body {
  padding: 0;
  margin: 0;
}

.father {
  width: 100%;
  height: 1000px;
  background-color: lightblue;
}

@keyframes slidein {
  from {
    top: 0;
  }

  to {
    top: calc(100% - 200px);
  }
}

div.sq {
    animation-name: slidein;
    animation-duration: 2s;
    animation-iteration-count: 1;
    top: calc(100% - 200px);
}

 <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>NovaNote</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="father">

  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="function.js" charset="utf-8"></script>
</body>
</html>

Ответ №3:

http://jsfiddle.net/apHLu/4/

Используйте это в качестве ссылки, каждый раз, когда нажимается текст, div падает..
Сохраняя это в качестве ссылки, используйте setTimeout функцию в течение нескольких секунд (может быть 1-2 секунды) для вашей sqaureGenerator() функции и поместите fallingFunction() в качестве функции обратного вызова ссылочный код, чтобы объекты падали

Ответ №4:

Я бы использовал переход. Я бы не стал использовать jQuery в наши дни, поскольку теперь легко сделать почти все так же легко с помощью необработанного JavaScript. Включая небольшую библиотеку для повторного использования, вот полный пример того, как может выглядеть ваш код:

 //<![CDATA[
/* js/external.js */
let get, post, doc, htm, bod, nav, M, I, mobile, beacon, S, Q, hC, aC, rC, tC, shuffle, rand, DropBox;
addEventListener('load', ()=>{
get = (url, func, responseType = 'json', context = null)=>{
  const x = new XMLHttpRequest;
  const c = context || x;
  x.open('GET', url); x.responseType = responseType;
  x.onload = ()=>{
    if(func)func.call(c, x.response);
  }
  x.onerror = e=>{
    if(func)func.call(c, {xhrErrorEvent:e});
  }
  x.send();
  return x;
}
post = function(url, send, func, responseType ='json', context = null){
  const x = new XMLHttpRequest;
  if(typeof send === 'object' amp;amp; send amp;amp; !(send instanceof Array)){
    const c = context || x;
    x.open('POST', url); x.responseType = responseType;
    x.onload = ()=>{
      if(func)func.call(c, x.response);
    }
    x.onerror = e=>{
      if(func)func.call(c, {xhrErrorEvent:e});
    }
    let d;
    if(send instanceof FormData){
      d = send;
    }
    else{
      let s;
      d = new FormData;
      for(let k in send){
        s = send[k];
        if(typeof s === 'object' amp;amp; s)s = JSON.stringify(s);
        d.append(k, s);
      }
    }
    x.send(d);
  }
  else{
    throw new Error('send argument must be an Object');
  }
  return x;
}
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
beacon = function(url, send){
  let r = false;
  if(typeof send === 'object' amp;amp; send amp;amp; !(send instanceof Array)){
    let d;
    if(send instanceof FormData){
      d = send;
    }
    else{
      let s;
      d = new FormData;
      for(let k in send){
        s = send[k];
        if(typeof s === 'object' amp;amp; s)s = JSON.stringify(s);
        d.append(k, s);
      }
    }
    r = nav.sendBeacon(url, d);
  }
  else{
    throw new Error('send argument must be an Object');
  }
  return r;
}
S = (selector, within)=>{
  let w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{
  let w = within || doc;
  return w.querySelectorAll(selector);
}
hC = function(node, className){
  return node.classList.contains(className);
}
aC = function(){
  const a = [].slice.call(arguments), n = a.shift();
  n.classList.add(...a);
  return aC;
}
rC = function(){
  const a = [].slice.call(arguments), n = a.shift();
  n.classList.remove(...a);
  return rC;
}
tC = function(){
  const a = [].slice.call(arguments), n = a.shift();
  n.classList.toggle(...a);
  return tC;
}
shuffle = array=>{
  let a = array.slice(), i = a.length, n, h;
  while(i){
    n = Math.floor(Math.random()*i--); h = a[i]; a[i] = a[n]; a[n] = h;
  }
  return a;
}
rand = (min, max)=>{
  let mn = min, mx = max;
  if(mx === undefined){
    mx = mn; mn = 0;
  }
  return mn Math.floor(Math.random()*(mx-mn 1));
}
DropBox = function(width, height, backgroundColor){
  this.box = M('div');
  let bs = this.box.style, w, h;
  w = isNaN(width) ? width : width 'px';
  h = isNaN(height) ? height : height 'px';
  bs.width = w; bs.height = h; bs.position = 'absolute'; 
  bs.backgroundColor = backgroundColor;
  this.setPosition = (left = 0, top = 0)=>{
    bs.left = isNaN(left) ? left : left 'px';
    bs.top = isNaN(top) ? top : top 'px';
    return this;
  }
  this.setPosition();
  this.moveTo = (left = null, top = null, transition = 'left 1s ease-in-out, top 1s ease-in-out')=>{
    let l = isNaN(left) || left === null ? left : left 'px';
    let t = isNaN(top) || top === null ? top : top 'px';
    bs.transition = transition;;
    if(l === null amp;amp; t === null){
      bs.top = 'calc(100% - ' h ')';
    }
    else{
      bs.left = l; bs.top = t;
    }
    return this;
  }
}
// magic happens under here
const stage = I('stage'), yellow = new DropBox(50, 50, '#cc0');
const red = new DropBox('20px', '30', '#c00'), blue = new DropBox(25, 25, '#00c');
yellow.setPosition(50, 100); red.setPosition('calc(50% - 10px)');
stage.appendChild(yellow.box); stage.appendChild(red.box); 
stage.appendChild(blue.box);
setTimeout(()=>{
  red.moveTo(50, 100);
  setTimeout(()=>{
    yellow.moveTo();
    setTimeout(()=>{
      blue.moveTo();
    }, 250);
  }, 1000);
}, 500);
}); // end load

 /* css/external.css */
*{
  box-sizing:border-box; font:22px Tahoma, Geneva, sans-serif; color:#000; padding:0; margin:0; overflow:hidden;
}
html,body,#stage{
  width:100%; height:100%;
}
#stage{
  position:relative; background:#add8e6; overflow-y:auto;
}

 <!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div id='stage'></div>
</body>
</html>

Вы можете начать чтение JavaScript по адресу // magic happens under here . Конечно, в коде используется DropBox конструктор, который я создал для вашего повторного использования. Кстати, если вам требуется больше универсальности, я бы сделал анимацию canvas .