首页 > 其他分享> > 0015-wasm-康威生命游戏

0015-wasm-康威生命游戏

2022-08-29 17:34:11 作者：互联网

环境

Time 2022-05-14
Rust 1.60.0
Node 12.22.5
wasm-pack 0.10.2

前言

说明

参考：https://rustwasm.github.io/docs/book/game-of-life/implementing.html

目标

在上一节的基础上进行，继续实现康威生命游戏的前端。

index.html

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <title>康威生命游戏</title>
  <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>
  <pre id="game"></pre>
  <script src="./bootstrap.js"></script>
</body>

</html>

index.js

import { Universe } from "game";

const pre = document.getElementById("game");
const universe = Universe.new(64, 32);
const renderLoop = () => {
    pre.textContent = universe.render();
    universe.tick();

    requestAnimationFrame(renderLoop);
};

requestAnimationFrame(renderLoop);

wasm-pack build

打包 Rust 代码。

C:\Users\jiangbo\workspace\game>wasm-pack build
[INFO]: Checking for the Wasm target...
[INFO]: Compiling to Wasm...
    Finished release [optimized] target(s) in 0.05s
[WARN]: :-) origin crate has no README
[INFO]: Installing wasm-bindgen...
[INFO]: Optimizing wasm binaries with `wasm-opt`...
[INFO]: Optional fields missing from Cargo.toml: 'description', 'repository', and 'license'. These are not necessary, but recommended
[INFO]: :-) Done in 1.07s
[INFO]: :-) Your wasm pkg is ready to publish at C:\Users\jiangbo\workspace\game\pkg.

启动前端

npm run start

效果展示

康威游戏效果

总结

实现了康威生命游戏的前端，并且和后端联合，看到了游戏效果。

附录

标签：INFO,...,0015,游戏,康威,game,wasm
来源： https://www.cnblogs.com/jiangbo4444/p/16636638.html