我要写一个微信小程序，我期望有首页，index页面有三个圆的按钮，分别是基础手语，狼人杀，三国杀，点击按钮能跳到三个不同的页面，帮我写好js，wxss，wxml代码。

当然，我可以帮你设计一个基本的小程序结构。首先，我们需要准备三个文件：`pages/index/index.wxss`（样式表）、`pages/index/index.wxml`（视图层）以及`pages/home/home.js`（逻辑处理）。这里只提供关键代码片段，你可以根据实际需求进行扩展。

**1. `pages/index/index.wxss` (样式表)**:

button {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin: 20rpx;
  display: inline-block;
  text-align: center;
  line-height: 80rpx;
}

**2. `pages/index/index.wxml` (视图层 - 首页模板)**

<view class="container">
  <button bindtap="toBasicHandSign" wx:if="{{isShowBasicHandSign}}" class="button">基础手语</button>
  <button bindtap="toLanGManKill" wx:else if="{{isShowLangManKill}}" class="button">狼人杀</button>
  <button bindtap="toThreeKingdoms" wx:else class="button">三国杀</button>
</view>

**3. `pages/home/home.js` (逻辑处理 - 按钮跳转)**

Page({
  data: {
    isShowBasicHandSign: true, // 初始显示基础手语页面
    isShowLangManKill: false,
    isShowThreeKingdoms: false,
  },
  toBasicHandSign: function() {
    this.setData({
      isShowBasicHandSign: false,
      isShowLangManKill: true,
      isShowThreeKingdoms: false,
    });
    wx.navigateTo({
      url: '/pages/home/home',
    });
  },
  toLanGManKill: function() {
    this.setData({
      isShowBasicHandSign: false,
      isShowLangManKill: false,
      isShowThreeKingdoms: true,
    });
    wx.navigateTo({
      url: '/pages/home/home',
    });
  },
  toThreeKingdoms: function() {
    // 同样设置为false，但不跳转，因为已经到达了三国杀页面
  },
})

在这个例子中，我们使用了`bindtap`事件监听器来响应按钮点击，并在`home.js`中的相应方法里切换显示状态并导航到对应的子页面。你需要创建另外两个页面`pages/home/home.wxss`、`pages/home/home.wxml`分别对应基础手语、狼人杀和三国杀的内容。