canvas学习之五子棋规则法部分实现

最新推荐文章于 2024-05-17 14:32:46 发布
最新推荐文章于 2024-05-17 14:32:46 发布
阅读量246 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js 游戏程序 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l250744647/article/details/129399452
版权

前言

想学习下vue中使用canvas，直接学习感觉太无聊，通过实现五子棋增加些乐趣，过程中发现规则算法实现起来还是有一些复杂度的

代码实现

初步代码结构

<template>
    <canvas ref="myCanvas" width="640" height="640" @click="func.next"></canvas>
    <div>
        <button @click="func.start">开始</button>
        <span style="color: red">{{property.message}}</span>
    </div>
</template>

<script>
import {ref, reactive, onMounted} from 'vue'
export default {
    name: "GoBang",
    setup(){
        const myCanvas = ref(null)

        const property = reactive({
            size: 40, //棋盘每格宽高
            rowNum: 15, //棋盘行数列数
            message: '',
        })

        const ai = reactive({

        })

        const func = reactive({
            start: () => {

            },
            next: () => {
                
            }
        })

        onMounted(() => {

        })

        return{
            myCanvas,
            property,
            func
        }
    }
}
</script>

<style scoped>

</style>

canvas组件context要在所有组件加载完才能调用，所以要放到onMunted中

let ctx = ref(null)
const func = reactive({
    init: () => {
        ctx = myCanvas.value.getContext('2d')
    },
    drawChessBoard: () => {
        ctx.beginPath()
        ctx.rect(0, 0, (property.size * (property.rowNum + 1)), (property.size * (property.rowNum + 1)))
        ctx.strokeStyle = 'green'
        ctx.stroke()
        //棋盘
        for(let i = 1; i <= property.rowNum; i++){
            ctx.moveTo(i * property.size, property.size)
            ctx.lineTo(i * property.size, property.size * property.rowNum)
        }
        for(let j = 1; j <= property.rowNum; j++){
            ctx.moveTo(property.size, property.size * j)
            ctx.lineTo(property.size * property.rowNum, property.size * j)
        }
        ctx.stroke()
        ctx.closePath()
    },
    start: () => {

    },
    next: () => {

    }
})
onMounted(() => {
    func.init()
    func.drawChessBoard()
})

效果图

画棋子

const property = reactive({
    size: 40, //棋盘每格宽高
    rowNum: 15, //棋盘行数列数
    message: '',
    validRange: 0.3  //棋子的半径占每格比
})
//func中
drawChess: (x, y, color) => {
    ctx.beginPath()
    ctx.moveTo(x+ property.size * property.validRange, y )
    ctx.arc(x, y, property.size * property.validRange, 0, 2 * Math.PI)
    ctx.strokeStyle = color
    ctx.fillStyle = color
    ctx.fill()
    ctx.stroke()
    ctx.closePath()
}

ai逻辑

const operate = reactive({
    computer: 1,
    people: 2
})
const ai = reactive({
    //检测是否五子
    checkFive: () => {},
    //查找单4的位置
    findBySingleFour: () => {},
    //查找下一步棋后将会双4的位置
    findWillBeDoubleFour: () => {},
    //查找下一步棋后将会单4且双三的位置 暂不实现
    findWillBeSingleFourAndDoubleThree: () => {},
    //查找下一步棋后将会两个双三的位置 暂不实现
    findWillBeTwoDoubleThree: () => {},
    //查找下两步棋后将会是双4的位置 代替上面两个未实现的方法，但减少了智能
    findWillBeDoubleFourStep2: () => {},
    //查找跟随位置，跟随人下棋的位置 落子到旁边
    findFollowPosition:() => {},
    //周边找不到位置 随机
    findRandomPosition: () => {}
})

checkFive

