canvas模拟细菌粒子点击繁殖碰撞效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：canvas模拟细菌粒子点击繁殖碰撞效果代码，点击左键可新增繁殖细菌，可设置重力、深度等开关。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
    <head>
                <meta charset="utf-8">



                <style type="text/css"> html{color:#000;background:#222222;}
a{cursor:pointer;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
/* h1,h2,h3,h4,h5,h6{font-size:100%;} */
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline-style:none;outline-width:0pt;}
legend{color:#000;}
a:focus,object,h1,h2,h3,h4,h5,h6{-moz-outline-style: none; border:0px;}
strong {font-weight: bold;}


body, html {
        background-color: #111;
}

#world {
        background: #000;
        border: 6px solid #222222;
        border-radius: 2px;
        box-shadow: 0 0 2px #000;
        -o-box-shadow: 0 0 2px #000;
        -moz-box-shadow: 0 0 2px #000;
        -webkit-box-shadow: 0 0 2px #000;
}

#instructions {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 11px;
        color: #999;
        display: none;
        text-align: center;
        background: rgba(20,20,20,0.6);
        letter-spacing: 0.09em;
        width: 912px;
        padding: 10px 0;
        z-index: 6;
}
        #instructions strong {
                color: #ddd;
                font-weight: normal;
        }

#options {
        color: #fff;
        position: absolute;
        display: none;
}

        #options .switch {
                cursor: pointer;
                color: #999;
                background: #222;
                height: 12px;
                display: block;
                float: left;
                margin: 2px 10px 2px 2px;
                padding: 5px;
                font-family: Helvetica, Arial, sans-serif;
                font-size: 11px;
                text-decoration: none;
                text-transform: uppercase;
                text-shadow: 0 0 1px #333;
                border-radius: 2px;
                transition: all .11s ease-out;
                -o-transition: all .11s ease-out;
                -moz-transition: all .11s ease-out;
                -webkit-transition: all .11s ease-out;
                box-shadow: 0 0 2px #000;
                -o-box-shadow: 0 0 2px #000;
                -moz-box-shadow: 0 0 2px #000;
                -webkit-box-shadow: 0 0 2px #000;
        }
        
        #options .switch.on {
                background: #761d36;
                color: #ddd;
        }
        
        #options .switch:hover {
                background: #9f123a;
                color: #eee;
        }
        
                #options .switch span {
                        text-align: center;
                        font-weight: bold;
                        padding: 3px 0 3px 0;
                }
                
                







                </style>




    </head>
    <body>
                <div id="panel">

                        <p><strong>Mouse down</strong> to create bacteria.<br/><strong>Mouse down</strong> + <strong>Space</strong> to create turbines.</p>
                                                                </div>
                <div id="options"><a id="gravity-switch" class="switch" title="Toggles gravity ON/OFF in the physics world." href="#">Gravity <span>OFF</span></a><a id="depth-switch" class="switch" title="Toggles depth trails ON/OFF. Performance killer." href="#">Depth <span>OFF</span></a><a id="turbines-switch" class="switch" title="Toggles turbine sucture ON/OFF." href="#">Turbines <span>OFF</span></a><a id="infection-switch" class="switch" title="When ON this causes bacteria to become infected by turbines and carry that infection to their siblings." href="#">Infection <span>OFF</span></a><a id="reset-button" class="switch" title="Removes all bacteria and turbines." href="#">Reset</a></div><div id="instructions"><strong>Mouse Down</strong> to create bacteria. <strong>Mouse Down + Space</strong> to create turbines.</div>
<canvas id="world"><p class="noCanvas">You need a <a href="https://www.google.com/chrome">modern browser</a> to view this.</p></canvas>

<script >
    /**
 * 
 */
var UserProfile = {
        
        /** */
        UA_ANDROID: 'android',
        UA_IPHONE: 'iphone',
        UA_IPAD: 'ipad',
        
        isOnline: naviga.........完整代码请登录后点击上方下载按钮下载查看