微信小程序实现汉诺塔

原理

说原理，实际上没有什么原理，主要就是模拟汉诺塔拖动；主要困难点 应该是 微信小程序的页面布局、事件的响应等；

实现汉诺塔，主要需要实现的一个功能是 元素组件的拖拽，关于元素拖拽在这篇博客中已经有描述：https://www.cnblogs.com/q1076452761/p/15706227.html

接下来就是把各式各样的拖动后的逻辑 将其实现，然后体现在界面上；

代码

小程序首页

首页元素：

1. 一张图片
2. 标题
3. 输入框
4. 开始游戏 按钮

实现功能：

输入个数，然后点击按钮跳转到汉诺塔界面，生成相应数据量的木条数

xwml 代码

<view class="container">
  <image class="head-img" src="./yeah.jpg"></image>
  <view class="usermotto">
    <text class="user-motto">{
  {motto}}</text>
  </view>
  <form class="submit" catchsubmit="formSubmit">
    <input class="hanoi-count" type="number" placeholder="请输入数量(<=5)" name="input"></input>
    <button class="start-button" type="primary" form-type="submit">开始游戏</button>
  </form>
</view>

表单提交

  formSubmit(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value); 
    var value = e.detail.value;
    wx.redirectTo({
      url: './game?count=' + value.input // 重定向至其他页面，并带上输入的个数
    })
  }

游戏界面

界面元素：

1. 操作次数
2. 三个区域
3. 木条(stick)
4. 返回按钮

实现功能：

1. 木条初始化，摆放
2. 木条拖拽
3. 木条拖拽后校验是否可放入指定位置
4. 操作次数累计
5. 游戏完成校验

wxml

<!--index.wxml-->
<view>操作次数：{
  {operateCount}}</view>
<canvas class="gameCanavs" type="2d">
    <view class="items">

        <view class="vertical1">
            <view wx:for="{
  {stickListA}}" wx:key="index" style="text-align: center;">
                <view class="stick{
  {item.id}}" style="position: absolute; text-align: center;  width: {
  {item.width}}px; height:{
  {item.height}}px;background: rgb({
  {item.width-100}}, 180, {
  {item.width-100}});display: block;bottom: {
  {movingId == item.id ? movingBottomPos: item.bottomPos}}px; left: {
  {movingId == item.id ? strMovingPosX : leftPosA}}; transform:{
  {movingId == item.id ? untranslate : translate}};z-index:9999;" bindtouchmove="touchMove" bindtouchstart="touchStart" bindtouchend="touchEnd" id="item{
  {index}}" data-id="{
  {item.id}}" data-index="{
  {index}}">
                    <view>{
  {item.stickName}}</view>
                </view>
            </view>
        </view>

        <view class="vertical2">
            <view wx:for="{
  {stickListB}}" wx:key="index" style="text-align: center;">
                <view class="stick{
  {item.id}}" style="position: absolute; text-align: center;  width: {
  {item.width}}px; height:{
  {item.height}}px;background: rgb({
  {item.width-100}}, 180, {
  {item.width-100}});display: block;bottom: {
  {movingId == item.id ? movingBottomPos : item.bottomPos}}px; left: {
  {movingId == item.id ? strMovingPosX : leftPosB}}; transform:{
  {movingId == item.id ? untranslate : translate}};z-index:9999;" bindtouchm