uni-app如何编写一个五子棋小游戏「附游戏代码」

一、前言

随着移动互联网的不断发展和普及，小游戏的应用越来越广泛。而通过uni-app，我们可以轻松编写跨平台的小游戏。本文将介绍如何使用uni-app编写一个五子棋小游戏。

二、准备工作

2.1 创建uni-app项目

我们首先需要在uni-app中新建一个项目。打开HBuilderX，在欢迎界面中选择“创建uni-app项目”，并填写相关信息：

项目名称：五子棋
选择框架：uni-app
选择模板：空

点击“创建”即可生成空白的uni-app项目。

2.2 安装并引入第三方库

为了便于实现五子棋的逻辑和展示，我们需要安装并引入一些第三方库。

首先，在命令行中执行以下代码安装qrious库：

npm install qrious --save 

接着，在项目中引入qrious库。在pages目录下新建一个common文件夹，用于存放公共资源，再在其中创建一个qr-code文件夹，用于存放qrious库。将下载得到的qrious.min.js文件放入qr-code文件夹中，并在main.js中引入：

import QrCode from '@/common/qr-code/qrious.min.js'

三、实现五子棋

3.1 游戏逻辑

为了实现五子棋的逻辑，我们需要定义一些数据。在pages目录下新建一个game文件夹，用于存放游戏相关的文件，再在其中创建一个gameData.js文件：

const ROW = 15      // 棋盘行数
const COL = 15      // 棋盘列数
let chessBoard = [] // 存放棋盘格子上的棋子信息，即棋盘
for(let i=0; i
  chessBoard[i] = []
  for(let j=0; j
    chessBoard[i][j] = 0
  }
}
export default {
  // 游戏是否结束
  gameover: false,
  
  // 上一步棋落下的坐标
  lastMove: { row: -1, col: -1, type: 0 },
  
  // 当前玩家，1为黑方，2为白方
  currentPlayer: 1, 
  
  // 棋盘
  chessBoard: chessBoard,
  // ...
}

上面的代码中，ROW和COL分别为棋盘的行数和列数，chessBoard数组用于存放棋盘格子上的棋子信息，即棋盘。gameover用于标记游戏是否结束，lastMove用于存储上一步的棋子位置以及其类型（1为黑，2为白），currentPlayer用于记录当前的玩家是哪一方。

我们还需要编写一些方法，用于检查胜负、落子等操作。在gameData.js中继续编写：

// 判断某一方是否胜利
function isWin(row, col, type, chessBoard) {
  let count = 1
  // 向上
  for(let i=row-1; i>=0; i--){
    if(chessBoard[i][col] === type){
      count++
    } else {
      break
    }
  }
  // 向下
  for(let i=row+1; i
    if(chessBoard[i][col] === type){
      count++
    } else {
      break
    }
  }
  if(count >= 5){
    return true
  }
  // ...
}
export default {
  // ...
  // 检查胜负
  checkWin(row, col) {
    if(isWin(row, col, this.currentPlayer, this.chessBoard)){
      console.log(this.currentPlayer == 1 ? '黑方胜利！' : '白方胜利！')
      this.gameover = true
    }
  },
  // 落子
  playChess(row, col) {
    if(this.chessBoard[row][col] !== 0){
      return false
    }
    this.chessBoard[row][col] = this.currentPlayer
    this.lastMove = { row, col, type: this.currentPlayer }
    this.checkWin(row, col)
    this.currentPlayer = this.currentPlayer == 1 ? 2 : 1
    return true
  }
}

代码中checkWin方法用于判断是否有五子连珠，playChess方法用于落子并切换当前玩家。

3.2 游戏展示

有了游戏逻辑，我们还需要在页面上展示游戏。在game文件夹中创建一个game.vue文件，用于编写五子棋页面的开发：

<template>
  <view class="container">
    <canvas canvas-id="chess-canvas" style="width: 100vw; height: 100vh;"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    ></canvas>
  </view>
