pixi实现十几种粒子喷射模拟重力弹射动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：粒子
代码描述：pixi实现十几种粒子喷射模拟重力弹射动画效果代码，点击更换预设就可切换到其他的动画效果。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>

        * {
          -webkit-touch-callout: none; /* iOS Safari */
          -webkit-user-select: none; /* Safari */
          -khtml-user-select: none; /* Konqueror HTML */
          -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
          supported by Chrome, Edge, Opera and Firefox */
        }
        body, html {
          font-family: Roboto, sans-serif;
          padding: 0;
          margin: 0;
          height: 100vh;
          line-height: 21px;
          font-size: 16px;
          overflow: hidden;
        }
        @media only screen and (max-width : 1024px) {
          body, html {
            font-size: 14px;
            line-height: 19px;
          }
          .small {
            font-size: 13px;
          }
          .intro select {
            font-size: 14px;
          }
        }
        input {
          font-family: Fira Sans;
        }
        .small {
          font-size: 14px;
        }
        .red {
          color: #880000;
        }
        .cascade-label {
          position: absolute;
          border: 2px solid black;
          border-radius: 20px;
          width: 30px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: white;
          color: black;
          font-size: 20px;
          z-index: 50;
          visibility: hidden;
          /*display: none;*/
        }
        #help-container {
          position: fixed;
          display: none;
          padding: 5vh;
          background: white;
          border: 3px solid #888;
          height: 100vh;      
          box-sizing: border-box;
          overflow: auto;
          z-index: 500;
        }
        #intro-container {
          display: grid;
          grid-template-rows: 8fr auto 2fr;
          grid-template-columns: minmax(2vw, 1fr) 20fr minmax(2vw, 1fr);
          position: fixed;
          width: 100vw;
          height: 100vh;
        }
        @media only screen and (max-width : 1024px) {
          #intro-container {
            grid-template-columns: 1rem auto 1rem;
            grid-template-rows: 8fr auto 1rem;
          }
        }
        .intro {
          grid-row: 2;
          grid-column: 2;
          border: 3px solid #AAA;
          color: #666;
          background: white;
          width: 100%;
          box-sizing: border-box;
          padding: 2rem 3rem;
        }
        @media only screen and (max-width : 1024px) {
          .intro {
            padding: 1rem;
          }
        }
        .intro button {
          margin: 1rem 0;
          background-color: #800;
          color: white;
          font-size: 1rem;
          height: 2rem;
          line-height: 2rem;
          padding: 0 1rem;
          border-radius: 20px;
          border: 0;
          cursor: pointer;
        }
        #help-button {
          text-shadow: 2px 2px 8px #888888;
          box-shadow: 2px 2px #888888;
          cursor: pointer;
          color: white;
          display: flex;
          justify-content: center; 
          align-items: center;
          position: absolute;
          bottom: 2vh;
          left: 2vh;
          width: 30px;
          height: 30px;
          border-radius: 30px;
          border: 2px solid white;
        }
        .intro select {
          font-size: 18px;
        }
    </style>


</head>


