buildspace的create-turn-based-nft-game课程

大家好，我是帝哥（推特：@CoinmanLabs），大家或多或少都知道帝哥是程序员出身，因为确实官方的项目的文档很久没更新了，帝哥就跟官方沟通了，官方要邀请帝哥参与修改他们的代码，所以今天继续buildspace的课程-create-turn-based-nft-game，这里也按照官方给的阶段来。

1.入门

大致介绍了下这次的项目主要是做什么的，目的是什么，大家了解下就行了，最后问你，特别希望将任何加密货币公司添加到列表中，我选择了币安，大家可以自行答题，然后给我们介绍了下Axie Infinity游戏，最后问你喜欢什么游戏，我选择了Mario NFT填写。

2.构建NFT角色

step1.设置好replit环境

使用的编码网站还是replit，我们来到replit中首先新建一个项目，这里我就叫做003了（这里可能很多人就奇怪了为啥不直接跟着官网走，创建一个项目后直接安装依赖呢，如果使用replit较多的话，你就知道了，replit不可创建.env文件,但是采用这样的方式是可以创建的）

还是原来的，这里在说下，我将整个页面分为了三个区，便于后续针对每个区操作说明简单。

当我们的工作台准备工作完成后，在shell区执行下面的命令

mkdir epic-game
cd epic-game
npm init -y
npm install --save-dev hardhat@latest
# 等待上面都执行完成后在输入下面的命令，全部按回车即可
npx hardhat
npm install --save-dev chai @nomiclabs/hardhat-ethers ethers @nomicfoundation/hardhat-toolbox @nomicfoundation/hardhat-chai-matchers
npm install @openzeppelin/contracts

当我们上面的依赖全部安装完成后，因为hardhat项目框架本身就携带了合约和测试部署的脚本（默认使用的是hardhat的本地节点），当你需要测试是否安装成功则需要执行下面的命令。

npx hardhat run scripts/deploy.js

如果你正常执行则说明你配置正确，在这章节就可以把你正常运行deploy.js的截图上传。

step2.运行一个简单的合约

在contracts文件夹下新建一个MyEpicGame.sol文件，写入下面的代码

// SPDX-License-Identifier: UNLICENSED

pragma solidity ^0.8.17;

import "hardhat/console.sol";

contract MyEpicGame {
  constructor() {
    console.log("THIS IS MY GAME CONTRACT. NICE.");
  }
}

同时在scripts文件夹下面新建一个run.js，写入下面的代码

const main = async () => {
  const gameContractFactory = await hre.ethers.getContractFactory('MyEpicGame');
  const gameContract = await gameContractFactory.deploy();
  await gameContract.deployed();
  console.log("Contract deployed to:", gameContract.address);
};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};

runMain();

当前面全部完成后在shell区输入下面的命令，将输出的结果作为这一步的截图提交。

step3.设置人物属性

当我们完成了上面的测试之后，首先将我们的MyEpicGame.sol文件替换成下面的。

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.17;

import "hardhat/console.sol";

contract MyEpicGame {
  // We'll hold our character's attributes in a struct. Feel free to add
  // whatever you'd like as an attribute! (ex. defense, crit chance, etc).
  struct CharacterAttributes {
    uint characterIndex;
    string name;
    string imageURI;        
    uint hp;
    uint maxHp;
    uint attackDamage;
  }
  // A lil array to help us hold the default data for our characters.
  // This will be helpful when we mint new characters and need to know
  // things like their HP, AD, etc.
  CharacterAttributes[] defaultCharacters;

  // Data passed in to the contract when it's first created initializing the characters.
  // We're going to actually pass these values in from run.js.
  constructor(
    string[] memory characterNames,
    string[] memory characterImageURIs,
    uint[] memory characterHp,
    uint[] memory characterAttackDmg
  )
  {
    // Loop through all the characters, and save their values in our contract so
    // we can use them later when we mint our NFTs.
    for(uint i = 0; i < characterNames.length; i += 1) {
      defaultCharacters.push(CharacterAttributes({
        characterIndex: i,
        name: characterNames[i],
        imageURI: characterImageURIs[i],
        hp: characterHp[i],
        maxHp: characterHp[i],
        attackDamage: characterAttackDmg[i]
      }));

      CharacterAttributes memory c = defaultCharacters[i];
      console.log("Done initializing %s w/ HP %s, img %s", c.name, c.hp, c.imageURI);
    }
  }
}

