Solidity进阶之路：搭建僵尸工厂 - 第14章: Web3.js

Solidity Path: Beginner to Intermediate Smart Contracts

课程链接：https://cryptozombies.io/zh/lesson/1

你认为你可以当一个合格的 CryptoZombie, 嗯？
这个教程会教你如何搭建一个以太网的游戏。
此课程为 Solidity 初学者设计，需要你对其他的程序语言有所了解（如 JavaScript)。

第14章: Web3.js

我们的 Solidity 合约完工了！ 现在我们要写一段 JavaScript 前端代码来调用这个合约。

以太坊有一个 JavaScript 库，名为Web3.js。

在后面的课程里，我们会进一步地教你如何安装一个合约，如何设置Web3.js。 但是现在我们通过一段代码来了解 Web3.js 是如何和我们发布的合约交互的吧。

如果下面的代码你不能全都理解，不用担心。

// 下面是调用合约的方式:
var abi = /* abi是由编译器生成的 */
var ZombieFactoryContract = web3.eth.contract(abi)
var contractAddress = /* 发布之后在以太坊上生成的合约地址 */
var ZombieFactory = ZombieFactoryContract.at(contractAddress)
// `ZombieFactory` 能访问公共的函数以及事件

// 某个监听文本输入的监听器:
$("#ourButton").click(function(e) {
     
    var name = $("#nameInput").val()
    //调用合约的 `createRandomZombie` 函数:
    ZombieFactory.createRandomZombie(name)
})

// 监听 `NewZombie` 事件, 并且更新UI
var event = ZombieFactory.NewZombie(function(error, result) {
     
    if (error) return
    generateZombie(result.zombieId, result.name, result.dna)
})

// 获取 Zombie 的 dna, 更新图像
function generateZombie(id, name, dna) {
     
    let dnaStr = String(dna)
    // 如果dna少于16位,在它前面用0补上
    while (dnaStr.length < 16)
        dnaStr = "0" + dnaStr
        
    let zombieDetails = {
     
        // 前两位数构成头部.我们可能有7种头部, 所以 % 7
        // 得到的数在0-6,再加上1,数的范围变成1-7
        // 通过这样计算：
        headChoice: dnaStr.substring(0, 2) % 7 + 1，
        // 我们得到的图片名称从head1.png 到 head7.png

        // 接下来的两位数构成眼睛, 眼睛变化就对11取模:
        eyeChoice: dnaStr.substring(2, 4) % 11 + 1,
        // 再接下来的两位数构成衣服，衣服变化就对6取模:
        shirtChoice: dnaStr.substring(4, 6) % 6 + 1,
        //最后6位控制颜色. 用css选择器: hue-rotate来更新
        // 360度:
        skinColorChoice: parseInt(dnaStr.substring(6, 8) / 100 * 360),
        eyeColorChoice: parseInt(dnaStr.substring(8, 10) / 100 * 360),
        clothesColorChoice: parseInt(dnaStr.substring(10, 12) / 100 * 360),
        zombieName: name,
        zombieDescription: "A Level 1 CryptoZombie",
    }
    return zombieDetails
}

我们的JavaScript所做的就是获取由zombieDetails产生的数据, 并且利用浏览器里的JavaScript神奇功能 (我们用Vue.js)，置换出图像以及使用CSS过滤器。在后面的课程中，你可以看到全部的代码。