在 Bitcoin SV 区块链上构建全栈去中心化 Tic-Tac-Toe Dapp：终极指南

“本文全面概述了用于在 Bitcoin SV 区块链上开发全栈去中心化应用程序的 Web3 技术堆栈。该技术堆栈包括 sCrypt Frameworks、Yours Wallet 和 React。构建全堆栈去中心化井字游戏的过程详细介绍了游戏的流程，包括编写智能合约、部署合约、集成前端（使用React）、集成Yours钱包等，按照指南，读者可以了解如何在Bitcoin SV上构建功能齐全的去中心化应用程序区块链。”

Build a Full-Stack Decentralized Tic-Tac-Toe App on the Bitcoin SV Blockchain: A Comprehensive Guide

在 Bitcoin SV 区块链上构建全栈去中心化 Tic-Tac-Toe 应用程序：综合指南

Introduction

介绍

In this detailed guide, we will guide you through the process of building a complete full-stack decentralized Tic-Tac-Toe application on the Bitcoin SV (BSV) blockchain. This comprehensive journey will cover the creation of a smart contract, deploying it, integrating a front-end using React, and connecting to a user's wallet. By the end, you will possess a fully functional Tic-Tac-Toe application running seamlessly on the BSV blockchain.

在本详细指南中，我们将指导您完成在 Bitcoin SV (BSV) 区块链上构建完整的全栈去中心化 Tic-Tac-Toe 应用程序的过程。这个全面的旅程将涵盖智能合约的创建、部署、使用 React 集成前端以及连接到用户的钱包。最后，您将拥有一个在 BSV 区块链上无缝运行的功能齐全的 Tic-Tac-Toe 应用程序。

Prerequisites

先决条件

To embark on this adventure, you will need the following prerequisites:

要开始这次冒险，您需要满足以下先决条件：

• Node.js (version 16 or higher)
• npm
• Git
• Yours Wallet Chrome extension
• sCrypt CLI (installed using npm install -g scrypt-cli)

Technology Stack

Node.js（版本 16 或更高版本）npmGitYours Wallet Chrome 扩展Crypt CLI（使用 npm install -g scrypt-cli 安装）技术堆栈

Our tech stack consists of the following key components:

我们的技术堆栈由以下关键组件组成：

• sCrypt Framework: TypeScript framework for developing BSV smart contracts.
• Yours Wallet: Open-source digital wallet for BSV that enables interaction with decentralized applications built on BSV.
• React: JavaScript library for building user interfaces.

Designing the Contract

sCrypt Framework：用于开发 BSV 智能合约的 TypeScript 框架。Yours Wallet：BSV 开源数字钱包，可与基于 BSV 构建的去中心化应用程序进行交互。React：用于构建用户界面的 JavaScript 库。设计合约

Let's define the blueprint of our game. The Tic-Tac-Toe contract will be initialized with the Bitcoin addresses of two players, Alice and Bob. They will wager the same amount and lock their bets in the contract. The winner claims the entire pot, while a draw results in an equal split between both players.

让我们定义游戏的蓝图。 Tic-Tac-Toe 合约将使用两个玩家 Alice 和 Bob 的比特币地址进行初始化。他们将下相同金额的赌注并将赌注锁定在合同中。获胜者将获得全部底池，而平局则由两名玩家平分。

Creating the Contract

创建合同

Using the sCrypt framework, we will create the contract in TypeScript in the src/contracts/tictactoe.ts file:

使用 sCrypt 框架，我们将在 src/contracts/tictactoe.ts 文件中以 TypeScript 创建合约：