同时需要替换run.js的内容如下。

const main = async () => {
  const gameContractFactory = await hre.ethers.getContractFactory('MyEpicGame');
  const gameContract = await gameContractFactory.deploy(
    ["Leo", "Aang", "Pikachu"],       // Names
    ["https://i.imgur.com/pKd5Sdk.png", // Images
    "https://i.imgur.com/xVu4vFL.png", 
    "https://i.imgur.com/WMB6g9u.png"],
    [100, 200, 300],                    // HP values
    [100, 50, 25]                       // Attack damage values
  );
  await gameContract.deployed();
  console.log("Contract deployed to:", gameContract.address);
};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};

runMain();

当替换完成后再次执行测试脚本，将测试脚本的结果截图作为本步骤。

npx hardhat run scripts/run.js

step4.在本地铸造 NFT

我们再次更新合约sol文件，将下面的代码进行替换。

同时我们在contract下面新建一个Base64.sol文件，写入下面的内容。

// SPDX-License-Identifier: MIT

pragma solidity ^0.8.0;

/// [MIT License]
/// @title Base64
/// @notice Provides a function for encoding some bytes in base64
/// @author Brecht Devos <brecht@loopring.org>
library Base64 {
    bytes internal constant TABLE =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";

    /// @notice Encodes some bytes to the base64 representation
    function encode(bytes memory data) internal pure returns (string memory) {
        uint256 len = data.length;
        if (len == 0) return "";

        // multiply by 4/3 rounded up
        uint256 encodedLen = 4 * ((len + 2) / 3);

        // Add some extra buffer at the end
        bytes memory result = new bytes(encodedLen + 32);

        bytes memory table = TABLE;

        assembly {
            let tablePtr := add(table, 1)
            let resultPtr := add(result, 32)

            for {
                let i := 0
            } lt(i, len) {

            } {
                i := add(i, 3)
                let input := and(mload(add(data, i)), 0xffffff)

                let out := mload(add(tablePtr, and(shr(18, input), 0x3F)))
                out := shl(8, out)
                out := add(
                    out,
                    and(mload(add(tablePtr, and(shr(12, input), 0x3F))), 0xFF)
                )
                out := shl(8, out)
                out := add(
                    out,
                    and(mload(add(tablePtr, and(shr(6, input), 0x3F))), 0xFF)
                )
                out := shl(8, out)
                out := add(
                    out,
                    and(mload(add(tablePtr, and(input, 0x3F))), 0xFF)
                )
                out := shl(224, out)

                mstore(resultPtr, out)

                resultPtr := add(resultPtr, 4)
            }

            switch mod(len, 3)
            case 1 {
                mstore(sub(resultPtr, 2), shl(240, 0x3d3d))
            }
            case 2 {
                mstore(sub(resultPtr, 1), shl(248, 0x3d))
            }

            mstore(result, encodedLen)
        }

        return string(result);
    }
}

当将sol文件替换完之后，将我们的run.js进行替换，替换的如下。

const main = async () => {
  const gameContractFactory = await hre.ethers.getContractFactory('MyEpicGame');
  const gameContract = await gameContractFactory.deploy(
    ["Leo", "Aang", "Pikachu"],       // Names
    ["https://i.imgur.com/pKd5Sdk.png", // Images
      "https://i.imgur.com/xVu4vFL.png",
      "https://i.imgur.com/WMB6g9u.png"],
    [100, 200, 300],                    // HP values
    [100, 50, 25]                       // Attack damage values
  );
  await gameContract.deployed();
  console.log("Contract deployed to:", gameContract.address);
  
let txn;
// We only have three characters.
// an NFT w/ the character at index 2 of our array.
txn = await gameContract.mintCharacterNFT(2);
await txn.wait();

// Get the value of the NFT's URI.
let returnedTokenUri = await gameContract.tokenURI(1);
console.log("Token URI:", returnedTokenUri);

};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};

runMain();

再次运行run.js，将输出的token url新开一个tab页显示作为本步骤截图。

npx hardhat run scripts/run.js

step5.将合约部署到测试网络

将deploy.js将下面的内容替换过去即可。

