快纪念日了，于是找了个拼图微信小游戏把里面图片改了改想哄妹子开心，结果微信小游戏发布不了，只能发小程序，小游戏和小程序的哪点不同？怎么样才能把微信小游戏改成小程序呢？这些小游戏的代码都要放在小程序的哪些文件下？。。。ps我是菜鸟小白经朋友介绍找到了这里。。。
谢谢各位大神

button.js里的代码：

export default class Button {
  constructor(src, x, y, width, height) {
    this.img = new Image()
    this.img.src = src
    this.x = x
    this.y = y
    this.height = height
    this.width = width
  }

  render(ctx) {
    ctx.drawImage(this.img, this.x, this.y, this.width, this.height)
  }

  isTapped(x, y) {
    if (x > this.x && x < (this.x + this.width) && y > this.y && y < (this.y + this.height)) {
      return true
    }
    return false
  }
}


eventUtil.js里的代码：

const __ = {
    x: Symbol('x'),
    y: Symbol('y'),
    onTap: Symbol('onTap'),
    onSwipe: Symbol('onSwipe'),
}
const SWIPEGAP = 40
const TYPE_TAP = 'tap'
const TYPE_SWIPE = 'swipe'

export default class EventUtil {
    constructor(onTap = function () {}, onSwipe = function () {}) {
        this[__.x] = 0;
        this[__.y] = 0;
        this[__.onTap] = onTap;
        this[__.onSwipe] = onSwipe;
        this.initEvent()
    }


    initEvent() {
        canvas.addEventListener('touchstart', ((e) => {
            e.preventDefault()

            this[__.x] = e.changedTouches[0].clientX
            this[__.y] = e.changedTouches[0].clientY
        }).bind(this))

        canvas.addEventListener('touchend', ((e) => {
            e.preventDefault()

            let deltaX = e.changedTouches[0].clientX - this[__.x]
            let deltaY = e.changedTouches[0].clientY - this[__.y]

            if (deltaX * deltaX + deltaY * deltaY < SWIPEGAP * SWIPEGAP) {
                return this.fireEvent(TYPE_TAP)
            }
            if (Math.abs(deltaX) > Math.abs(deltaY)) {
                if (deltaX > 0) {
                    return this.fireEvent(TYPE_SWIPE, 'right')
                } else {
                    return this.fireEvent(TYPE_SWIPE, 'left')
                }
            } else {
                if (deltaY > 0) {
                    return this.fireEvent(TYPE_SWIPE, 'down')
                } else {
                    return this.fireEvent(TYPE_SWIPE, 'up')
                }
            }

        }).bind(this))
    }
    fireEvent(type, direction) {
        var event = {}
        event.x = this[__.x]
        event.y = this[__.y]
        if (direction) {
            event.direction = direction
        }
        switch (type) {
            case TYPE_TAP:
                return this[__.onTap](event)
            case TYPE_SWIPE:
                return this[__.onSwipe](event)
            default:
                break;
        }
    }
}

Symbol.js里的代码：

let Symbol  = window.Symbol
let idCounter = 0

if (!Symbol) {
  Symbol = function Symbol(key) {
    return `__${key}_${Math.floor(Math.random() * 1e9)}_${++idCounter}__`
  }

  Symbol.iterator = Symbol('Symbol.iterator')
}

window.Symbol = Symbol


main.js里的代码：

import EventUtil from './base/eventUtil'
import BackGround from './runtime/background'
import GameInfo from './runtime/gameinfo'
import DataBus from './databus'

let ctx = canvas.getContext('2d')
let databus = new DataBus()


/**
 * 游戏主函数
 */
export default class Main {
  constructor() {
    this.bg = new BackGround(ctx)
    this.gameInfo = new GameInfo()

    let eventUtil = new EventUtil(((e) => {
      this.gameInfo.tap(e)
    }).bind(this), ((e) => {
      this.movePieces(e.direction);
    }).bind(this))

    databus.reset()

    window.requestAnimationFrame(
      this.loop.bind(this),
      databus.pieces.forEach((item, position) => {
        item.render(ctx);
      })
    )
  }

  /**
   * 移动方块的方法
   * 
   * @param {any} direction 移动方向
   * @returns 
   * @memberof Main
   */
  movePieces(direction) {
    let targetPiece
    switch (direction) {
      case 'up':
        targetPiece = databus.emptyPosition + databus.stage
        break;
      case 'down':
        targetPiece = databus.emptyPosition - databus.stage
        break;
      case 'left':
        targetPiece = databus.emptyPosition + 1
        if (Math.floor(targetPiece / databus.stage) !== Math.floor(databus.emptyPosition / databus.stage)) {
          // 如果两个商不相等，说明左右滑动出现了换行现象，不能执行
          return;
        }
        break;
      case 'right':
        targetPiece = databus.emptyPosition - 1
        if (Math.floor(targetPiece / databus.stage) !== Math.floor(databus.emptyPosition / databus.stage)) {
          return;
        }
        break;
      default:
        break;
    }
    databus.pieces.forEach((item) => {
      if (item.position === targetPiece) {
        item.move(databus.emptyPosition)
        databus.emptyPosition = targetPiece
      }
    })
  }

  checkGameOver() {
    if (databus.gameOver || databus.pieces.length === 0) {
      return
    }
    for (let i = 0; i < databus.pieces.length; i++) {
      let piece = databus.pieces[i]
      if (piece.index !== piece.position) {
        return false
      }
    }
    databus.gameOver = true
    databus.finalTime = databus.getCurrentTime()
  }
  /**
   * canvas重绘函数
   * 每一帧重新绘制所有的需要展示的元素
   */
  render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)

    this.bg.render(ctx)
    databus.pieces.forEach((item) => {
      item.render(ctx);
    })
    this.gameInfo.render(ctx)
  }

  // 游戏逻辑更新主函数
  update() {
    // 统计是否有动画正在播放
    let isAniPlaying = false
    databus.pieces.forEach((item) => {
      item.update();
      if (item.ani !== 1) {
        isAniPlaying = true
      }
    })

    // 如果没有动画正在播放，查看游戏是否结束
    if (!isAniPlaying) {
      this.checkGameOver()
    }
  }

  // 实现游戏帧循环
  loop() {
    this.update()
    this.render()

    window.requestAnimationFrame(
      this.loop.bind(this),
      canvas
    )
  }
}


简介

一个微信小程序游戏，滑动进行方块拼接


源码目录介绍

``` text
./js
   base                                   // 定义游戏开发基础类
             button.js                          // 游戏内可点击图片类
             eventUtil.js                       // 处理点击事件的类
   libs
              bezier.js                          // 用于进行淡入淡出动画的类库 https://github.com/gre/bezier-easing
             symbol.js                          // ES6 Symbol简易兼容
             weapp-adapter.js                   // 小游戏适配器
    models
             piece.js                           // 拼图方块类
   runtime
             background.js                      // 背景类
              gameInfo.js                        // 游戏菜单、按钮和分数
             gameMap.js                         // 用于提供游戏的随机地图
              music.js                           // 全局音效管理器
             databus.js                             // 管控游戏状态
              main.js                                // 游戏入口主函数

```