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.........完整代码请登录后点击上方下载按钮下载查看