const main = async () => {
  const gameContractFactory = await hre.ethers.getContractFactory('MyEpicGame');
  const gameContract = await gameContractFactory.deploy(                     
    ["Leo", "Aang", "Pikachu"],       
    ["https://i.imgur.com/pKd5Sdk.png", 
    "https://i.imgur.com/xVu4vFL.png", 
    "https://i.imgur.com/u7T87A6.png"],
    [100, 200, 300],                    
    [100, 50, 25]                       
  );
  await gameContract.deployed();
  console.log("Contract deployed to:", gameContract.address);

  
  let txn;
  txn = await gameContract.mintCharacterNFT(0);
  await txn.wait();
  console.log("Minted NFT #1");

  txn = await gameContract.mintCharacterNFT(1);
  await txn.wait();
  console.log("Minted NFT #2");

  txn = await gameContract.mintCharacterNFT(2);
  await txn.wait();
  console.log("Minted NFT #3");

  txn = await gameContract.mintCharacterNFT(1);
  await txn.wait();
  console.log("Minted NFT #4");

  console.log("Done deploying and minting!");

};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};

runMain();

现在让我们来修改下hardhat.config.js，替换如下。

require("@nomicfoundation/hardhat-toolbox");

module.exports = {
  solidity: '0.8.17',
  networks: {
    goerli: {
      url: '你的rpc的地址 可以使用alchemy',
      accounts: ['你的私钥'],
    },
  },
};

都完成后在shell区输入下面的命令部署。

npx hardhat run scripts/deploy.js --network goerli

当部署完成后，去到

https://goerli.pixxiti.com/nfts/你的合约地址/你的tokenid（选择一个即可1-4）
# 比如帝哥的地址查看的https://goerli.pixxiti.com/nfts/0x5410BF0144d2f6844815f629CE4Fb29456FE9C8a/1

2.构建游戏逻辑

step1.构建boss和购机逻辑

将我们的sol文件替换为下面的内容。

将run,js代码替换如下。

const main = async () => {
  const gameContractFactory = await hre.ethers.getContractFactory('MyEpicGame');
  const gameContract = await gameContractFactory.deploy(
    ["Leo", "Aang", "Pikachu"],
    ["https://i.imgur.com/pKd5Sdk.png",
      "https://i.imgur.com/xVu4vFL.png",
      "https://i.imgur.com/u7T87A6.png"],
    [100, 200, 300],
    [100, 50, 25],
    "Elon Musk", // Boss name
    "https://i.imgur.com/AksR0tt.png", // Boss image
    10000, // Boss hp
    50 // Boss attack damage
  );
  await gameContract.deployed();
  console.log("Contract deployed to:", gameContract.address);

  let txn;
  // We only have three characters.
  // an NFT w/ the character at index 2 of our array.
  txn = await gameContract.mintCharacterNFT(2);
  await txn.wait();
  txn = await gameContract.attackBoss();
  await txn.wait();

  txn = await gameContract.attackBoss();
  await txn.wait();
};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};

runMain();

当上面两者都替换完成后，执行run.js将输出的结果作为本步骤的截图。

step2.

将下面的代码替换到deploy.js。

const main = async () => {
  const gameContractFactory = await hre.ethers.getContractFactory('MyEpicGame');
  
  const gameContract = await gameContractFactory.deploy(                        
    ["Leo", "Aang", "Pikachu"],       
    ["https://i.imgur.com/pKd5Sdk.png", 
    "https://i.imgur.com/xVu4vFL.png", 
    "https://i.imgur.com/u7T87A6.png"],
    [100, 200, 300],                    
    [100, 50, 25],
    "Elon Musk",
    "https://i.imgur.com/AksR0tt.png",
    10000,
    50
  );

  await gameContract.deployed();
  console.log("Contract deployed to:", gameContract.address);

  let txn;
  // We only have three characters.
  // an NFT w/ the character at index 2 of our array.
  txn = await gameContract.mintCharacterNFT(2);
  await txn.wait();

  txn = await gameContract.attackBoss();
  await txn.wait();

  txn = await gameContract.attackBoss();
  await txn.wait();

  console.log("Done!");
};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};

runMain();

运行部署脚本，去到网站查看属性作为了本步骤的提交结果。

npx hardhat run scripts/deploy.js --network goerli

当部署完成后进行查看。