</template>
<script>
import gameData from './gameData.js'
import QrCode from '@/common/qr-code/qrious.min.js'
export default {
  data() {
    return {
      canvasWidth: 0,   // 棋盘画布的宽度
      canvasHeight: 0,  // 棋盘画布的高度
      startX: 0,        // 触摸开始的x坐标
      startY: 0,        // 触摸开始的y坐标
      step: 0,          // 所有的下棋步数
    }
  },
  mounted() {
    this.initCanvas()
  },
  methods: {
    // 初始化canvas
    initCanvas() {
      let query = uni.createSelectorQuery().in(this)
      query.select('#chess-canvas')
        .fields({
          node: true,
          size: true,
        })
        .exec(res => {
          let canvas = res[0].node
          let width = res[0].width
          let height = res[0].height
          let dpr = uni.getSystemInfoSync().pixelRatio
          canvas.width = width * dpr
          canvas.height = height * dpr
          let context = canvas.getContext('2d')
          context.scale(dpr, dpr)
          this.canvasWidth = width
          this.canvasHeight = height
          this.drawChessBoard(context)
        })
    },
    // 绘制棋盘
    drawChessBoard(context) {
      let size = this.canvasWidth / (gameData.chessBoard.length + 1)
      context.strokeStyle = '#BFBFBF'
      for(let i=0; i
        context.moveTo(size + i * size, size)
        context.lineTo(size + i * size, size * (gameData.chessBoard.length))
        context.stroke()
        context.moveTo(size, size + i * size)
        context.lineTo(size * (gameData.chessBoard.length), size + i * size)
        context.stroke()
      }
    },
    // 绘制棋子
    drawChess(context, row, col, currentPlayer) {
      let size = this.canvasWidth / (gameData.chessBoard.length + 1)
      context.beginPath()
      context.arc(size + col * size, size + row * size, size/2.5, 0, 2*Math.PI)
      context.closePath()
      let gradient = context.createRadialGradient(size + col * size - 2, size + row * size - 2, size/2.5 - 10, size + col * size, size + row * size, 0)
      if(currentPlayer === 1){  // 黑方
        gradient.addColorStop(0,'#0a0a0a')
        gradient.addColorStop(1,'#636766')
      } else {                   // 白方
        gradient.addColorStop(0,'#d1d1d1')
        gradient.addColorStop(1,'#f9f9f9')
      }
      context.fillStyle = gradient
      context.fill()
    },
    // 触摸开始处理
    onTouchStart(e) {
      if(gameData.gameover){
        return
      }
      let x = Math.floor(e.changedTouches[0].x / (this.canvasWidth / (gameData.chessBoard.length + 1)))
      let y = Math.floor(e.changedTouches[0].y / (this.canvasWidth / (gameData.chessBoard.length + 1)))
      this.startX = e.changedTouches[0].x
      this.startY = e.changedTouches[0].y
      if(this.inChessboard(x, y)){
        this.drawChess(uni.createCanvasContext('chess-canvas'), y, x, gameData.currentPlayer)
      }
    },
    // 触摸移动处理
    onTouchMove(e) {
      if(gameData.gameover){
        return
      }
      let x = Math.floor(e.changedTouches[0].x / (this.canvasWidth / (gameData.chessBoard.length + 1)))
      let y = Math.floor(e.changedTouches[0].y / (this.canvasWidth / (gameData.chessBoard.length + 1)))
      let context = uni.createCanvasContext('chess-canvas')
      if(this.inChessboard(x, y) && (x != this.lastX || y != this.lastY)){
        gameData.chessBoard[y][x] = 3
        this.clearChessboard(context)
        this.drawHistory(context)
        this.drawChess(context, y, x, gameData.currentPlayer)
        this.lastX = x
        this.lastY = y
      }
    },
    // 触摸结束处理
    onTouchEnd(e) {
      if(gameData.gameover){
        return
      }
      let x = Math.floor(e.changedTouches[0].x / (this.canvasWidth / (gameData.chessBoard.length + 1)))
      let y = Math.floor(e.changedTouches[0].y / (this.canvasWidth / (gameData.chessBoard.length + 1)))
      if(this.inChessboard(x, y)){
        if(gameData.playChess(y, x)){
          this.drawChess(uni.createCanvasContext('chess-canvas'), y, x, gameData.lastMove.type)
          this.drawHistory(uni.createCanvasContext('chess-canvas'))
          this.playSound()
        }
      }
    }
  }
}
</script>
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}
</style>

代码中，我们使用canvas绘制出五子棋的棋盘。drawChessBoard方法用于绘制棋盘，drawChess方法用于绘制棋子，onTouchStart、onTouchMove、onTouchEnd方法分别对应触摸开始、移动、结束的处理。

四、游戏完成

至此，我们已经完成了五子棋小游戏的编写。在进行最后的编译前，我们需要在manifest.json文件中添加小程序相关配置，增加游戏的可玩性。比如设置小程序背景音乐等等。在manifest.json文件中添加如下代码：

{
  "mp-weixin": {
    "appid": "***",
    "title": "五子棋小游戏",
    "pages": [
      "pages/game/game"
    ],
    "window": {
      "navigationBarBackgroundColor": "#000",
      "navigationBarTitleText": "五子棋小游戏",
      "navigationBarTextStyle": "white",
      "backgroundTextStyle": "light",
      "backgroundColor": "#f9f9f9",
      "enablePullDownRefresh": false,
      "backgroundAudio": {
        "src": "http://***",
        "loop": true
      }
    },
    "tabBar": {
      "color": "#666",
      "selectedColor": "#3cc51f",
      "backgroundColor": "#fff",
      "borderStyle": "white",
      "list": [
        {
          "text": "五子棋",
          "pagePath": "pages/game/game",
          "iconPath": "./static/tabbar/game.png",
          "selectedIconPath": "./static/tabbar/game_active.png"
        }
      ]
    }
  }
}

4.1 运行小游戏

将项目在微信小程序开发工具中运行，在游戏页面中即可体验五子棋小游戏。

项目完整代码可查看 仓库代码。

五、总结

本文通过uni-app实现了一个五子棋小游戏。我们从游戏逻辑入手，编写了相关的数据及方法。在页面上，我们使用canvas绘制出游戏的棋盘，并实现了触摸事件的处理。最后，我们还增加了小程序相关配置，来提高游戏的可玩性，增强用户体验。希望读者在阅读本文时，能够了解uni-app的基础用法，以及快速实现一个完整小游戏的开发流程。