站长图库向大家介绍了uni-app小游戏,五子棋小游戏等相关知识,希望对您有所帮助
使用uni-app如何编写一个五子棋小游戏？下面本篇文章给大家分享一个使用uni-app编写的五子棋小游戏，希望对大家有所帮助！
一、游戏效果图
二、游戏说明
布局：玩家、棋盘、规则、按钮
游戏：玩家落子，电脑根据玩家或者自身的棋子，来进行堵截或成型
设计：电脑利用 权重 来判断哪个点的分值最高
游戏是用 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> &n