https://goerli.pixxiti.com/nfts/你的合约地址/你的tokenid（选择一个即可1-4）
# 比如帝哥的地址查看的https://goerli.pixxiti.com/nfts/0x5410BF0144d2f6844815f629CE4Fb29456FE9C8a/1

step3.部署并查看 NFT 在产品中的变化。（合约也需要修改才能看到变化，请继续下一步完善合约）

将下面的代码替换到deploy.js中。

const main = async () => {
  const gameContractFactory = await hre.ethers.getContractFactory('MyEpicGame');
  
  const gameContract = await gameContractFactory.deploy(                        
    ["Leo", "Aang", "Pikachu"],       
    ["https://i.imgur.com/pKd5Sdk.png", 
    "https://i.imgur.com/xVu4vFL.png", 
    "https://i.imgur.com/u7T87A6.png"],
    [100, 200, 300],                    
    [100, 50, 25],
    "Elon Musk",
    "https://i.imgur.com/AksR0tt.png",
    10000,
    50
  );

  await gameContract.deployed();
  console.log("Contract deployed to:", gameContract.address);

  let txn;
  // We only have three characters.
  // an NFT w/ the character at index 2 of our array.
  txn = await gameContract.mintCharacterNFT(2);
  await txn.wait();

  txn = await gameContract.attackBoss();
  await txn.wait();

  txn = await gameContract.attackBoss();
  await txn.wait();

  console.log("Done!");
};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};

runMain();

这里我们需要注意一个地方，因为在产生攻击的时候作者采用了一个10以内的随机数可能会存在你的nft的属性还是原来的，不会有更改，我给大家解释下上面deploy.js里面的意思。

# 这里部署了一个名字叫做Pikachu hp为300 攻击力为25的人物
txn = await gameContract.mintCharacterNFT(2);

上面说了可能不会触发攻击来导致属性变化，那我们怎么改下，可以让他一定攻击的到呢？记得这一步提交截图后再次改回来。

我们可以看到任务的生命值确实变化了。记得将刚才修改的值改回去。

step3.完善合约

我们将合约文件sol再次替换为下面的。

同步替换我们的deploy.js

const main = async () => {
  const gameContractFactory = await hre.ethers.getContractFactory('MyEpicGame');
  
  const gameContract = await gameContractFactory.deploy(                        
    ["Leo", "Aang", "Pikachu"],       
    ["https://i.imgur.com/pKd5Sdk.png", 
    "https://i.imgur.com/xVu4vFL.png", 
    "https://i.imgur.com/u7T87A6.png"],
    [100, 200, 300],                    
    [100, 50, 25],
    "Elon Musk",
    "https://i.imgur.com/AksR0tt.png",
    10000,
    50
  );

  await gameContract.deployed();
  console.log("Contract deployed to:", gameContract.address);

};

const runMain = async () => {
  try {
    await main();
    process.exit(0);
  } catch (error) {
    console.log(error);
    process.exit(1);
  }
};

runMain();

当上面都替换好之后，运行部署脚本。

npx hardhat run scripts/deploy.js --network goerli

当部署完成后，我们可以去到测试网络的区块浏览器，查看mint事件和攻击事件的event。

这一步不是提交截图了，但是你需要把你的合约的地址记录下来，而是问我们event的作用，大家可以采用我的：

It is convenient to present the data visually to the user, and it is also convenient for the project side to better view the log

4.创建前端

上面我们把合约编写完成了，下面就来做一个前端也便于用户操作。

step1.获取前端代码

还是使用replit来操作，首先去到该项目的github地址，在新建项目的时候选择从github导入。

等待工作台安装完毕，当准备好之后，在shell去输入下面的命令。

npm install
npm run start

当我们使用start命令启动项目后，将项目的截图最为这一步的提交截图。

step2.添加连接钱包按钮

将下面的代码替换到app,jsx中。

import React, { useEffect, useState } from 'react';
import './App.css';
import twitterLogo from './assets/twitter-logo.svg';

// Constants
const TWITTER_HANDLE = '_buildspace';
const TWITTER_LINK = `https://twitter.com/${TWITTER_HANDLE}`;