import {
进口 {
  prop,
支柱，
  method,
方法，
  SmartContract,
智能合约，
  PubKey,
公钥，
  FixedArray,
固定阵列，
  assert,
断言，
  Sig,
说，
  Utils,
实用程序，
  toByteString,
到字节字符串，
  hash160,
哈希160，
  hash256,
哈希256，
  fill,
充满，
  ContractTransaction,
合约交易，
  MethodCallOptions,
方法调用选项，
  bsv
BSV
} from "scrypt-ts";
来自“scrypt-ts”；

export class TicTacToe extends SmartContract {
导出类 TicTacToe 扩展了 SmartContract {
  @prop()
@支柱（）
  alice: PubKey;
爱丽丝：公钥；

  @prop()
@支柱（）
  bob: PubKey;
鲍勃：公钥；

  @prop(true)
@prop（真）
  isAliceTurn: boolean;
isAliceTurn: 布尔值；

  @prop(true)
@prop（真）
  board: FixedArray;
板：固定阵列；

  static readonly EMPTY: bigint = 0n;
静态只读空：bigint = 0n；
  static readonly ALICE: bigint = 1n;
静态只读 ALICE: bigint = 1n;
  static readonly BOB: bigint = 2n;
静态只读 BOB：bigint = 2n；

  constructor(alice: PubKey, bob: PubKey) {
构造函数（爱丽丝：PubKey，鲍勃：PubKey）{
    super(...arguments);
超级（...参数）；
    this.alice = alice;
this.alice = 爱丽丝;
    this.bob = bob;
this.bob = 鲍勃；
    this.isAliceTurn = true;
this.isAliceTurn = true;
    this.board = fill(TicTacToe.EMPTY, 9);
this.board = fill(TicTacToe.EMPTY, 9);
  }
}

  @method()
@方法（）
  public move(n: bigint, sig: Sig) {
公共移动（n：bigint，sig：Sig）{
    // check position `n`
// 检查位置 `n`
    assert(n >= 0n && n < 9n);
断言(n >= 0n && n < 9n);

    // check signature `sig`
// 检查签名 `sig`
    let player: PubKey = this.isAliceTurn ? this.alice : this.bob;
让玩家：PubKey = this.isAliceTurn ？这个.爱丽丝：这个.鲍勃；
    assert(this.checkSig(sig, player), `checkSig failed, pubkey: ${player}`);
断言(this.checkSig(sig, 玩家), `checkSig 失败, pubkey: ${player}`);

    // update stateful properties to make the move
// 更新有状态属性以进行移动
    assert(this.board[Number(n)] === TicTacToe.EMPTY, `board at position ${n} is not empty: ${this.board[Number(n)]}`);
assert(this.board[Number(n)] === TicTacToe.EMPTY, `${n} 位置的棋盘不为空：${this.board[Number(n)]}`);
    let play = this.isAliceTurn ? TicTacToe.ALICE : TicTacToe.BOB;
让我们玩= this.isAliceTurn ？井字游戏.ALICE : 井字游戏.BOB;
    this.board[Number(n)] = play;
this.board[Number(n)] = 玩；
    this.isAliceTurn = !this.isAliceTurn;
this.isAliceTurn = !this.isAliceTurn;

    // build the transation outputs
// 构建交易输出
    let outputs = toByteString('');
让输出= toByteString('');
    if (this.won(play)) {
if (this.won(play)) {
      outputs = Utils.buildPublicKeyHashOutput(hash160(player), this.ctx.utxo.value);
输出 = Utils.buildPublicKeyHashOutput(hash160(player), this.ctx.utxo.value);
    }
}
}
 else if (this.full()) {
      const halfAmount = this.ctx.utxo.value / 2n;
const halfAmount = this.ctx.utxo.value / 2n;
      const aliceOutput = Utils.buildPublicKeyHashOutput(hash160(this.alice), halfAmount);
const aliceOutput = Utils.buildPublicKeyHashOutput(hash160(this.alice), halfAmount);
      const bobOutput = Utils.buildPublicKeyHashOutput(hash160(this.bob), halfAmount);
const bobOutput = Utils.buildPublicKeyHashOutput(hash160(this.bob), halfAmount);
      outputs = aliceOutput + bobOutput;
输出 = aliceOutput + bobOutput；
    }
}
}
 else {
      // build a output that contains latest contract state.
// 构建包含最新合约状态的输出。
      outputs = this.buildStateOutput(this.ctx.utxo.value);
输出 = this.buildStateOutput(this.ctx.utxo.value);
    }
}
}

    if (this.changeAmount > 0n) {
if (this.changeAmount > 0n) {
      outputs += this.buildChangeOutput();
输出 += this.buildChangeOutput();
    }
}
}

    // make sure the transaction contains the expected outputs built above
// 确保交易包含上面构建的预期输出
    assert(this.ctx.hashOutputs === hash256(outputs), "check hashOutputs failed");
assert(this.ctx.hashOutputs === hash256(outputs), "检查 hashOutputs 失败");
  }
}

  @method()
