生命游戏
This commit is contained in:
parent
2c5b4b2170
commit
4bebc4d45e
16
rust/wasm/life_game/Cargo.toml
Normal file
16
rust/wasm/life_game/Cargo.toml
Normal 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
20
rust/wasm/life_game/package.json
Normal 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
31
rust/wasm/life_game/src/index.html
Normal 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
124
rust/wasm/life_game/src/index.js
Normal 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
146
rust/wasm/life_game/src/lib.rs
Normal 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();
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user