-
Notifications
You must be signed in to change notification settings - Fork 9
/
lifegame.html
117 lines (107 loc) · 3.98 KB
/
lifegame.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<title>Life Game</title>
<meta charset='utf-8'>
<script type="text/javascript" src="lifegame.js"></script>
</head>
<body>
<center>
<h2>生命游戏</h2>
<canvas id="canvas" width="602" height="602"></canvas>
<script type="text/javascript" src="fabric.min.js"></script>
<div style="margin:20px 50px 20px;padding-bottom:10px;border-bottom:1px solid #c1c1c1;text-align:center;width:502px">
<input type="button" value="重新开始" style="width:70px;" onclick="javascript:restartLifeGame()">
大小：<input type="text" value="50" id="lifeSize" style="width:50px;margin-right:20px;">
剩余生命：<span id="remainLifes" style="display:inline-block;width:50px;">0</span>
进化次数：<span id="period" style="display:inline-block;width:40px;">0</span>
</div>
</center>
<script>
var life;
var lifeTimer = 0;
var canvas = new fabric.Canvas('canvas');
canvas.renderOnAddRemove = false;
var lifes = [];
restartLifeGame();
function initLifeGame()
{
var rect = new fabric.Rect({
top : 0,
left : 0,
width : 600,
height : 600,
fill : 'white',
selectable: false,
strokeWidth: 1,
stroke: '#C1C1C1'
});
canvas.add(rect);
canvas.renderAll();
}
function restartLifeGame()
{
var size = parseInt(document.getElementById('lifeSize').value);
if (isNaN(size) || size <= 0) {
alert('请输入正确数值');
return;
}
if (lifeTimer != 0)
clearInterval(lifeTimer);
canvas.clear();
initLifeGame();
beginLife(size, size);
}
function beginLife(row,col)
{
life = new LifeGame(row,col);
life.initRandom(20);
var width = 600/life.col;
var height = 600/life.row;
for(var i=0;i<life.row;i++) {
lifes[i] = [];
for(var j=0;j<life.col;j++) {
lifes[i][j] = new fabric.Rect({
top: i*height,
left: j*width,
width: width,
height: height,
fill: 'black',
selectable: false,
stroke: 'rgba(100,200,200,0.5)',
strokeWidth: 1,
visible: false
});
canvas.add(lifes[i][j]);
}
}
refreshLife();
lifeTimer = setInterval(refreshLife, 300);
}
function refreshLife()
{
drawLife();
document.getElementById('remainLifes').innerText = life.remainLifes;
document.getElementById('period').innerText = life.period;
life.nextAround();
}
function drawLife()
{
for(var i=0;i<life.row;i++) {
for(var j=0;j<life.col;j++) {
if (life.isAlive(i,j)) {
lifes[i][j].visible = true;
} else {
lifes[i][j].visible = false;
}
}
}
canvas.renderAll();
}
function pauseLife()
{
clearInterval(lifeTimer);
}
</script>
</body>
</html>