checkFive: (a, rowNum, operator) => {
    for(let i = 0; i < rowNum; i++){
        for(let j = 0; j < rowNum ; j++){
            if(i >= 2 && i < (rowNum - 2) && (a[i][j] & a[i + 1][j] & a[i + 2][j] & a[i - 1][j] & a[i - 2][j]) == operator ||
                j >= 2 && j < (rowNum - 2) && (a[i][j] & a[i][j + 1] & a[i][j + 2] & a[i][ j - 1] & a[i][j - 2]) == operator ||
                i >= 2 && j >= 2 && i < (rowNum - 2) && j < (rowNum - 2) && (a[i][j] & a[i + 1][j + 1] & a[i + 2][j + 2] & a[i - 1][j - 1] & a[i - 2][j - 2]) == operator ||
                i >= 2 && j >= 2 && i < (rowNum - 2) && j < (rowNum - 2) && (a[i][j] & a[i - 1][j + 1] & a[i - 2][j + 2] & a[i + 1][j - 1] & a[i + 2][j - 2]) == operator){
                return true
            }
        }
    }
    return false
}

findBySingleFour

//查找单4的位置
findBySingleFour: (a, rowNum, operator) => {
    let sum = 4 * operator
    for(let i = 0; i < rowNum; i++){
        for(let j = 0; j < rowNum; j++){
            //横向判断
            if(i >= 2 && i < rowNum - 2 && (a[i][j] + a[i + 1][j] + a[i + 2][j] + a[i - 1][j] + a[i - 2][j]) == sum &&
                (a[i][j] | a[i + 1][j] | a[i + 2][j] | a[i - 1][j] | a[i - 2][j]) == operator){
                for(let index = 0; index < 5; index++){
                    if(a[i - 2 + index][j] == 0){
                        return {
                            x: i - 2 + index,
                            y: j
                        }
                    }
                }
            }
            //纵向判断
            if(j >= 2 && j < rowNum - 2 && (a[i][j] + a[i][j + 1] + a[i][j + 2] + a[i][ j - 1] + a[i][j - 2]) == sum &&
                (a[i][j] | a[i][j + 1] | a[i][j + 2] | a[i][j - 1] | a[i][j - 2]) == operator){
                for(let index = 0; index < 5; index++){
                    if(a[i][j - 2 + index] == 0){
                        return {
                            x: i,
                            y: j - 2 + index
                        }
                    }
                }
            }
            //正斜向判断
            if(i >= 2 && i < rowNum - 2 && j >= 2 && j < rowNum - 2 && (a[i][j] + a[i + 1][j + 1] + a[i + 2][j + 2] + a[i - 1][j - 1] + a[i - 2][j - 2]) == sum &&
                (a[i][j] | a[i + 1][j + 1] | a[i + 2][j + 2] | a[i - 1][j - 1] | a[i - 2][j - 2]) == operator){
                for(let index = 0; index < 5; index++){
                    if(a[i - 2 + index][j - 2 + index] == 0){
                        return {
                            x: i - 2 + index,
                            y: j - 2 + index
                        }
                    }
                }
            }
            //反斜向判断
            if(i >= 2 && i < rowNum - 2 && j >= 2 && j < rowNum - 2 && (a[i][j] + a[i - 1][j + 1] + a[i - 2][j + 2] + a[i + 1][j - 1] + a[i + 2][j - 2]) == sum &&
                (a[i][j] | a[i - 1][j + 1] | a[i - 2][j + 2] | a[i + 1][j - 1] | a[i + 2][j - 2]) == operator){
                for(let index = 0; index < 5; index++){
                    if(a[i - 2 + index][j + 2 - index] == 0){
                        return {
                            x: i - 2 + index,
                            y: j + 2 - index
                        }
                    }
                }
            }
        }
    }
    return null
}

findWillBeDoubleFour