const App = () => {
  // State
  const [currentAccount, setCurrentAccount] = useState(null);

  // Actions
  const checkIfWalletIsConnected = async () => {
    try {
      const { ethereum } = window;

      if (!ethereum) {
        console.log('Make sure you have MetaMask!');
        return;
      } else {
        console.log('We have the ethereum object', ethereum);

        const accounts = await ethereum.request({ method: 'eth_accounts' });

        if (accounts.length !== 0) {
          const account = accounts[0];
          console.log('Found an authorized account:', account);
          setCurrentAccount(account);
        } else {
          console.log('No authorized account found');
        }
      }
    } catch (error) {
      console.log(error);
    }
  };

  /*
   * Implement your connectWallet method here
   */
  const connectWalletAction = async () => {
    try {
      const { ethereum } = window;

      if (!ethereum) {
        alert('Get MetaMask!');
        return;
      }

      /*
       * Fancy method to request access to account.
       */
      const accounts = await ethereum.request({
        method: 'eth_requestAccounts',
      });

      /*
       * Boom! This should print out public address once we authorize Metamask.
       */
      console.log('Connected', accounts[0]);
      setCurrentAccount(accounts[0]);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    checkIfWalletIsConnected();
  }, []);

  return (
    <div className="App">
      <div className="container">
        <div className="header-container">
          <p className="header gradient-text">⚔️ Metaverse Slayer ⚔️</p>
          <p className="sub-text">Team up to protect the Metaverse!</p>
          <div className="connect-wallet-container">
            <img
              src="https://64.media.tumblr.com/tumblr_mbia5vdmRd1r1mkubo1_500.gifv"
              alt="Monty Python Gif"
            />
            {/*
             * Button that we will use to trigger wallet connect
             * Don't forget to add the onClick event to call your method!
             */}
            <button
              className="cta-button connect-wallet-button"
              onClick={connectWalletAction}
            >
              Connect Wallet To Get Started
            </button>
          </div>
        </div>
        <div className="footer-container">
          <img alt="Twitter Logo" className="twitter-logo" src={twitterLogo} />
          <a
            className="footer-text"
            href={TWITTER_LINK}
            target="_blank"
            rel="noreferrer"
          >{`built with @${TWITTER_HANDLE}`}</a>
        </div>
      </div>
    </div>
  );
};

export default App;

查看我们的网站，将这一步的结果作为本步骤的截图。

step3.初始化应用

首先去到src/Components/SelectCharacter新建一个index.js文件，内容如下。

import React, { useEffect, useState } from 'react';
import './SelectCharacter.css';

/*
 * Don't worry about setCharacterNFT just yet, we will talk about it soon!
 */
const SelectCharacter = ({ setCharacterNFT }) => {
  return (
    <div className="select-character-container">
      <h2>Mint Your Hero. Choose wisely.</h2>
    </div>
  );
};

export default SelectCharacter;

同时将app.jsx替换。

再次运行npm run start 启动项目，点击连接钱包后将页面作为本步骤作为截图提交。

step4.校验角色是否有NFT

首先在src下面新建一个constants.js，写入下面的内容，需要替换你的合约地址。

const CONTRACT_ADDRESS = '你的合约地址';

/*
 * Add this method and make sure to export it on the bottom!
 */
const transformCharacterData = (characterData) => {
  return {
    name: characterData.name,
    imageURI: characterData.imageURI,
    hp: characterData.hp.toNumber(),
    maxHp: characterData.maxHp.toNumber(),
    attackDamage: characterData.attackDamage.toNumber(),
  };
};

export { CONTRACT_ADDRESS, transformCharacterData };

在src下新建一个MyEpicGame.json文件，同时去到你编写合约的replit的仓库找到artifacts/contracts/MyEpicGame.sol/MyEpicGame.json，将这个文件全部复制到src下面的MyEpicGame.json。使用你们自己的哦。

修改你的app.jsx替换为下面的。

当我们再次npm run start可以看到输出结果（No character NFT found），将这一步结果作本步骤的截图提交。切记如果你连接的钱包和你部署的合约的钱包是同一个，则会输（User has character NFT）。

step5.构建角色选择页面

将我们的Components/SelectCharacter/index.js替换为下面的即可。

点击mint按钮即可去mint属于你的nft，去到opesnsea的测试网络找到这次你mint放入nft将链接作为本次的提交。

step6.构建竞技场

在Arena下面新建一个index.js,内容如下。

