《代码本色：用编程模拟自然系统》是一本好书，一定要读一读。用编程模拟自然，是我一直以来都想做的事，也是我编程的热情所在。无奈自己的数学和物理知识越剩越少，所以心有余而力不足。现在这本书来了，学完这本书一定可以让自己过够瘾。
此书的纸板和电子版都很贵，但代码可以在 图灵社区 下载。不过代码是用很少有人熟悉的 processing 语言写的，于是决定自己用 html5 都实现一遍，并将代码托管在GitHub上。
之所以选择html5，是因为不需要额外的配置，只要有一个现代的浏览器就可以观看程序的运行。另一个原因，就是趁机学习一下html5。
先来第一个简单的吧： Bouncing Ball。顾名思义，这是一个弹来弹去的球。
下面是我用html5的实现，拷贝下列代码，保存为后缀为html的网页文件，用浏览器打开即可。
<!doctype html>
<html>
<head>
<title>random walker</title>
<meta charset="utf-8" />
<meta name="author" content="JollyWing(jiqingwu@gmail.com)"/>
<meta name="create" content="2014-12-16 Tue"/>
<style type="text/css">
#screen {border:1px solid #000;}
</style>
<script>
var x = 100;
var y = 100;
var xspeed = 11;
var yspeed = 10;
var timeOut;
var scr, width, height, context;
function initScr(){
scr = document.getElementById('screen');
width = scr.width;
height = scr.height;
context = scr.getContext('2d');
context.strokeStyle="red";
}
function walk(){
x = x + xspeed;
y = y + yspeed;
if(x > width - 2 || x < 2){
xspeed = xspeed * -1;
}
if(y > height - 2 || y < 2){
yspeed = yspeed * -1;
}
console.log(x + ',' + y);
context.arc(x, y, 2, 0, 2*Math.PI);
context.stroke();
timeOut = setTimeout('walk()', 200);
}
function stopWalk(){
clearTimeout(timeOut);
}
</script>
</head>
<body onload='initScr()'>
<p>
<canvas id="screen" width="640" height="480"></canvas>
</p>
<input type="button" value='Start' onclick='walk()'/>
<input type="button" value='Stop' onclick='stopWalk()' />
</body>
</html>
下面是一个面向对象的版本：
<!doctype html>
<html>
<head>
<title>random walker</title>
<meta charset="utf-8" />
<meta name="author" content="JollyWing(jiqingwu@gmail.com)"/>
<meta name="create" content="2014-12-16 Tue"/>
<style type="text/css">
#screen {border:1px solid #000;}
</style>
<script>
var sprite = {
x:100,
y:100,
xspeed:11,
yspeed:10,
radius:2,
move:function(canvasWidth, canvasHeight){
this.x = this.x + this.xspeed;
this.y = this.y + this.yspeed;
if(this.x > canvasWidth - this.radius || this.x < this.radius){
this.xspeed = this.xspeed * -1;
}
if(this.y > canvasHeight - this.radius || this.y < this.radius){
this.yspeed = this.yspeed * -1;
}
},
draw:function(context){
context.arc(this.x, this.y, this.radius, 0, 2*Math.PI);
context.stroke();
}
};
var timeOut;
var scr, width, height, context;
function initScr(){
scr = document.getElementById('screen');
width = scr.width;
height = scr.height;
context = scr.getContext('2d');
context.strokeStyle="red";
}
function walk(){
sprite.move(width, height);
sprite.draw(context);
timeOut = setTimeout('walk()', 200);
}
function stopWalk(){
clearTimeout(timeOut);
}
</script>
</head>
<body onload='initScr()'>
<p>
<canvas id="screen" width="640" height="480"></canvas>
</p>
<input type="button" value='Start' onclick='walk()'/>
<input type="button" value='Stop' onclick='stopWalk()' />
</body>
</html>
运行效果如图：
弹来弹去
如果你喜欢我的文章，可以点 这里 给我打赏，五分一毛也是对我的认同。