findWillBeDoubleFour: (a, rowNum, operator) => {
    let sum = 3 * operator
    for(let i = 0; i < rowNum; i++){
        for(let j = 0; j < rowNum; j++){
            if(i >= 2 && i < rowNum - 2 && (a[i][j] + a[i + 1][j] + a[i + 2][j] + a[i - 1][j] + a[i - 2][j]) == sum &&
                (a[i][j] | a[i + 1][j] | a[i + 2][j] | a[i - 1][j] | a[i - 2][j]) == operator && (a[i - 2][j] == 0 || a[i + 2][j] == 0)){
                //两边界必须为空
                if(a[i - 2][j] == 0 && i < rowNum - 3 && a[i + 3][j] == 0 ||
                    a[i + 2][j] == 0 && i > 2 && a[i - 3][j] == 0){
                    for(let index = 0; index < 3; index++){
                        if(a[i - 1 + index][j] == 0){
                            return {
                                x: i - 1 + index,
                                y: j
                            }
                        }
                    }
                    //中间三个满了
                    return a[i - 2][j] == 0 && i < rowNum - 3 && a[i + 3][j] == 0 ?
                        {
                            x: i + 2,
                            y: j
                        } :
                        {
                            x: i - 2,
                            y: j
                        }
                }
            }
            //纵向判断
            if(j >= 2 && j < rowNum - 2 && (a[i][j] + a[i][j + 1] + a[i][j + 2] + a[i][ j - 1] + a[i][j - 2]) == sum &&
                (a[i][j] | a[i][j + 1] | a[i][j + 2] | a[i][j - 1] | a[i][j - 2]) == operator && (a[i][j - 2] == 0 || a[i][j + 2] == 0)){
                //两边界必须为空
                if(a[i][j - 2] == 0 && j < rowNum - 3 && a[i][j + 3] == 0 ||
                    a[i][j + 2] == 0 && j > 2 && a[i][j - 3] == 0){
                    for(let index = 0; index < 3; index++){
                        if(a[i][j - 1 + index] == 0){
                            return {
                                x: i,
                                y: j - 1 + index
                            }
                        }
                    }
                    //中间三个满了
                    return a[i][j - 2] == 0 && j < rowNum - 3 && a[i][j + 3] == 0 ?
                        {
                            x: i,
                            y: j + 2
                        } :
                        {
                            x: i,
                            y: j - 2
                        }
                }
            }
            //正斜向判断
            if(i >= 2 && i < rowNum - 2 && j >= 2 && j < rowNum - 2 && (a[i][j] + a[i + 1][j + 1] + a[i + 2][j + 2] + a[i - 1][j - 1] + a[i - 2][j - 2]) == sum &&
                (a[i][j] | a[i + 1][j + 1] | a[i + 2][j + 2] | a[i - 1][j - 1] | a[i - 2][j - 2]) == operator && (a[i - 2][j - 2] == 0 || a[i + 2][j + 2] == 0)){
                //两边界必须为空
                if(a[i - 2][j - 2] == 0 && i < rowNum - 3 && j < rowNum - 3 && a[i + 3][j + 3] == 0 ||
                    a[i + 2][j + 2] == 0 && i > 2 && j > 2 && a[i - 3][j - 3] == 0){
                    for(let index = 0; index < 3; index++){
                        if(a[i - 1 + index][j - 1 + index] == 0){
                            return {
                                x: i - 1 + index,
                                y: j - 1 + index
                            }
                        }
                    }
                    //中间三个满了
                    return a[i - 2][j - 2] == 0 && i < rowNum - 3 && j < rowNum - 3 && a[i + 3][j + 3] == 0 ?
                        {
                            x: i + 2,
                            y: j + 2
                        } :
                        {
                            x: i - 2,
                            y: j - 2
                        }
                }
            }
            //反斜向判断
            if(i >= 2 && i < rowNum - 2 && j >= 2 && j < rowNum - 2 && (a[i][j] + a[i - 1][j + 1] + a[i - 2][j + 2] + a[i + 1][j - 1] + a[i + 2][j - 2]) == sum &&
                (a[i][j] | a[i - 1][j + 1] | a[i - 2][j + 2] | a[i + 1][j - 1] | a[i + 2][j - 2]) == operator && (a[i + 2][j - 2] == 0 || a[i - 2][j + 2] == 0)){
                //两边界必须为空
                if(a[i - 2][j + 2] == 0 && i < rowNum - 3 && j > 2 && a[i + 3][j - 3] == 0 ||
                    a[i + 2][j - 2] == 0 && i > 2 && j < rowNum - 3 && a[i - 3][j + 3] == 0){
                    for(let index = 0; index < 3; index++){
                        if(a[i - 1 + index][j + 1 - index] == 0){
                            return {
                                x: i - 1 + index,
                                y: j + 1 - index
                            }
                        }
                    }
                    //中间三个满了
                    return a[i - 2][j + 2] == 0 && i < rowNum - 3 && j > 2 && a[i + 3][j - 3] == 0 ?
                        {
                            x: i - 2,
                            y: j + 2
                        } :
                        {
                            x: i + 2,
                            y: j - 2
                        }
                }
            }
        }
    }
    return null
}

