lsy/practice_code
0
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity

生命游戏

Browse Source
This commit is contained in:
lsy 2024-10-20 03:03:50 +08:00
parent 2c5b4b2170
commit 4bebc4d45e
5 changed files with 337 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
rust/wasm/life_game/Cargo.toml Normal file
View File

@ -0,0 +1,16 @@
[package]
name = "wasm"
version = "0.1.0"
edition = "2021"
[dependencies]
wasm-bindgen = "0.2.95"
js-sys = "0.3"
[lib]
crate-type = ["cdylib", "rlib"]
[profile.release]
lto = true
opt-level = 'z'

20
rust/wasm/life_game/package.json Normal file
View File

@ -0,0 +1,20 @@
{
"name": "wasm",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"serve": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"@lsy2246/life_game": "^0.1.0"
},
"devDependencies": {
"webpack": "^5.95.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.1.0"
}
}

31
rust/wasm/life_game/src/index.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<canvas id="game-of-life-canvas"></canvas>
<div>
<button id="play-pause" >⏸</button>
<button id="play-clear" >❌</button>
</div>
<script src="../dist/main.js"></script>
</body>
</html>

124
rust/wasm/life_game/src/index.js Normal file
View File

@ -0,0 +1,124 @@
import {Universe} from "@lsy2246/life_game";
const canvas = document.querySelector('#game-of-life-canvas');
const universe = Universe.new();
let animationId = null;
const width = universe.width();
const height = universe.height();
const CELL_SIZE = 5; // px
const GRID_COLOR = "#CCCCCC";
const DEAD_COLOR = "#FFFFFF";
const ALIVE_COLOR = "#000000";
canvas.height = (CELL_SIZE + 1) * height + 1;
canvas.width = (CELL_SIZE + 1) * width + 1;
const ctx = canvas.getContext('2d');
const renderLoop = () => {
// 每一帧更新细胞状态
universe.tick();
// 绘制网格和细胞
drawGrid();
drawCells();
// 请求下一帧
animationId=requestAnimationFrame(renderLoop);
};
const drawGrid = () => {
ctx.beginPath();
ctx.strokeStyle = GRID_COLOR;
// 画垂直线
for (let i = 0; i <= width; i++) {
ctx.moveTo(i * (CELL_SIZE + 1) + 1, 0);
ctx.lineTo(i * (CELL_SIZE + 1) + 1, (CELL_SIZE + 1) * height + 1);
}
// 画水平线
for (let j = 0; j <= height; j++) {
ctx.moveTo(0, j * (CELL_SIZE + 1) + 1);
ctx.lineTo((CELL_SIZE + 1) * width + 1, j * (CELL_SIZE + 1) + 1);
}
ctx.stroke();
};
const drawCells = () => {
const cells = universe.get_cells();
ctx.beginPath();
// 遍历每个细胞，渲染它们的颜色
for (let row = 0; row < height; row++) {
for (let col = 0; col < width; col++) {
const idx = row * width + col;
const cell = cells[idx];
ctx.fillStyle = cell === 0 ? DEAD_COLOR : ALIVE_COLOR;
ctx.fillRect(
col * (CELL_SIZE + 1) + 1,
row * (CELL_SIZE + 1) + 1,
CELL_SIZE,
CELL_SIZE
);
}
}
ctx.stroke();
};
// 开始游戏循环
drawGrid();
drawCells();
requestAnimationFrame(renderLoop);
const playPauseButton = document.getElementById("play-pause");
const play = () => {
playPauseButton.textContent = "⏸";
renderLoop();
};
const pause = () => {
playPauseButton.textContent = "▶";
cancelAnimationFrame(animationId);
animationId = null;
};
playPauseButton.addEventListener("click", event => {
if (animationId === null) {
play();
} else {
pause();
}
});
canvas.addEventListener("click", event => {
const boundingRect = canvas.getBoundingClientRect();
const scaleX = canvas.width / boundingRect.width;
const scaleY = canvas.height / boundingRect.height;
const canvasLeft = (event.clientX - boundingRect.left) * scaleX;
const canvasTop = (event.clientY - boundingRect.top) * scaleY;
const row = Math.min(Math.floor(canvasTop / (CELL_SIZE + 1)), height - 1);
const col = Math.min(Math.floor(canvasLeft / (CELL_SIZE + 1)), width - 1);
universe.toggle_cell(row, col);
drawGrid();
drawCells();
});
document.querySelector('#play-clear').addEventListener('click', () => {
pause();
universe.clear_cells();
drawGrid();
drawCells();
})

