填字游戏

起初是公司一个小游戏，从立项到开发完成大概5天吧，因为时间有些赶，最开始写的并不是很好，画字格用的是 table。 UI上面小小出入，跟一个朋友说做这个项目后，朋友建议我用 pixijs，利用闲暇时间重写了一遍，下面是源码

HTML

<p class="time-container"><time id="time">00:00</time></p>
<div class="game-container">
  <canvas id="game" width="500" height="500"></canvas>
  <div class="mask">初始化中...</div>
</div>
<div class="tips-container">
  <p class="fl">提示：</p>
  <p id="tips" class="oh">赫拉利将告诉你人类是如何从动物变成上帝</p>
</div>
<div class="input-container">
  <input type="text" class="game-input" id="game-input" />
  <a href="javascript:;" class="game-input-send">确认</a>
</div>

JavaScript

require(['zepto', 'pixi', 'modal'], function ($, pixi, modal) {
  // 游戏基础配置
  modal.pupup({
    content: `
      <!-- <img src="http://sunday90.cn/upload/2500872220b52768dd9c4e237579f8bc.jpg" /> -->
      <a href="javascript:;" class="btn start-btn">开始计时</a>
    `,
    mask: true,
    success: function (layero) {
      const that = this
      $(layero).on('click', '.start-btn', function (e) {
        console.log(this)
        console.log('开始游戏')
        let time = document.querySelector('#time')
        Countdown.start(0.2, time, function (time) {
          console.log(time)
        })
        that.close()
      })
    }
  })

  const ua = window.navigator.userAgent.toLocaleLowerCase()
  const device = {
    ios: /iphone/g.test(ua),
    android: /android/g.test(ua)
  }

  const unit_size = { width: 50, height: 50 }
  const table = { x: 10, y: 10 }
  const gameContainer = document.querySelector('.game-container')
  const mask = document.querySelector('.mask')
  const input = document.querySelector('#game-input')
  const tipsEl = document.querySelector('#tips')
  const fontStyle = new PIXI.TextStyle({
    fontFamily:
      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
    fontSize: 28,
    fontWeight: '500',
    fill: ['#333'] // gradient
  })
  const time = document.querySelector('#time')
  // 需要渲染的方格二维数组
  const unit_data = [
    [
      { y: 0, x: 1 },
      { y: 0, x: 5 },
      { y: 0, x: 6 },
      { y: 0, x: 7 },
      { y: 0, x: 8 }
    ],
    [
      { y: 1, x: 1 },
      { y: 1, x: 3 },
      { y: 1, x: 8 }
    ],
    [
      { y: 2, x: 1 },
      { y: 2, x: 2 },
      { y: 2, x: 3 },
      { y: 2, x: 4 },
      { y: 2, x: 6 },
      { y: 2, x: 7 },
      { y: 2, x: 8 }
    ],
    [
      { y: 3, x: 3 },
      { y: 3, x: 7 }
    ],
    [
      { y: 4, x: 0 },
      { y: 4, x: 1 },
      { y: 4, x: 2 },
      { y: 4, x: 3 },
      { y: 4, x: 6 },
      { y: 4, x: 7 },
      { y: 4, x: 8 },
      { y: 4, x: 9 }
    ],
    [
      { y: 5, x: 1 },
      { y: 5, x: 7 }
    ],
    [
      { y: 6, x: 1 },
      { y: 6, x: 4 },
      { y: 6, x: 5 },
      { y: 6, x: 6 },
      { y: 6, x: 7 }
    ],
    [
      { y: 7, x: 1 },
      { y: 7, x: 4 }
    ],
    [
      { y: 8, x: 1 },
      { y: 8, x: 2 },
      { y: 8, x: 3 },
      { y: 8, x: 4 }
    ],
    [
      { y: 9, x: 0 },
      { y: 9, x: 1 }
    ]
  ]

  // tips
  const tips = {
    21222324: '赫拉利将告诉你人类是如何从动物变成上帝',
    40414243: '对两次世界大战的哲学思考，直面存在的危机',
    81828384: '看萧红写的这书名还以为是一条河的历史',
    9091: '鲁迅先生的短篇小说集，里面有《狂人日记》',
    64656667: '天下合久必分，分久必合',
    46474849: '与达尔文《物种起源论》及哥白尼《天体运行论》并称为人类三大思想革命的经典之作',
    262728: '三位艺术天才的非凡人生，罗曼罗兰著',
    5678: '证明你上过中学的又一个有力佐证，冰心奶奶如是说',
    11121: '我们都是故事外的人——阿尔贝·加缪',
    13233343: '一种追求简单生活的价值观',
    415161718191: '余华手下一本关于记忆的长篇小说',
    647484: '走遍万水千山，泪尽撒哈拉',
    2737475767: '达康书记别低头，皇冠会掉',
    81828: '中国四大名著之一'
  }

  // 创建 12 * 8 的方格
  const unit = [] // 所有单元格 二维数组
  const unit_block = [] // 需要渲染的单元格
  const selectUnit = { isRow: true, unit: [] } // 选中后的单元格

  // 创建材质
  const unitTexture = PIXI.Texture.fromImage('./assets/images/unit.svg')
  const unitBlockTexture = PIXI.Texture.fromImage('./assets/images/unit-block.svg')
  const unitBlockActiveTexture = PIXI.Texture.fromImage('./assets/images/unit-block-active.svg')

  // 创建舞台
  const container = new PIXI.Container()
  container.x = 0
  container.y = 0

  // 倒计时
  const Countdown = {
    down(callBack, success) {
      clearInterval(this.Interval)
      callBack(success === true ? this.countTime * 60 - this.time / 1000 : '时间结束')
    },
    check(v) {
      if (v < 10) {
        return '0' + v
      } else {
        return v
      }
    },
    start(time, el, callBack) {
      this.countTime = time
      var endDate = new Date().getTime() + time * 60 * 1000
      this.Interval = setInterval(() => {
        this.time = endDate - new Date().getTime()
        if (this.time <= 0) this.down(callBack)
        var m = parseInt((this.time / 1000 / 60) % 60, 10)
        var s = parseInt((this.time / 1000) % 60, 10)
        var ms = parseInt(this.time % 1000, 10)
        el.innerText = this.check(m) + ':' + this.check(s)
      }, 1)
    }
  }

  // es7
  setTimeout(() => {
    initGame()
  }, 300)

  async function initGame() {
    await (() => {
      return new Promise((resolve, reject) => {
        mask.classList.add('mask-in')
        setTimeout(() => {
          resolve()
        }, 300)
      })
    })()

    // 创建画布
    const app = new PIXI.Application(table.x * unit_size.width, table.y * unit_size.height, {
      backgroundColor: 0xf1c16c,
      antialias: true,
      view: document.querySelector('#game'),
      resolution: window.devicePixelRatio
    })
    app.stage.interactive = true
    app.stage.addChild(container)

    // 绘制表格
    creatTable(table, unit_data, async function () {
      await (() => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            mask.innerText = '初始化完成,祝您玩的开心'
            resolve()
          }, 1000)
        })
      })()

      await setTimeout(() => {
        mask.classList.add('mask-out')
        console.log('初始化完成')
      }, 500)
    })
  }

  function creatTable(table, block, callBack) {
    let row = table.x
    let col = table.y
    let index = 0
    let width = unit_size.width * table.x * unit_size.width
    let height = unit_size.width * table.y * unit_size.height

    let i = 0
    while (i < row) {
      unit.push([])
      let k = 0
      while (k < col) {
        let sprite = new PIXI.Sprite(unitTexture)
        let unitContainer = new PIXI.Container()
        let x = (k * unit_size.width) % width
        let y = (i * unit_size.height) % height
        sprite.interactive = true
        sprite.isDown = false
        sprite.isEmpty = true
        sprite.anchor.set(0, 0)
        sprite.width = unit_size.width
        sprite.height = unit_size.height
        sprite.index = index++ // 唯一id
        unitContainer.width = unit_size.width
        unitContainer.height = unit_size.height
        unitContainer.x = x
        unitContainer.y = y
        sprite.x = 0
        sprite.y = 0
        sprite.X = x / unit_size.width // x坐标
        sprite.Y = y / unit_size.height // y 坐标
        unit[i].push(sprite)
        unitContainer.addChild(sprite)
        container.addChild(unitContainer)
        k++
      }
      i++
    }

    // 添加事件
    for (let row = 0, uLen = unit.length; row < uLen; row++) {
      add: for (let col = 0, len = unit[row].length; col < len; col++) {
        // console.log(unit[row][col].x / unit_size.width, unit[row][col].y / unit_size.height);
        for (let k = 0, fLen = block[row].length; k < fLen; k++) {
          if (block[row][k].x === col && block[row][k].y === row) {
            unit[row][col].isEmpty = false
            unit[row][col].texture = unitBlockTexture
            unit[row][col].buttonMode = true
            unit[row][col].on('tap', onClick)
            unit_block.push(unit[row][col])
            continue add
          }
        }
      }
    }
    // 绘制边框
    drawBorder(table, unit_data, container)
    typeof callBack === 'function' ? callBack() : void 0
  }

  function onClick() {
    input.focus()
    const X = this.X,
      Y = this.Y
    let cols = [],
      rows = unit[Y]
    // 重置默认
    reset(unit_block)

    this.isDown = !this.isDown
    unit.forEach(row => {
      if (row[X].X === X) cols.push(row[X])
    })

    if (this.selectRow !== undefined) {
      if (this.isDown && this.selectRow) {
        renderCol(X, Y, cols, rows)
      } else {
        renderRow(X, Y, rows, cols)
      }
    } else {
      if (this.isDown) {
        renderRow(X, Y, rows, cols)
      } else {
        renderCol(X, Y, cols, rows)
      }
    }

    let key = selectUnit.unit.reduce((total, unit) => {
      return total + unit.index.toString()
    }, '')
    tipsEl.innerText = tips[key]
    console.log(key)
  }

  // 渲染行
  function renderRow(x, y, row, col) {
    let unit = aroundUnit(row, x, y, true)
    let len = unit.length
    // 如果临近元素为为空 (1 代表自身) 渲染列
    if (len <= 1) {
      renderCol(x, y, col, row)
      return
    }

    unit.forEach(item => {
      item.texture = unitBlockActiveTexture
      item.selectRow = true
    })

    let storUnit = stor(unit)
    selectUnit.isRow = true
    selectUnit.unit = storUnit
  }

  // 渲染列
  function renderCol(x, y, col, row) {
    let unit = aroundUnit(col, x, y, false)
    let len = unit.length
    // 如果临近元素为空 (1 代表自身) 渲染行
    if (len <= 1) {
      renderRow(x, y, row, col, true)
      return
    }
    unit.forEach(item => {
      item.texture = unitBlockActiveTexture
      item.selectRow = false
    })

    let storUnit = stor(unit)
    selectUnit.isRow = false
    selectUnit.unit = storUnit
  }

  // 获取相邻元素  arry 一维数组 行 或者 列
  function aroundUnit(arry, x, y, selectRow) {
    let n = selectRow ? x : y
    let len = arry.length
    let unit = []
    for (let i = 0; i < len; i++) {
      if (arry[n + i] && arry[n + i].isEmpty) break
      if (arry[n + i]) {
        unit.push(arry[n + i])
      }
    }

    for (let i = 1; i < len; i++) {
      if (arry[n - i] && arry[n - i].isEmpty) break
      if (arry[n - i]) unit.push(arry[n - i])
    }
    return unit
  }

  // 重置视图
  function reset(unit) {
    unit.forEach(item => {
      item.isDown = false
      item.texture = unitBlockTexture
    })
  }

  // 排序
  function stor(unit) {
    function compare(property) {
      return function (a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    }
    return unit.sort(compare('index'))
  }

  function drawBorder(table, block, ctx) {
    let row = table.x,
      col = table.y
    let containerWidth = row * unit_size.width,
      containerHeight = col * unit_size.height
    let startY = unit_size.height,
      startX = unit_size.width
    drawLine({ width: 1, color: 0xb38743, alpha: 1 }, ctx, containerWidth, containerHeight, startX, startY, row, col)
  }

  // 绘制线条
  function drawLine(lineStyle, ctx, width, height, X, Y, col, row) {
    let i = 1,
      n = 1
    const graphics = new PIXI.Graphics()
    // 绘制行
    while (i < row) {
      graphics.beginFill()
      graphics.lineStyle(lineStyle.width, lineStyle.color, lineStyle.alpha)
      graphics.moveTo(0, Y * i)
      graphics.lineTo(width, Y * i)
      graphics.endFill()
      ctx.addChild(graphics)
      i++
    }
    // 绘制列
    while (n < col) {
      graphics.beginFill()
      graphics.lineStyle(lineStyle.width, lineStyle.color, lineStyle.alpha)
      graphics.moveTo(X * n, 0)
      graphics.lineTo(X * n, height)
      graphics.endFill()
      ctx.addChild(graphics)
      n++
    }
  }

  // 解决键盘遮住 输入框

  $(document).on('focus', 'input', function (e) {
    setTimeout(
      () => {
        // this.scrollIntoViewIfNeeded(false);
        this.scrollIntoView({
          block: 'end',
          behavior: 'smooth'
        })
      },
      device.ios ? 200 : 0
    )
  })

  // 输入
  $('.input-container').on('click', '.game-input-send', async function (e) {
    let value = $.trim(input.value)
    if (value.length > selectUnit.unit.length) {
      modal.toast(`最大可输入字数为${selectUnit.unit.length}个`)
      return false
    }
    let param = selectUnit.unit.map((item, index) => {
      return {
        value: value.charAt(index),
        x: item.X,
        y: item.Y,
        index: item.index
      }
    })
    console.log(param)
    let flag = await new Promise((resolve, reject) => {
      $.ajax({
        async: true,
        type: 'post',
        url: './game.php',
        data: { data: param },
        success: function (data) {
          if (data.status === '0') {
            modal.toast('填错了哦')
            input.value = ''
            resolve(false)
          } else {
            resolve(true)
          }
        },
        error: function (err) {
          console.log(err)
        }
      })
    })

    if (!flag) return

    ;[...value].forEach((chart, index) => {
      if (selectUnit.unit[index].parent.children.length > 1) {
        selectUnit.unit[index].parent.children.forEach((sprite, i) => {
          if (sprite.type === 'text') sprite.text = chart
        })
        return false
      }

      let richText = new PIXI.Text(chart, fontStyle)
      richText.type = 'text'
      richText.anchor.set(0.5)
      richText.x = selectUnit.unit[index].parent.width / 2
      richText.y = selectUnit.unit[index].parent.height / 2
      selectUnit.unit[index].parent.addChild(richText)
      // container.addChild(richText);
    })
    input.value = ''
  })
})

