康威生命游戏（Conway's Game of Life）是一种模拟细胞自动机的游戏，由英国数学家约翰·康威于1970年发明。该游戏以一种简单的规则驱动，并在一个二维的格子世界中进行演化，展示出独特的生命繁衍过程。
在这篇博客中，我们将一起探索如何使用HTML和JavaScript来实现康威生命游戏。
第一步：创建HTML模板
首先，我们需要创建一个基本的HTML模板，以便在浏览器中展现我们的游戏。
<!DOCTYPE html>
<html>
<head>
<title>康威生命游戏</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>康威生命游戏</h1>
<canvas id="gameCanvas"></canvas>
<script src="game.js"></script>
</body>
</html>
在上面的代码中，我们创建了一个canvas元素，用于绘制游戏的界面。我们还引入了一个名为game.js的JavaScript文件，用于处理游戏逻辑。
第二步：编写游戏逻辑
现在，我们将在game.js文件中编写游戏的逻辑。首先，我们需要定义游戏的细胞状态和规则。
// 游戏设置
const width = 800;
const height = 600;
const cellSize = 10;
// 细胞状态定义
const DEAD = 0;
const ALIVE = 1;
// 创建细胞世界
const cells = createCells();
// 创建细胞世界的函数
function createCells() {
const rows = height / cellSize;
const columns = width / cellSize;
const cells = [];
for (let i = 0; i < rows; i++) {
cells[i] = [];
for (let j = 0; j < columns; j++) {
cells[i][j] = DEAD;
}
}
return cells;
}
// 绘制细胞世界的函数
function drawCells() {
const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
for (let i = 0; i < cells.length; i++) {
for (let j = 0; j < cells[i].length; j++) {
const x = j * cellSize;
const y = i * cellSize;
if (cells[i][j] === ALIVE) {
context.fillRect(x, y, cellSize, cellSize);
} else {
context.clearRect(x, y, cellSize, cellSize);
}
}
}
}
// 游戏循环
function gameLoop() {
updateCells();
drawCells();
requestAnimationFrame(gameLoop);
}
// 更新细胞状态
function updateCells() {
// TODO: 实现细胞状态的更新逻辑
}
// 启动游戏循环
gameLoop();
在上面的代码中，我们首先定义了一些游戏的设置，如width（宽度）、height（高度）、cellSize（细胞大小）等。然后，我们定义了细胞的状态，DEAD表示死亡细胞，ALIVE表示存活细胞。
接下来，我们使用createCells函数创建了一个二维数组，表示细胞世界。每个细胞的初始状态都为死亡（DEAD）。
在drawCells函数中，我们使用canvas的getContext方法获取绘图上下文，然后根据细胞状态绘制出细胞世界。
gameLoop函数是游戏的主循环，不断调用updateCells和drawCells函数。在updateCells函数中，我们将会实现细胞状态的更新逻辑。
第三步：实现游戏规则
根据康威生命游戏的规则，细胞的状态会根据其周围的细胞数量变化。
// 更新细胞状态
function updateCells() {
const newCells = createCells();
for (let i = 0; i < cells.length; i++) {
for (let j = 0; j < cells[i].length; j++) {
const neighbors = countNeighbors(i, j);
if (cells[i][j] === ALIVE) {
if (neighbors < 2 || neighbors > 3) {
newCells[i][j] = DEAD;
} else {
newCells[i][j] = ALIVE;
}
} else {
if (neighbors === 3) {
newCells[i][j] = ALIVE;
} else {
newCells[i][j] = DEAD;
}
}
}
}
cells = newCells;
}
// 计算细胞周围存活的细胞数量
function countNeighbors(row, col) {
let count = 0;
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
const newRow = row + i;
const newCol = col + j;
if (newRow >= 0 && newRow < cells.length && newCol >= 0 && newCol < cells[0].length) {
if (i !== 0 || j !== 0) {
count += cells[newRow][newCol];
}
}
}
}
return count;
}
在上面的代码中，我们使用了createCells函数创建了一个与原细胞世界相同大小的新细胞世界newCells。
然后，我们遍历细胞世界中的每个细胞，调用countNeighbors函数计算其周围存活的细胞数量。根据规则，我们更新细胞的存活状态。
countNeighbors函数用于计算细胞周围存活的细胞数量，遍历了细胞的周围8个位置，并根据边界情况进行判断，计算出存活细胞数量。
第四步：加入用户交互
为了让用户可以与游戏进行交互，我们可以添加一些鼠标事件来改变细胞的状态。
// 监听鼠标点击事件，绘制或清除细胞
canvas.addEventListener('mousedown', function(e) {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const col = Math.floor(x / cellSize);
const row = Math.floor(y / cellSize);
cells[row][col] = cells[row][col] === ALIVE ? DEAD : ALIVE;
});
在上面的代码中，我们给canvas元素添加了一个mousedown事件监听器。当用户点击鼠标按钮时，我们首先计算鼠标点击位置所在的行和列，然后根据当前细胞的状态进行切换。
第五步：美化页面样式
通过使用CSS，我们可以为我们的游戏添加一些样式，使其更加吸引人。
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 30px;
margin-bottom: 50px;
}
canvas {
background-color: #fff;
display: block;
margin: 0 auto;
border: 1px solid #ccc;
}
在上面的代码中，我们为body设置了背景颜色、字体，并使用margin属性调整标题的位置。为canvas元素设置了背景色、边框，并居中显示。
总结
在本文中，我们学习了如何使用HTML和JavaScript来创建康威生命游戏。我们首先创建了基本的HTML模板，并使用JavaScript编写游戏逻辑和规则。然后，我们添加了一些用户交互功能，并通过CSS美化了游戏页面的样式。
如果你对细胞自动机或其他计算机科学的主题感兴趣，康威生命游戏是一个很好的起点。通过尝试实现这个游戏，你将会深入了解到自动机的运作原理，并发现其中的乐趣！
评论 (0)