用javascript实现元胞自动机的生命游戏

来源：互联网发布：淘宝图片搜索编辑：程序博客网时间：2024/05/06 16:38

演示效果如下：

源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lifeGame</title>
<style type="text/css">
#canvas1{
margin: 50px auto;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas1" width="400" height="400"></canvas>
</body>
<script type="text/javascript">
var canvas=document.getElementById('canvas1');
var context=canvas.getContext("2d");
for(var i=0;i<41;i++){
context.beginPath();
context.moveTo(i*10,0);
context.lineTo(i*10,400);
context.stroke();
context.moveTo(0, i*10);
context.lineTo(400,i*10);
context.stroke();
context.closePath();
}

var cellObj=function(){
this.alive=[];
for (var i = 0; i < 40; i++) {
this.alive[i]=[];
for (var j = 0; j < 40; j++) {
this.alive[i][j]=0;
}
}
}
cellObj.prototype.init=function(){
for (var i = 1; i < 39; i++) {
for (var j = 1; j < 39; j++) {
if(Math.random()<0.3)
this.alive[i][j]=1;
console.log(this.alive[i][j]);
}
}
}
cellObj.prototype.draw=function(){
for (var i = 0; i < 40; i++) {
for (var j = 0; j < 40; j++) {
if(this.alive[i][j]==1){
context.fillStyle="red";
context.fillRect(i*10+1,j*10+1,8,8);
}else{
context.fillStyle="white";
context.fillRect(i*10+1,j*10+1,8,8);
}
}
}
}
var cell=new cellObj();
cell.init();
cell.draw();

function transform(){
for (var i = 1; i < 39; i++) {
for (var j = 1; j < 39; j++) {
var sum=0;
sum=cell.alive[i][j-1] + cell.alive[i][j+1] + cell.alive[i-1][j] +
cell.alive[i+1][j] + cell.alive[i-1][j-1] + cell.alive[i-1][j+1] +
cell.alive[i+1][j-1] + cell.alive[i+1][j+1];
cell.alive[i][j]=(sum==3) | (sum==2 & cell.alive[i][j]);
}
}
}
function gameloop(){
transform();
cell.draw();
}

setInterval(gameloop,100);

</script>
</html>

0 0