@方法（）
  won(play: bigint): boolean {
赢了（玩：bigint）：布尔值{
    let lines: FixedArray, 8> = [
让行：FixedArray = [
      [0n, 1n, 2n],
[0n，1n，2n]，
      [3n, 4n, 5n],
[3n，4n，5n]，
      [6n, 7n, 8n],
[6n，7n，8n]，
      [0n, 3n, 6n],
[0n，3n，6n]，
      [1n, 4n, 7n],
[1n，4n，7n]，
      [2n, 5n, 8n],
[2n，5n，8n]，
      [0n, 4n, 8n],
[0n，4n，8n]，
      [2n, 4n, 6n]
[2n、4n、6n]
    ];
];

    let anyLine = false;
让任何行=假；
    for (let i = 0; i < 8; i++) {
for (令 i = 0; i < 8; i++) {
      let line = true;
让线=真；
      for (let j = 0; j < 3; j++) {
for (令 j = 0; j < 3; j++) {
        line = line && this.board[Number(lines[i][j])] === play;
line = line && this.board[Number(lines[i][j])] === play;
      }
}
}
}
      anyLine = anyLine || line;
任意行 = 任意行 ||线;
    }
}
}

    return anyLine;
返回任意行；
  }
}

  @method()
@方法（）
  full(): boolean {
完整（）：布尔值{
    let full = true;
让完整=真；
    for (let i = 0; i < 9; i++) {
for (令 i = 0; i < 9; i++) {
      full = full && this.board[i] !== TicTacToe.EMPTY;
full = full && this.board[i] !== TicTacToe.EMPTY;
    }
}
}
    return full;
返回完整；
  }
}
}

Integrating the Front-End with React

}将前端与 React 集成

Time to connect our contract with the user interface. After compiling the contract and generating the artifact file, we will use it to initialize the contract in the front-end:

是时候将我们的合约与用户界面连接起来了。编译合约并生成工件文件后，我们将使用它在前端初始化合约：

import {
进口 {
 TicTacToe } from './contracts/tictactoe';
import artifact from '../artifacts/tictactoe.json';
从 '../artifacts/tictactoe.json' 导入工件；

TicTacToe.loadArtifact(artifact);

Connect to the Wallet

TicTacToe.loadArtifact(artifact);连接钱包

We will use Yours Wallet to connect to the BSV network and interact with our contract.

我们将使用 Yours Wallet 连接到 BSV 网络并与我们的合约进行交互。

Call the Contract

致电合同

Now, we can enable users to play the game. Each move triggers a contract call, updating its state:

现在，我们可以让用户玩游戏了。每次移动都会触发合约调用，更新其状态：

const { tx: callTx } = await p2pkh.methods.unlock(
const { tx: callTx } = 等待 p2pkh.methods.unlock(
  (sigResponses: SignatureResponse[]) => findSig(sigResponses, $publickey),
(sigResponses: SignatureResponse[]) => findSig(sigResponses, $publickey),
  $publickey,
$公钥，
  {
{
    pubKeyOrAddrToSign: $publickey.toAddress()
pubKeyOrAddrToSign: $publickey.toAddress()
  }
}
 as MethodCallOptions
);

Conclusion

）;结论

Congratulations! You have successfully created a fully functional Tic-Tac-Toe dApp on the BSV blockchain. This adventure has showcased the power of this cutting-edge technology stack.

恭喜！您已在 BSV 区块链上成功创建了一个功能齐全的 Tic-Tac-Toe dApp。这次冒险展示了这一尖端技术堆栈的力量。

Additional Resources

其他资源

• Explore the code: https://github.com/[repo URL]
• Learn more about sCrypt: https://github.com/moneybutton/sCrypt/blob/master/README.md
• Access the Yours Wallet: https://yours.bitcoin.com/
• Discover more about Bitcoin SV: https://www.bitcoinsv.io/
• Join the sCrypt Hackathon 2024 (March 17, 2024): [registration link]

May this comprehensive guide inspire you to build more innovative and engaging decentralized applications on the BSV blockchain.

浏览代码：https://github.com/[repo URL]了解有关 sCrypt 的更多信息：https://github.com/moneybutton/sCrypt/blob/master/README.md访问 Yours 钱包：https://yours. bitcoin.com/了解有关比特币 SV 的更多信息：https://www.bitcoinsv.io/加入 2024 年 sCrypt 黑客马拉松（2024 年 3 月 17 日）：[注册链接]希望这份综合指南能够激励您构建更具创新性和吸引力的去中心化应用程序在 BSV 区块链上。