<body>
    <div data-cascade-label='1' class="cascade-label">1</div>
    <div data-cascade-label='2' class="cascade-label">2</div>
    <div data-cascade-label='3' class="cascade-label">3</div>
    <div data-cascade-label='4' class="cascade-label">4</div>
    <div id="pixi"></div>

    <canvas id='container' style='position:absolute;' width='1024' height='768'>
  </canvas>
    <input style="display: none;" id="input" type='text' value='Cascades' class='input' />

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.5.1.5.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zepto.1.2.0.js"></script>

    <script>
        (function ($) {
          $.extend($.fn,
          {
            fadeIn: function (ms)
            {
              if (typeof ms === 'undefined') ms = 500;
        
              $(this).css(
              {
                display: 'block',
                opacity: 0 }).
              animate({
                opacity: 1 },
              ms);
        
              return this;
            },
        
            fadeOut: function (ms)
            {
              if (typeof ms === 'undefined') ms = 500;
        
              $(this).css(
              {
                opacity: 1 }).
              animate({
                opacity: 0 },
              ms, 'linear', function ()
              {
                $(this).css('display', 'none');
              });
        
              return this;
            } });
        
        })(Zepto);
        
        const creator = new URLSearchParams(window.location.search).get('creator');
        const viewer = new URLSearchParams(window.location.search).get('viewer');
        
        const debug = new URLSearchParams(window.location.search).get('debug');
        
        
        const circle64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFyGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIxLTA0LTE1VDE4OjU3OjUxKzAxOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIxLTA0LTE1VDE4OjU3OjUxKzAxOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wNC0xNVQxODo1Nzo1MSswMTowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpjN2ZlN2NjYy1iODgzLTdhNDUtOThiYy0yNDY3OWQyODk2MjAiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo4NTE1OTI1MS1mNGZlLWQxNDAtODNlNy05NjNhNjM1NDJmMDEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3NTYwNzM3MS00YzU1LTllNDItYjk5ZS1lYWNlMDFmMWM2Y2IiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NTYwNzM3MS00YzU1LTllNDItYjk5ZS1lYWNlMDFmMWM2Y2IiIHN0RXZ0OndoZW49IjIwMjEtMDQtMTVUMTg6NTc6NTErMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4xIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YzdmZTdjY2MtYjg4My03YTQ1LTk4YmMtMjQ2NzlkMjg5NjIwIiBzdEV2dDp3aGVuPSIyMDIxLTA0LTE1VDE4OjU3OjUxKzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+aEZZegAAAXtJREFUWIXNl01Kw0AYhp+2/mwroitXgroveATTI9RTSI+gZ1B6ix7AegTRvRRcifQPTJfGxeuiM2YaC5O0JuMLWYRJ5nlIMpPvq0kiZLYKXLsNtIEL4Bw4BppmLAZegUfgAbgHvnLNKsl3NCVdS5oof6bmnqZvfh/8UtKoADibkZmjsEBDUm8DcDY9M2cugYak/h/CbfqrJFYJ3JYAt7nzCXRKhNt0XGZN6T7QBF6AwwJLc51MgDMWS5e6M9CtAI5hdO2JfQI7wBtwUIEAwBQ4AhL7BKIK4RhWBOkriCqE27RdgVYAgZYrcBpA4ATSj/CTxYdYZRJgt+69rORYgXkA9twVGAYQGLoCTwEEnl2BQQCBASxvxe/AfkXwX1txAtxVBAfoGWaQ3/GUxcYXw/LvOAauSoZjGPHPWbZEMmVTWfGWZP+iKA1elmcbk/EG4LHWbEyyrdmNpFkB8Mzc423N3GXoi21OI9LmdM+MfZA2pwNzJHkmLSJQSr4BvSQwCTtLg5kAAAAASUVORK5CYII=";
        const square64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFyGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIxLTA0LTE1VDE4OjU4OjE4KzAxOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIxLTA0LTE1VDE4OjU4OjE4KzAxOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wNC0xNVQxODo1ODoxOCswMTowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDplYmM1MzZkNC1mNTFiLWRjNDItOTRiZC04YjYwOWQ3NDAzNmQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo0NWEzOWIxYi1jMmZhLThjNDItOGQxYy1mNDc5MTAxNGIxZjEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozNTMxOGU1OC05OTliLWY0NDctODA1Ny01MzE4OGRjYTZiMWUiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDozNTMxOGU1OC05OTliLWY0NDctODA1Ny01MzE4OGRjYTZiMWUiIHN0RXZ0OndoZW49IjIwMjEtMDQtMTVUMTg6NTg6MTgrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4xIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZWJjNTM2ZDQtZjUxYi1kYzQyLTk0YmQtOGI2MDlkNzQwMzZkIiBzdEV2dDp3aGVuPSIyMDIxLTA0LTE1VDE4OjU4OjE4KzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+HjIhmQAAADtJREFUWIXt17ERACAMAkDjuf/KsTGuQPM0lHxLdfdK5rxOKWqHhn8AAAAAAAAAAAAAAAAAAOYdVwpwAfjWBEJmmnP5AAAAAElFTkSuQmCC";
        const star64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB4ElEQVRYhcWWu2sWURBHTx4mGB8kGjEoimhrJ6YSjY0PUOJbQWwsbPwPrLSwTWFnY5U2laCWoo2ghYWdoCCWotgIBuORK/eDddnXd9fsDgzs3js7v8PM7p0dUWlhU8CPNglG2zwM3Abm+gS4CFzoC2AXMA9c6gvgHDACHAV29gUQbCxz3RnANLCQuU9uQyrAGWBD5j7AzHYJkC/5eGobUgA2AicL1i93BXAC2FywfhzY3gVAWanDO7E4bLIwC04Bd2Mfi2wmt7YbmCyJ/VkzGzYBE/H6LXCNMIzUefW93dhv9YE6+XcQRoDgW9RH64zwRV3MaP4DMPAr6td1EH+h7snrFQEE36s+/0/Cv9R76liRVhlA8FH1jrraQvyzulChUQkw8MOJL+hjdbYuf9NfskPAmyaB0daAHcC3usCmB9HpIcQZZkQ3BUgZNI1GdJMW7AM+JgCsxh/WyjY0qcD5ir13wIeSvYlGlWvwFbwsecsfqlPqVnW5JOZJXf468Tl1LZf0u3q1IPZ63MtaOENm2gDcyiV8rR6oiN+vvso9c7MNwLOYJEywpcEEq/Fx9X48goM9TQWYjiUME+xsA+G8H1M/xRzbUgBulE2wITwIr1S1oSrZkVjOVPGsHywF6NWAP10TpwyQiq6rAAAAAElFTkSuQmCC";
        const flower64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEnUlEQVRYhcWXe2jWVRjHP9pmuuksy5ZUZKWh1iATy6j+KzIkyyhXS4nQ6F72V0Ut0swILWzgpQuVkVqRGlKBrQuVFyZqrTJKuikz3TRzbs3m5r5xxvel09nv1TcK+sKP9z2X5znPee4HSYV+4yRdI6mfvwER3SBJ70hqlFT5D3hSyKYSSW/qL7RLOiypTdLDkvpL2hKtH5Q0pFABenN0VAG/Ac8BG4E+0E3XD5gNzAJGR1z6AtcXwLcbvbrVkI2BwDRgKjACKAY2AJ8BdwMDPA4MxgF1wHfASUArcDswD7gU+AKYnHlKhlqC+p6V1CLpd0mLPF5jFQfVPy5pr6S53vOopI1e+0HSnZKW6u+oKMQHSiU.........完整代码请登录后点击上方下载按钮下载查看