生命游戏网页版

panmuge

已于 2023-11-26 11:23:22 修改

阅读量973

点赞数 7

文章标签： html5 javascript 游戏

于 2023-11-26 11:21:39 首次发布

本文链接：https://blog.csdn.net/panmuge/article/details/134625340

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、生命游戏是什么？
二、生命游戏有什么用
- 代码如下（示例）：

一、生命游戏是什么？

在这个游戏中，我们可以看到一个由许多小方块组成的二维世界。每个小方块被称为“细胞”，并且每个细胞可以是“活的”或者“死的”。
在游戏开始时，我们可以随机地把一些细胞设置为活的，然后让游戏开始。在每个“回合”中，游戏会根据一些规则更新每个细胞的状态。这些规则非常简单：
如果一个细胞周围有少于两个活细胞，它会因为孤独而死亡。
如果一个细胞周围有两个或三个活细胞，它会继续存活。
如果一个细胞周围有超过三个活细胞，它会因为过于拥挤而死亡。
如果一个死细胞周围有恰好三个活细胞，它会因为繁殖而变成一个活细胞。

二、生命游戏有什么用

生命游戏虽然看似简单，但是它可以帮助我们理解许多复杂的自然现象。例如，一些结构可以模拟自然界中的物理过程，比如火、水、风等等。另外，生命游戏也可以应用于图像处理、密码学等领域。
首先，生命游戏帮助我们理解自然界中的一些规律。例如，游戏中的一些结构可以模拟自然界中的物理过程，如火、水、气体等。生命游戏的规则和演化过程也可以帮助我们理解生物学和生态学中的一些概念，例如生命的起源、生物的进化等等。
在这里插入图片描述
其次，生命游戏可以帮助我们培养创造力和思维能力。设计和演化不同的生命游戏结构需要我们进行不断地思考和尝试。通过这个过程，我们可以培养出创造力和思维能力，同时也能提高我们的问题解决能力。
最后，生命游戏也可以应用于计算机科学和数学领域。生命游戏的规则和演化过程与图论、计算理论等领域有着紧密的联系，可以帮助我们深入理解这些概念。另外，生命游戏也可以作为一种算法来解决一些实际问题，如图像压缩、数据加密等。

代码如下（示例）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game of Life</title>
    <style>
        #canvas {
            background-color: black;
        }
    </style>
</head>
<body>
    <h2>游戏按键</h2>
    <span>
        <p>空格停止游戏,按E可以编辑,按C键清空</p>
    </span>
   
    <canvas id="canvas"></canvas>
    <script>
        // 定义生命游戏的宽和高
        const WIDTH = 200;
        const HEIGHT = 120;
        const CELL_SIZE = 10;

        // 获取画布元素
        const canvas = document.getElementById("canvas");
        canvas.width = WIDTH * CELL_SIZE;
        canvas.height = HEIGHT * CELL_SIZE;
        const context = canvas.getContext("2d");

        // 初始化生命游戏的格子
        const grid = [];
        for (let i = 0; i < HEIGHT; i++) {
            const row = new Array(WIDTH).fill(false);
            grid.push(row);
        }

        // 随机生成初始状态
        for (let row = 0; row < HEIGHT; row++) {
            for (let col = 0; col < WIDTH; col++) {
                grid[row][col] = Math.random() >= 0.5;
            }
        }

        // 游戏暂停状态
        let game_paused = false;

        // 编辑模式
        let edit_mode = false;

        // 计算下一代的状态
        function next_generation() {
            const new_grid = [];
            for (let row = 0; row < HEIGHT; row++) {
                const new_row = [];
                for (let col = 0; col < WIDTH; col++) {
                    const count = count_neighbors(row, col);
                    if (grid[row][col]) {
                        new_row.push(count === 2 || count === 3);
                    } else {
                        new_row.push(count === 3);
                    }
                }
                new_grid.push(new_row);
            }
            return new_grid;
        }

        // 计算邻居的数量
        function count_neighbors(row, col) {
            let count = 0;
            for (let i = -1; i <= 1; i++) {
                for (let j = -1; j <= 1; j++) {
                    if (i === 0 && j === 0) {
                        continue;
                    }
                    const neighbor_row = (row + i + HEIGHT) % HEIGHT;
                    const neighbor_col = (col + j + WIDTH) % WIDTH;
                    count += grid[neighbor_row][neighbor_col] ? 1 : 0;
                }
            }
            return count;
        }

        // 更新画布
        function update_canvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            for (let row = 0; row < HEIGHT; row++) {
                for (let col = 0; col < WIDTH; col++) {
                    const cell = grid[row][col];
                    const x = col * CELL_SIZE;
                    const y = row * CELL_SIZE;
                    if (cell) {
                        context.fillStyle = "white";
                        context.fillRect(x, y, CELL_SIZE, CELL_SIZE);
                    }
                }
            }
        }

        // 更新游戏状态并刷新画布
        function update_game() {
            if (!game_paused) {
                grid.splice(0, grid.length, ...next_generation());
                update_canvas();
            }
            requestAnimationFrame(update_game);
        }

        // 切换游戏暂停状态
        function toggle_pause() {
            game_paused = !game_paused;
        }

        // 切换编辑模式
        function toggle_edit_mode() {
            edit_mode = !edit_mode;
        }

        // 鼠标点击事件处理
        function handle_mouse_click(event) {
            if (!game_paused && !edit_mode) {
                return;
            }

            const rect = canvas.getBoundingClientRect();
            const x = Math.floor((event.clientX - rect.left) / CELL_SIZE);
            const y = Math.floor((event.clientY - rect.top) / CELL_SIZE);

            if (y >= 0 && y < HEIGHT && x >= 0 && x < WIDTH) {
                if (edit_mode) {
                    grid[y][x] = !grid[y][x];
                    update_canvas();
                }
            }
        }

        // 绑定鼠标点击事件处理
        canvas.addEventListener("mousedown", handle_mouse_click);

        // 绑定空格键切换暂停状态
        document.addEventListener("keydown", function (event) {
            if (event.key === " ") {
                toggle_pause();
            }
        });

        // 绑定"E"键切换编辑模式
        document.addEventListener("keydown", function (event) {
            if (event.key === "e") {
                toggle_edit_mode();
            }
        });

        // 清空格子状态
        function clear_grid() {
            for (let row = 0; row < HEIGHT; row++) {
                for (let col = 0; col < WIDTH; col++) {
                    grid[row][col] = false;
                }
            }
            update_canvas();
        }

        // 绑定"C"键清空格子状态
        document.addEventListener("keydown", function (event) {
            if (event.key === "c" && game_paused) {
                clear_grid();
            }
        });

        // 启动游戏
        update_game();
    </script>
</body>
</html>