所属分类:HTML网页，JS语言与代码
转载自http://bbs.51js.com/viewthread.php?tid=87655&extra=page%3D1
在这里看到的：[url=http://lxcww.com/wp/?p=347:176usm87]http://lxcww.com/wp/?p=347[/url:176usm87]
为了能达到预期的效果，最好用Chrome/Safari运行程序 ^_^
基本玩法：
1、按住并滑动鼠标，产生许多粒子。
2、双击鼠标，得到一个质量比粒子大很多的星球和它的卫星粒子。
3、发挥想象力尽情玩吧！
[code]
<p><canvas id="cvs" height="480" width="640">This text is displayed if your browser does not support HTML5 Canvas. <br/>Try using Chrome, Safari, Opera, IE9 or FireFox.</canvas></p>
<div style="font-family: 'book antiqua'; width: 640px;">
<div style="float: right;"><span id="info">X:0,Y:0 </span><button onclick="shadowLength+=shadowLength==10?-10:2,this.innerHTML = '影子='+shadowLength">影子=0</button><button onclick="satelliteNum+=satelliteNum==20?-20:1,this.innerHTML = '卫星='+satelliteNum">卫星=10</button><button onclick="plantMoveable=plantMoveable?false:true;this.innerHTML = '星球可移动='+plantMoveable">星球可移动=false</button><button onclick="initialSpeed=initialSpeed?false:true;this.innerHTML = '粒子初速度='+initialSpeed">粒子初速度=false</button><button onclick="reflectible=reflectible?false:true;this.innerHTML = '边界反射='+reflectible">边界反射=false</button></div>
<div style="float: right;"><button style="background: #ffffff;" onclick="colorIndex+=(colorIndex+1)>=colorPool.length?-colorPool.length+1:1,this.style.background=colorPool[colorIndex],this.innerHTML= '颜色='+colorIndex">颜色=0</button><button onclick="showGrid=showGrid?false:true;this.innerHTML = '显示网格='+showGrid;controller.render(true);">显示网格=false</button><button onclick="eraserMode=eraserMode?false:true;this.innerHTML = '擦除模式='+eraserMode;!eraserMode?(controller.render(true)):null">擦除模式=false</button><button onclick="controller.clearParticle()">清除粒子</button><button onclick="controller.clearPlanet()">清除星球</button><button onclick="controller.clearParticle();controller.clearPlanet()">清除屏幕</button><button onclick="running?(running = false,controller.stop(),this.innerHTML = '运行'):(running = true,controller.run(),this.innerHTML = '停止')">停止</button><button onclick="window.open(cvs.toDataURL());">保存</button></div>
</div>
<p><script src="http://lxcww.com/wp/wp-content/uploads/2010/07/space4.js" type="text/javascript"></script><br />
</p>[/code]
This text is displayed if your browser does not support HTML5 Canvas. Try using Chrome, Safari, Opera, IE9 or FireFox.
X:0,Y:0 影子=0卫星=10星球可移动=false粒子初速度=false边界反射=false
颜色=0显示网格=false擦除模式=false清除粒子清除星球清除屏幕停止保存
提示：您可以先修改部分代码再运行
进阶：
在擦除模式中，可擦除星球和粒子，双击鼠标能改变擦除工具的大小.
按住Ctrl和鼠标键可以持续产生粒子。
打开粒子初速度选项可使粒子获得初速度，其值由鼠标轨迹决定。
粒子初速度与Ctrl功能结合使用，可生成连续的有初速度的粒子，是漂亮曲线的创作方法之一。
按住Shift和鼠标键可以产生水平或垂直方向的粒子。
星球周围的粒子能影响该星球半径大小，粒子数量越多，距离越近，星球半径越大。
点击停止按钮，可以在静止的空间创作，再次点击按钮即可恢复运动。
点击颜色按钮，可以选择下次产生的星球与粒子颜色。
点击保存图片按钮会生成一张png图片，右键可另存为本地图片。
通过创建不同的引力场，观察粒子的运动轨迹，产生各种奇妙图案。
开启星球移动模式后，星球间的引力会起作用，粒子对星球的引力忽略不计。
游戏截图：
在这里看到的：[url=http://lxcww.com/wp/?p=347:176usm87]http://lxcww.com/wp/?p=347[/url:176usm87]
为了能达到预期的效果，最好用Chrome/Safari运行程序 ^_^
基本玩法：
1、按住并滑动鼠标，产生许多粒子。
2、双击鼠标，得到一个质量比粒子大很多的星球和它的卫星粒子。
3、发挥想象力尽情玩吧！
[code]
<p><canvas id="cvs" height="480" width="640">This text is displayed if your browser does not support HTML5 Canvas. <br/>Try using Chrome, Safari, Opera, IE9 or FireFox.</canvas></p>
<div style="font-family: 'book antiqua'; width: 640px;">
<div style="float: right;"><span id="info">X:0,Y:0 </span><button onclick="shadowLength+=shadowLength==10?-10:2,this.innerHTML = '影子='+shadowLength">影子=0</button><button onclick="satelliteNum+=satelliteNum==20?-20:1,this.innerHTML = '卫星='+satelliteNum">卫星=10</button><button onclick="plantMoveable=plantMoveable?false:true;this.innerHTML = '星球可移动='+plantMoveable">星球可移动=false</button><button onclick="initialSpeed=initialSpeed?false:true;this.innerHTML = '粒子初速度='+initialSpeed">粒子初速度=false</button><button onclick="reflectible=reflectible?false:true;this.innerHTML = '边界反射='+reflectible">边界反射=false</button></div>
<div style="float: right;"><button style="background: #ffffff;" onclick="colorIndex+=(colorIndex+1)>=colorPool.length?-colorPool.length+1:1,this.style.background=colorPool[colorIndex],this.innerHTML= '颜色='+colorIndex">颜色=0</button><button onclick="showGrid=showGrid?false:true;this.innerHTML = '显示网格='+showGrid;controller.render(true);">显示网格=false</button><button onclick="eraserMode=eraserMode?false:true;this.innerHTML = '擦除模式='+eraserMode;!eraserMode?(controller.render(true)):null">擦除模式=false</button><button onclick="controller.clearParticle()">清除粒子</button><button onclick="controller.clearPlanet()">清除星球</button><button onclick="controller.clearParticle();controller.clearPlanet()">清除屏幕</button><button onclick="running?(running = false,controller.stop(),this.innerHTML = '运行'):(running = true,controller.run(),this.innerHTML = '停止')">停止</button><button onclick="window.open(cvs.toDataURL());">保存</button></div>
</div>
<p><script src="http://lxcww.com/wp/wp-content/uploads/2010/07/space4.js" type="text/javascript"></script><br />
</p>[/code]
This text is displayed if your browser does not support HTML5 Canvas. Try using Chrome, Safari, Opera, IE9 or FireFox.
X:0,Y:0 影子=0卫星=10星球可移动=false粒子初速度=false边界反射=false
颜色=0显示网格=false擦除模式=false清除粒子清除星球清除屏幕停止保存
提示：您可以先修改部分代码再运行
进阶：
在擦除模式中，可擦除星球和粒子，双击鼠标能改变擦除工具的大小.
按住Ctrl和鼠标键可以持续产生粒子。
打开粒子初速度选项可使粒子获得初速度，其值由鼠标轨迹决定。
粒子初速度与Ctrl功能结合使用，可生成连续的有初速度的粒子，是漂亮曲线的创作方法之一。
按住Shift和鼠标键可以产生水平或垂直方向的粒子。
星球周围的粒子能影响该星球半径大小，粒子数量越多，距离越近，星球半径越大。
点击停止按钮，可以在静止的空间创作，再次点击按钮即可恢复运动。
点击颜色按钮，可以选择下次产生的星球与粒子颜色。
点击保存图片按钮会生成一张png图片，右键可另存为本地图片。
通过创建不同的引力场，观察粒子的运动轨迹，产生各种奇妙图案。
开启星球移动模式后，星球间的引力会起作用，粒子对星球的引力忽略不计。
游戏截图：