findWillBeDoubleFourStep2

//查找下两步棋后将会是双4的位置 代替上面两个未实现的方法，但减少了智能
findWillBeDoubleFourStep2: (a, rowNum, operator) => {
    for(let i = 0; i < rowNum; i++){
        for(let j = 0; j < rowNum; j++){
            if(a[i][j] == 0){
                a[i][j] = operator
                let p = ai.findWillBeDoubleFour(a, rowNum, operator)
                a[i][j] = 0
                if(p){
                    return {
                        x: i,
                        y: j
                    }
                }
            }
        }
    }
}

findFollowPosition

//查找跟随位置，跟随人下棋的位置 落子到旁边
findFollowPosition: (a, i, j, rowNum) => {
    if(i >= 1 && a[i - 1][j] == 0){
        return {
            x: i - 1,
            y: j
        }
    }
    if(j >= 1 && a[i][j - 1] == 0){
        return {
            x: i,
            y: j - 1
        }
    }
    if(i < rowNum - 1 && a[i + 1][j] == 0){
        return {
            x: i + 1,
            y: j
        }
    }
    if(j < rowNum - 1 && a[i][j + 1] == 0){
        return {
            x: i,
            y: j + 1
        }
    }
    if(i >= 1 && j >= 1 && a[i - 1][j - 1] == 0){
        return {
            x: i - 1,
            y: j - 1
        }
    }
    if(i >= 1 && j < rowNum - 1 && a[i - 1][j + 1] == 0){
        return {
            x: i - 1,
            y: j + 1
        }
    }
    if(i < rowNum - 1 && j >= 1 && a[i + 1][j - 1] == 0){
        return {
            x: i + 1,
            y: j - 1
        }
    }
    if(i < rowNum - 1 && j < rowNum - 1 && a[i + 1][j + 1] == 0){
        return {
            x: i + 1,
            y: j + 1
        }
    }
}

findRandomPosition

//周边找不到位置 随机
findRandomPosition: (rowNum, dressNum) => {
    let value = 0
    let totalNum = rowNum * rowNum
    while(dressNum < totalNum){
        value = Math.floor(Math.random() * rowNum * rowNum)
        let i = Math.floor(value / rowNum)
        let j = value % property.rowNum
        if(property.data[x][y] == 0){
            return {
                x : i,
                y : j
            }
        }
    }
    return null
}

人落子相关

const property = reactive({
    size: 40, //棋盘每格宽高
    rowNum: 15, //棋盘行数列数
    message: '',
    validRange: 0.3,  //棋子的半径占每格比
    canMove: false,
    data: [],
    dressNum: 0
})

//人最后落子的位置
const lastPosition = {
    i: 0,
    j: 0
}

start: () => {
    property.canMove = true
},
next: (p) => {
    if(!property.canMove){
        return
    }
    property.canMove = false
    let x = p.offsetX
    let y = p.offsetY
    x = func.calcPosition(x, property.validRange, property.size)
    y = func.calcPosition(y, property.validRange, property.size)
    if(x == -1 || y == -1){
        return
    }
    func.drawChess(x, y, 'red')

    //记忆落子位置
    let i = x / property.size - 1
    let j = y / property.size - 1
    lastPosition.i = i
    lastPosition.j = j
    property.data[i][j] = operate.people

    if(ai.checkFive(property.data, property.rowNum, operate.people)){
        func.win(operate.people)
        return
    }
    func.aiNext()
},
calcPosition: (x, validRange, size) => {
    let xRemainder = x % size
    return xRemainder < validRange * size ? (x - xRemainder) :
        (xRemainder < (1 - validRange) * size ? - 1 : (x + size - xRemainder))
},

ai落子

