小游戏之人机五子棋（uniapp）

五子棋游戏开发

原创

已于 2023-03-13 13:50:28 修改 · 3.7k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #uni-app #前端 #游戏 #vue

于 2021-12-23 00:07:49 首次发布

一款使用uniapp+uview实现的五子棋游戏，玩家与电脑对战，通过权重算法智能选择最佳落子位置。

一、先上效果图

在这里插入图片描述

二、游戏说明

布局：玩家、棋盘、规则、按钮

游戏：玩家落子，电脑根据玩家或者自身的棋子，来进行堵截或成型

设计：电脑利用权重来判断哪个点的分值最高

代码里注释都有，慢慢琢磨

游戏是用 uniapp + uview 写的，里面一些样式，有的我自己定义的全局的，有的是uview内置的，可自行解决

三、游戏代码

(1). 布局

<template>
	<view class="goBang u-border-top">
		<!-- 对战信息 -->
		<view class="goBang-user flexItems">
			<view class="flexCenter flexColumn flex1 box">
				<u-icon class="goBang-chess" name="/static/image/gobang/black.png" size="50"></u-icon>
				<view class="u-m-t-20 fontBold c757575">电脑</view>
			</view>
			<view class="fontBold cmain u-font-40">VS</view>
			<view class="flexCenter flexColumn flex1 box">
				<u-icon class="goBang-chess" name="/static/image/gobang/white.png" size="50"></u-icon>
				<view class="u-m-t-20 fontBold c757575">玩家</view>
			</view>
		</view>
		<view class="goBang-container boxtb">
			<!-- 棋盘底座 -->
			<view class="goBang-board u-rela">
				<!-- 棋盘网格 -->
				<view class="goBang-grid-box u-rela">
					<view class="goBang-grid">
						<view class="goBang-grid-tr" v-for="(item,index) in 14" :key="index">
							<view class="goBang-grid-td" v-for="(item,index) in 14" :key="index"></view>
						</view>
					</view>
					<view class="point-c"></view>
					<view class="point-1"></view>
					<view class="point-2"></view>
					<view class="point-3"></view>
					<view class="point-4"></view>
				</view>
				<!-- 隐藏的棋盘网格  用于下棋子用的 -->
				<view class="goBang-check">
					<view class="goBang-check-tr" v-for="(item1,index1) in chessBoard" :key="index1">
						<view class="goBang-check-td" v-for="(item2,index2) in item1" :key="index2" @click="playerChess(index1,index2)">
							<image class="goBang-check-chess" :src="player[item2]" v-if="item2!=0"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 规则说明 -->
			<view class="boxtb">
				<view class="u-m-t-10 fontBold u-font-32 c757575">规则说明:</view>
				<view class="u-m-t-20 c757575">1、玩家先手</view>
				<view class="u-m-t-10 c757575">2、其他规则，不知道就百度去，惯得！！！</view>
			</view>
		</view>
		
		<!-- 功能按钮 -->
		<view class="goBang-btns">
			<view class="goBang-btn" @click