PHP

后端就比较容易了,前端传每一个字格 id 以及值，后端验证字格 id 值 就行了

/*
* @Author: Edward
* @Date: 2018-05-02 23:27:31
* @Last Modified by: Edward
* @Email: 809537981@qq.com
* @Last Modified time: 2018-05-03 16:26:08
*/

header('Content-Type:application/json; charset=utf-8');

$post = $_POST['data'];

$data = [
  '1' => '局',
  '11' => '外',
  '5' => '繁',
  '6' => '星',
  '7' => '春',
  '8' => '水',
  '13' => '极',
  '33' => '主',
  '18' => '浒',
  '21' => '人',
  '22' => '类',
  '23' => '简',
  '24' => '史',
  '28' => '传',
  '27' => '人',
  '26' => '名',
  '37' => '民',
  '46' => '梦',
  '47' => '的',
  '57' => '名',
  '48' => '解',
  '49' => '析',
  '64' => '三',
  '65' => '国',
  '66' => '演',
  '67' => '义',
  '67' => '义',
  '74' => '毛',
  '81' => '呼',
  '82' => '兰',
  '83' => '河',
  '84' => '传',
  '40' => '存',
  '41' => '在',
  '42' => '主',
  '43' => '义',
  '51' => '细',
  '61' => '雨',
  '71' => '中',
  '81' => '呼',
  '90' => '呐',
  '91' => '喊',
];

$flag = false;

foreach($post as $index => $arry) {
  if ($data[$arry['index']] == $arry['value']) {
    $flag = true;
  } else {
    $flag = false;
  }
}

if ($flag) {
  echo '{"status": "1"}';
} else {
  echo '{"status": "0"}';
}

收工