John Conway, profesor del Departamento de Matemáticas de la Universidad de Princeton, falleció recientemente debido al nuevo virus de la corona. Era conocido por inventar el juego de la vida.
Lo interesante del juego de la vida es que algunos oscilarán periódicamente, algunos volarán como una nave espacial y algunos dispararán como una ametralladora. Algunos muestran un cierto tipo de ciclo, algunos han evolucionado durante mucho tiempo sin descubrir ninguna ley, y algunos pueden eliminar al maestro después de decenas de millones de pasos y copiar una versión hija.
Reglas del juego de la vida: Cada cuadrícula se considera un cuerpo vivo, con dos estados de muerte (blanco) y nacimiento (negro). Hay 8 formas de vida alrededor de cada forma de vida. Si tres de ellas están vivas, el estado actual está vivo; si dos de ellas están vivas, el estado actual permanece sin cambios; de lo contrario, mueren.
El siguiente código se implementa usando Vue, y se predefinen tres formas iniciales interesantes.También puede hacer clic en la cuadrícula para personalizar la forma de vida inicial.
<html lang="en">
<head>
<meta charset="utf-8" >
<title>生命游戏</title>
<style type="text/css">
#app {
display: flex;
margin: 100px auto;
}
#sideBar {
flex: 3;
text-align: center;
}
#sideBar div{
padding: 10px;
}
#container {
flex: 7;
}
.row:last-child .column {
border-bottom: 1px solid #bbb;
}
.column {
display: inline-block;
width: 15px;
height: 15px;
border-left: 1px solid #bbb;
border-top: 1px solid #bbb;
background: #fff;
}
.column:last-child {
border-right: 1px solid #bbb;
}
.live {
background: #000;
}
</style>
</head>
<body>
<div id="app">
<div id="sideBar">
<div>
<button @click="start()">开始游戏</button>
</div>
<div v-for="graphic in initGraphics">
<button @click="initLife(graphic.coordinate)" v-text="graphic.name"></button>
</div>
</div>
<div id="container">
<div v-for="r in size" class="row">
<span v-for="c in size" @click="giveLife(r - 1, c - 1)" :class="{column : true, live: cells[r - 1][c - 1]}" ></div>
</div>
</div>
</div>
</body>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
// 变化速度
var speed = 100;
// 规格
var size = 35;
// 初始化细胞
function initCells() {
var cells = {
};
for (var i = 0; i < size; i++) {
cells[i] = {
};
for (var j = 0; j < size; j++) {
cells[i][j] = false;
}
}
return cells;
}
var vue = new Vue({
el: '#app',
data: {
size : size,
cells : initCells(),
changes : [],
initGraphics: [],
timer : null,
scope: {
x : {
min: size, max: 0},
y : {
min: size, max: 0},
},
},
methods: {
// 点击格子赋予生命
giveLife(x, y) {
this.cells[x][y] = !this.cells[x][y];
this.updateScope(x, y);
},
// 更新观察范围
updateScope(x, y) {
if (this.scope.x.min > x - 1 && x - 1 >= 0) {
this.scope.x.min = x - 1;
}
if (this.scope.x.max < x + 1 && x + 1 < size) {
this.scope.x.max = x + 1;
}
if (this.scope.y.min > y - 1 && y - 1 >= 0) {
this.scope.y.min = y - 1;
}
if (this.scope.y.max < y + 1 && y + 1 < size) {
this.scope.y.max = y + 1;
}
},
// 开始游戏
start() {
this.timer = setInterval( _ => {
this.compute();
this.transform();
}, speed);
},
// 查找须变幻生命
compute() {
// let f = 0;
for (let i = this.scope.x.min; i <= this.scope.x.max; i++) {
for (let j = this.scope.y.min; j <= this.scope.y.max; j++) {
// 存活邻居数
let count = 0;
// 判断邻居存活状态
this.getNeighbors(i, j).forEach(cell => {
let [x, y] = cell;
if(this.cells[x] !== undefined && this.cells[x][y] !== undefined && this.cells[x][y] === true) {
count += 1;
}
// f += 1;
});
// 死变生
if(count === 3 && this.cells[i][j] === false) {
this.changes.push([i, j]);
}
// 生变死
if (count !== 3 && count !== 2 && this.cells[i][j] === true) {
this.changes.push([i, j]);
}
}
}
// console.log(f);
if (this.changes.length === 0) {
clearInterval(this.timer)
}
},
// 变幻
transform() {
this.scope = {
x : {
min: size, max: 0},
y : {
min: size, max: 0},
};
this.changes.forEach(cell => {
let [x, y] = cell;
this.cells[x][y] = !this.cells[x][y];
this.updateScope(x, y);
});
this.changes = [];
},
// 获取8个邻居坐标
getNeighbors(x, y) {
return [
[x - 1, y - 1],
[x - 1, y],
[x - 1, y + 1],
[x, y - 1],
[x, y + 1],
[x + 1, y - 1],
[x + 1, y],
[x + 1, y + 1]
];
},
// 预定义图形
initLife(graphic) {
this.cells = initCells();
this.changes = graphic;
this.transform();
},
},
});
vue.initGraphics = [
{
name : '滑翔者',
coordinate : [[2,1],[3,2],[1,3],[2,3],[3,3]],
},
{
name : '振荡子 Queen bee shuttle',
coordinate: [[4,1],[5,1],[4,2],[5,2],[4,6],[3,7],[5,7],[2,8],[6,8],[3,9],[4,9],[5,9],[1,10],[2,10],[6,10],[7,10],[4,21],[5,21],[4,22],[5,22]]
},
{
name : '振荡子 Twin bees shuttle',
coordinate: [[3, 1], [3, 2], [4, 1], [4, 2], [10, 1], [10, 2],[11, 1], [11,2], [2, 18], [2, 19], [3, 18], [3, 20], [4, 20], [5, 20],
[5, 18], [5, 19], [9, 18], [9,19], [9,20],[10, 20], [11, 20], [11, 18], [12, 18],[12, 19], [3, 28], [3, 29], [4, 28], [4, 29] ]
},
];
</script>
</html>