146
rust/wasm/life_game/src/lib.rs Normal file
View File

@ -0,0 +1,146 @@
extern crate wasm_bindgen;
extern crate js_sys;
use wasm_bindgen::prelude::*;
use std::fmt;
#[wasm_bindgen]
#[derive(Clone, Copy, Debug, PartialEq, Eq)]
pub enum Cell {
Dead = 0,
Alive = 1,
}
#[wasm_bindgen]
pub struct Universe {
width: u32,
height: u32,
cells: Vec<Cell>,
}
impl Universe {
fn get_index(&self, row: u32, column: u32) -> usize {
(row * self.width + column) as usize
}
}
impl Universe {
pub fn live_neighbor_count(&self, row: u32, column: u32) -> u8 {
let mut count: u8 = 0;
for delta_row in [self.height - 1, 0, 1].iter().cloned() {
for delta_col in [self.width - 1, 0, 1].iter().cloned() {
if delta_row == 0 && delta_col == 0 {
continue;
}
let neighbor_row = (row + delta_row) % self.height;
let neighbor_col = (column + delta_col) % self.width;
let index = self.get_index(neighbor_row, neighbor_col);
count += self.cells[index] as u8;
}
}
count
}
}
#[wasm_bindgen]
impl Universe {
pub fn tick(&mut self) {
let mut next = self.cells.clone();
for row in 0..self.height {
for col in 0..self.width {
let idx = self.get_index(row, col);
let cell = self.cells[idx];
let live_neighbors = self.live_neighbor_count(row, col);
next[idx] = match (cell, live_neighbors) {
(Cell::Alive, x) if x < 2 => Cell::Dead,
(Cell::Alive, 2) | (Cell::Alive, 3) => Cell::Alive,
(Cell::Alive, x) if x > 3 => Cell::Dead,
(Cell::Dead, 3) => Cell::Alive,
_ => cell, // 保持当前状态
};
}
}
self.cells = next;
}
}
impl fmt::Display for Universe {
fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
for line in self.cells.as_slice().chunks(self.width as usize) {
for &cell in line {
let symbol = if cell == Cell::Dead { '◻' } else { '◼' };
write!(f, "{}", symbol)?;
}
write!(f, "\n")?;
}
Ok(())
}
}
#[wasm_bindgen]
impl Universe {
pub fn new() -> Universe {
let width = 64;
let height = 64;
let cells = (0..width * height)
.map(|_i| {
if js_sys::Math::random() < 0.5 {
Cell::Alive
} else {
Cell::Dead
}
}).collect();
Universe {
width,
height,
cells,
}
}
pub fn render(&self) -> String {
self.to_string()
}
}
#[wasm_bindgen]
impl Universe {
pub fn width(&self) -> u32 {
self.width
}
pub fn height(&self) -> u32 {
self.height
}
pub fn cells(&self) -> *const Cell {
self.cells.as_ptr()
}
pub fn get_cells(&self) -> Vec<u8> {
self.cells.iter().map(|&cell| cell as u8).collect()
}
}
#[wasm_bindgen]
impl Universe {
pub fn set_width(&mut self, width: u32) {
self.width = width;
self.cells = (0..width * self.height).map(|_i| Cell::Dead).collect();
}
pub fn set_height(&mut self, height: u32) {
self.height = height;
self.cells = (0..self.width * height).map(|_i| Cell::Dead).collect();
}
pub fn toggle_cell(&mut self, row: u32, column: u32) {
let idx = self.get_index(row, column);
self.cells[idx] = match self.cells[idx]{
Cell::Dead => Cell::Alive,
Cell::Alive => Cell::Dead,
};
}
pub fn clear_cells(&mut self) {
self.cells = (0..self.width * self.height).map(|_i| Cell::Dead).collect();
}
}