同时去替换app.js,代码如下。

大家可以试玩下，帝哥玩了两次后小李子，已经挂了。。。，因为官方需要你的人物死的截图，真变态。

5.优化网站

step1.ui改变，提示等

因为这一步的代码太多了，我将自己的仓库公开了，大家去replit复制即可，地址在下面：

https://replit.com/@paulCoinman/buildspace-nft-game-starter-coinmanlabs?v=1

需要复制的文件：

app.js
Components/SelectCharacter/index.js和css
Arena的index.js和css

最终的结果，大家后面的可以选择的做。

关注coinmanlabs获取区块链最新讯息。

推特：coinmanlabs

公众号：coinmanlabs

加客服微信进群了解更多信息。

mkdir epic-game cd epic-game npm init -y npm install --save-dev hardhat@latest # 等待上面都执行完成后在输入下面的命令，全部按回车即可 npx hardhat npm install --save-dev chai @nomiclabs/hardhat-ethers ethers @nomicfoundation/hardhat-toolbox @nomicfoundation/hardhat-chai-matchers npm install @openzeppelin/contracts

const main = async () => { const gameContractFactory = await hre.ethers.getContractFactory('MyEpicGame'); const gameContract = await gameContractFactory.deploy(); await gameContract.deployed(); console.log("Contract deployed to:", gameContract.address); }; const runMain = async () => { try { await main(); process.exit(0); } catch (error) { console.log(error); process.exit(1); } }; runMain();

// SPDX-License-Identifier: MIT pragma solidity ^0.8.17; import "hardhat/console.sol"; contract MyEpicGame { // We'll hold our character's attributes in a struct. Feel free to add // whatever you'd like as an attribute! (ex. defense, crit chance, etc). struct CharacterAttributes { uint characterIndex; string name; string imageURI; uint hp; uint maxHp; uint attackDamage; } // A lil array to help us hold the default data for our characters. // This will be helpful when we mint new characters and need to know // things like their HP, AD, etc. CharacterAttributes[] defaultCharacters; // Data passed in to the contract when it's first created initializing the characters. // We're going to actually pass these values in from run.js. constructor( string[] memory characterNames, string[] memory characterImageURIs, uint[] memory characterHp, uint[] memory characterAttackDmg ) { // Loop through all the characters, and save their values in our contract so // we can use them later when we mint our NFTs. for(uint i = 0; i < characterNames.length; i += 1) { defaultCharacters.push(CharacterAttributes({ characterIndex: i, name: characterNames[i], imageURI: characterImageURIs[i], hp: characterHp[i], maxHp: characterHp[i], attackDamage: characterAttackDmg[i] })); CharacterAttributes memory c = defaultCharacters[i]; console.log("Done initializing %s w/ HP %s, img %s", c.name, c.hp, c.imageURI); } } }

// SPDX-License-Identifier: MIT pragma solidity ^0.8.0; /// [MIT License] /// @title Base64 /// @notice Provides a function for encoding some bytes in base64 /// @author Brecht Devos <brecht@loopring.org> library Base64 { bytes internal constant TABLE = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; /// @notice Encodes some bytes to the base64 representation function encode(bytes memory data) internal pure returns (string memory) { uint256 len = data.length; if (len == 0) return ""; // multiply by 4/3 rounded up uint256 encodedLen = 4 * ((len + 2) / 3); // Add some extra buffer at the end bytes memory result = new bytes(encodedLen + 32); bytes memory table = TABLE; assembly { let tablePtr := add(table, 1) let resultPtr := add(result, 32) for { let i := 0 } lt(i, len) { } { i := add(i, 3) let input := and(mload(add(data, i)), 0xffffff) let out := mload(add(tablePtr, and(shr(18, input), 0x3F))) out := shl(8, out) out := add( out, and(mload(add(tablePtr, and(shr(12, input), 0x3F))), 0xFF) ) out := shl(8, out) out := add( out, and(mload(add(tablePtr, and(shr(6, input), 0x3F))), 0xFF) ) out := shl(8, out) out := add( out, and(mload(add(tablePtr, and(input, 0x3F))), 0xFF) ) out := shl(224, out) mstore(resultPtr, out) resultPtr := add(resultPtr, 4) } switch mod(len, 3) case 1 { mstore(sub(resultPtr, 2), shl(240, 0x3d3d)) } case 2 { mstore(sub(resultPtr, 1), shl(248, 0x3d)) } mstore(result, encodedLen) } return string(result); } }

