首页 > 其他分享> 文章详细

0015-wasm-康威生命游戏

2022-08-29 17:34:11 阅读：208 来源： 互联网

标签：INFO ... 0015 游戏康威 game wasm

环境

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9