aiNext: () => {
    //检查自己单4
    let p = ai.findBySingleFour(property.data, property.rowNum, operate.computer)
    if(p){
        func.drawChess((p.x + 1) * property.size, (p.y + 1) * property.size, 'black')
        func.win(operate.computer)
        return
    }
    //查找对方单4
    p = ai.findBySingleFour(property.data, property.rowNum, operate.people)
    if(p){
        func.drawBlackChess(p)
        return
    }
    //查找自己将要双4的位置
    p = ai.findWillBeDoubleFour(property.data, property.rowNum, operate.computer)
    if(p){
        func.drawBlackChess(p)
        return
    }
    //查找对方将要双4的位置
    p = ai.findWillBeDoubleFour(property.data, property.rowNum, operate.people)
    if(p){
        func.drawBlackChess(p)
        return
    }
    //查找对方两步将要双4的位置
    p = ai.findWillBeDoubleFourStep2(property.data, property.rowNum, operate.people)
    if(p){
        func.drawBlackChess(p)
        return
    }
    //查找自己两步将要双4的位置
    p = ai.findWillBeDoubleFourStep2(property.data, property.rowNum, operate.computer)
    if(p){
        func.drawBlackChess(p)
        return
    }
    //跟随位置
    p = ai.findFollowPosition(property.data, lastPosition.i, lastPosition.j, property.rowNum)
    if(p){
        func.drawBlackChess(p)
        return
    }
    p = ai.findRandomPosition(property.rowNum, property.dressNum)
    func.drawBlackChess(p)

},
win: (operator) => {
    property.message = operator == 1 ? "黑方胜" : "红方胜"
    property.canMove = false
},
drawBlackChess: (p) => {
    func.drawChess((p.x + 1) * property.size, (p.y + 1) * property.size, 'black')
    property.data[p.x][p.y] = 1
    property.canMove = true
},
checkDressNum: () => {
    if(property.dressNum == property.rowNum * property.rowNum){
        property.message = "和棋了"
    }
},
drawChess: (x, y, color) => {
    ctx.beginPath()
    ctx.moveTo(x+ property.size * property.validRange, y )
    ctx.arc(x, y, property.size * property.validRange, 0, 2 * Math.PI)
    ctx.strokeStyle = color
    ctx.fillStyle = color
    ctx.fill()
    ctx.stroke()
    ctx.closePath()
    property.dressNum++
    func.checkDressNum()
}

最终效果