require("@nomicfoundation/hardhat-toolbox"); module.exports = { solidity: '0.8.17', networks: { goerli: { url: '你的rpc的地址可以使用alchemy', accounts: ['你的私钥'], }, }, };

https://goerli.pixxiti.com/nfts/你的合约地址/你的tokenid（选择一个即可1-4） # 比如帝哥的地址查看的https://goerli.pixxiti.com/nfts/0x5410BF0144d2f6844815f629CE4Fb29456FE9C8a/1

import React, { useEffect, useState } from 'react'; import './App.css'; import twitterLogo from './assets/twitter-logo.svg'; // Constants const TWITTER_HANDLE = '_buildspace'; const TWITTER_LINK = `https://twitter.com/${TWITTER_HANDLE}`; const App = () => { // State const [currentAccount, setCurrentAccount] = useState(null); // Actions const checkIfWalletIsConnected = async () => { try { const { ethereum } = window; if (!ethereum) { console.log('Make sure you have MetaMask!'); return; } else { console.log('We have the ethereum object', ethereum); const accounts = await ethereum.request({ method: 'eth_accounts' }); if (accounts.length !== 0) { const account = accounts[0]; console.log('Found an authorized account:', account); setCurrentAccount(account); } else { console.log('No authorized account found'); } } } catch (error) { console.log(error); } }; /* * Implement your connectWallet method here */ const connectWalletAction = async () => { try { const { ethereum } = window; if (!ethereum) { alert('Get MetaMask!'); return; } /* * Fancy method to request access to account. */ const accounts = await ethereum.request({ method: 'eth_requestAccounts', }); /* * Boom! This should print out public address once we authorize Metamask. */ console.log('Connected', accounts[0]); setCurrentAccount(accounts[0]); } catch (error) { console.log(error); } }; useEffect(() => { checkIfWalletIsConnected(); }, []); return ( <div className="App"> <div className="container"> <div className="header-container"> <p className="header gradient-text">⚔️ Metaverse Slayer ⚔️</p> <p className="sub-text">Team up to protect the Metaverse!</p> <div className="connect-wallet-container"> <img src="https://64.media.tumblr.com/tumblr_mbia5vdmRd1r1mkubo1_500.gifv" alt="Monty Python Gif" /> {/* * Button that we will use to trigger wallet connect * Don't forget to add the onClick event to call your method! */} <button className="cta-button connect-wallet-button" onClick={connectWalletAction} > Connect Wallet To Get Started </button> </div> </div> <div className="footer-container"> <img alt="Twitter Logo" className="twitter-logo" src={twitterLogo} /> <a className="footer-text" href={TWITTER_LINK} target="_blank" rel="noreferrer" >{`built with @${TWITTER_HANDLE}`}</a> </div> </div> </div> ); }; export default App;

import React, { useEffect, useState } from 'react'; import './SelectCharacter.css'; /* * Don't worry about setCharacterNFT just yet, we will talk about it soon! */ const SelectCharacter = ({ setCharacterNFT }) => { return ( <div className="select-character-container"> <h2>Mint Your Hero. Choose wisely.</h2> </div> ); }; export default SelectCharacter;

const CONTRACT_ADDRESS = '你的合约地址'; /* * Add this method and make sure to export it on the bottom! */ const transformCharacterData = (characterData) => { return { name: characterData.name, imageURI: characterData.imageURI, hp: characterData.hp.toNumber(), maxHp: characterData.maxHp.toNumber(), attackDamage: characterData.attackDamage.toNumber(), }; }; export { CONTRACT_ADDRESS, transformCharacterData };

Coinman.eth

More from Coinman.eth

Coinman.eth

More from Coinman.eth

No activity yet

More from Coinman.eth

Coinman.eth

Coinman.eth

No activity yet

More from Coinman.eth

buildspace的create-turn-based-nft-game课程

buildspace的create-turn-based-nft-game课程

1.入门

2.构建NFT角色

2.构建游戏逻辑

4.创建前端

5.优化网站

1.入门

2.构建NFT角色

2.构建游戏逻辑

4.创建前端

5.优化网站

No activity yet

No activity yet