mitpast
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
canvas制作的简易五子棋
07-01
使用HTML5的canvas制作的非人机的简易五子棋使用HTML5的canvas制作的非人机的简易五子棋使用HTML5的canvas制作的非人机的简易五子棋使用HTML5的canvas制作的非人机的简易五子棋
js+canvas实现AI五子棋小游戏_☆往事随風☆的博客
☆往事随風☆的博客
09-09 2505
js实现AI五子棋小游戏一、前言二、开发流程（1）绘制棋盘（2）绘制棋子（3）玩家下棋（4）电脑下棋（5）悔棋功能（6）撤销悔棋功能三、完整游戏效果图四、运行结果展示五、项目源码 一、前言 使用 js+canvas+less 制作一个简易的AI五子棋小游戏。游戏中的AI玩家的实力十分强大,并且带有悔棋功能。这里就简单介绍一下js部分，游戏UI部分请看源码。 二、开发流程 （1）绘制棋盘 这里使用canvas绘制一个 15 x 15大小的棋盘。 // 绘制棋盘 function chessBoard
html五子棋悔棋,原生 JS + Canvas 实现五子棋游戏
weixin_39779467的博客
06-18 695
原标题：原生 JS + Canvas 实现五子棋游戏||一、功能模块先看下现在做完的效果： 线上体验：https://wj704.github.io/five_game.html主要功能模块为：人机对战功能悔棋功能撤销悔棋功能二、代码详解 2.1 人机对战功能实现从效果图可以看到，棋盘的横竖可以放的位置为15*15，通过canvas画棋盘：//绘画棋盘vardrawChessBoard=funct...
五子棋：起源、原理与游戏规则、vue实现五子棋案例游戏
qq_28245087的博客
06-17 2476
五子棋作为一种深受欢迎的棋类游戏，其简单的规则和丰富的历史背景使其成为了中华文化的一部分。通过了解五子棋的历史、原理和游戏规则，我们可以更好地理解这一游戏的魅力所在，并在游戏中体验到中国传统文化的独特韵味。
vue-手撸五子棋
无情编码工具人的博客
04-01 502
利用属性的监控、计算、递归等智能判断对电脑有利条件（不好好玩赢不了）
Vue实现单机五子棋（附源码）
sclarkca56的博客
06-06 1608
Vue 实现 单子五子棋
VUE+Canvas实现简单的五子棋游戏
denglouhen的博客
05-07 5180
之前的canvas小游戏系列欢迎大家戳： 《VUE实现一个Flappy Bird~~~》 《VUE+Canvas实现上吊火柴人猜单词游戏》 《VUE+Canvas 实现桌面弹球消砖块小游戏》 《VUE+Canvas实现雷霆战机打字类小游戏》 《VUE+Canvas实现财神爷接元宝小游戏》 在布局上，五子棋相比那些目标是随机运动的游戏，实现起来相对简单许多，思路也很清晰，总共分为： （1）画棋盘； （2）监听点击事件画黑白棋子； （3）每次落子之后判断是否有5子相连，有则赢。 最复杂的恐怕
利用js canvas实现五子棋游戏
10-14
主要为大家详细介绍了利用js canvas实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js+canvas实现五子棋小游戏
11-19
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码，供大家参考，具体内容如下 效果展示： 源码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
原生JS+Canvas实现五子棋游戏
10-19
主要为大家详细介绍了原生JS+Canvas实现五子棋游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
canvas学习笔记之2d画布基础的实现
01-21
Canvas是啥 < canvas> 是一个可以使用脚本（通常是js）来绘图的HTML元素 < canvas> 最早由Apple引入WebKit，用于Mac OS X 的 Dashboard和 Safari 如今，所有主流的浏览器都支持它（IE9+,更低版本需引入Explorer ...
原生JS+Canvas实现五子棋游戏实例
10-19
本篇文章主要介绍了原生JS+Canvas实现五子棋游戏实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript-canvas绘制五子棋
air_shark
04-16 401
使用JavaScript的canvas绘制五子棋。
canvas画图实现一个简单的五子棋小游戏
beiTiao_lys的博客
03-10 557
canvas画图的使用, 绘制简单五子棋效果
基于canvas的五子棋
bash_winner的博客
02-19 924
前言：说在前面的画 可能，一进来最关心的就是，实现的到底是个啥样，那就来一张动图呗，先声明一下，关于电脑的落子算法，本文只是简单的实现了一下（在玩家周围一格随机获取位置），如果懂机器学习可以引入机器学习的相关算法，来获取电脑应该下载哪（位置） 看过我前几篇关于canvas的相关介绍和用法，你会发现，其实绘制棋盘。在指定的位置绘制棋子都是一件容易的事情（在指定位置绘制棋子，关键是：像素位置和坐标之...
vue实现五子棋
假装是个web dog
05-27 1866
思路 1.vue实现五子棋 空棋盘开局。 画网格：网格有 15 行 15 列，共有 225 个交叉点 黑先、白后，交替下子，每次只能下一子 胜负判定 按照简单的规则，从当前下子点位的方向判断()。如果有一个方向满足连续5个黑子或白子，游戏结束。 2.支持dom和canvas切换 判断浏览器是否支持canvas： false: 不支持 切换dom方式 true: 支持 使用canvas 3.实现悔棋功能 4.实现撤销悔棋 例子： 为了简便，我就把所有写在一起了，按理来说是要分文件
canvas画棋盘代码优化-追求最简
trytryba的博客
06-29 180
昨天用canvas了个画棋盘，今天优化了一下,目前能做到的最简。
canvas绘制五子棋
qq_21277357的博客
01-02 98
【代码】canvas绘制五子棋。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 668
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
js如何在canvas画布上实现五子棋悔棋功能
04-24
有两种方法可以实现在canvas画布上实现五子棋悔棋功能。第一种方法是使用栈来保存每一步的操作，并记录当前步数的索引，以实现悔棋和撤销操作。具体实现如下： 1. 创建一个数组来保存每一步的操作，每个元素是一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mitpast

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值