js+canvas 人机井字棋

最新推荐文章于 2022-12-16 12:39:58 发布
最新推荐文章于 2022-12-16 12:39:58 发布
阅读量572 收藏
点赞数
分类专栏： 小程序 文章标签： canvas js 井字棋 小游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38830382/article/details/79214200
版权 
<html>
<head>
    <meta charset='utf-8'>
    <style>
        #again {
            font-size: 18px;
            font-family: 华文细黑;
            letter-spacing: 5px;
            padding-left: 12px;
            border-radius: 5px;
            background: -webkit-linear-gradient(top, #66B5E6, #2e88c0);
            background: -moz-linear-gradient(top, #66B5E6, #2e88c0);
            background: linear-gradient(top, #66B5E6, #2e88c0);
            background: -ms-linear-gradient(top, #66B5E6, #2e88c0);
            border: 1px solid #2576A8;
            box-shadow: 0 1px 2px #B8DCF1 inset, 0 -1px 0 #316F96 inset;
            color: #fff;
            text-shadow: 1px 1px 0.5px #22629B;
            cursor:pointer;
            position:absolute;
        }
        #again:hover {
            background: -webkit-linear-gradient(top, #8DC9EF, #4E9FD1);
            background: -moz-linear-gradient(top, #8DC9EF, #4E9FD1);
            background: linear-gradient(top, #8DC9EF, #4E9FD1);
            background: -ms-linear-gradient(top, #8DC9EF, #4E9FD1);
        }
    </style>
</head>
<body>
<canvas id='canvas' style="position:absolute" ></canvas>
<div οnclick="location.reload()" style='width: 105px;height: 30px;'id="again" hidden>再来一局</div>
</body>
<script>

    window.onload = function(){
        canvas.init();
        chessBoard.draw();
        player.listen();
    };

    var game ={
        OVER:0,//游戏结束
        PLAYER_TURN:1,//轮到玩家
        COMPUTER_TURN:2,//轮到电脑
        status:1,//当前状态
        PLAYER_COUNT:1,
        COMPUTER_COUNT:-1,
        turn:function(){
            this.judge();
            if(this.status===this.OVER){
                canvas.body.onclick ='';
                button.body.style.display='block';
            }else if(this.status ===this.PLAYER_TURN){
                this.status = this.COMPUTER_TURN;
                computer.move();
            }else{
                this.status = this.PLAYER_TURN;
            }
        },
        judge:function(){
            var equal =true;
            //检查平局
            for(var i=0;i<3;i++){
                for(var j=0;j<3;j++){
                    if(chessBoard.box[i][j]===0){
                        equal = false;
                    }
                }
            }
            if(equal){
                alert("双方战平");
                this.status = this.OVER;
            }else {
                for (var i = 0; i < 3; i++) {
                    this.check(chessBoard.box[0][i], chessBoard.box[1][i], chessBoard.box[2][i]);
                    if(this.status===this.OVER) return;
                    this.check(chessBoard.box[i][0], chessBoard.box[i][1], chessBoard.box[i][2]);
                    if(this.status===this.OVER) return;
                }
                this.check(chessBoard.box[0][0], chessBoard.box[1][1], chessBoard.box[2][2]);
                if(this.status===this.OVER) return;
                this.check(chessBoard.box[2][0], chessBoard.box[1][1], chessBoard.box[0][2]);
                if(this.status===this.OVER) return;
            }
        },
        check:function(v1,v2,v3){
            var val = this.sum(v1,v2,v3);
            if(val === game.PLAYER_COUNT*3){
                alert("玩家胜");
                this.status = this.OVER;
            }else if(val === game.COMPUTER_COUNT*3){
                alert("电脑胜");
                this.status = this.OVER;
            }
        },
        sum:function(v1,v2,v3){
            return v1+v2+v3;
        },
        move:function(x,y){
            chessBoard.box[x][y] = (this.status===this.PLAYER_TURN)?this.PLAYER_COUNT:this.COMPUTER_COUNT;
            chess.draw(x,y);
            game.turn();
        }
    };

    var player ={
        listen:function(){
            canvas.body.onclick = function(e){
                if(game.status === game.COMPUTER_TURN){
                    return;
                }
                player.move(e);
            }
        },
        move:function(e){
            var x = parseInt(e.offsetX/(chessBoard.width/3));
            var y = parseInt(e.offsetY/(chessBoard.width/3));
            if(chessBoard.box[x][y]===0) {
                game.move(x, y);
            }
        }
    };

    var computer ={
        mayLose:{x:3,y:3},
        emptyPos:{x:3,y:3},
        horizon:0,
        vertical:1,
        diagonal1:2,
        diagonal2:3,
        move:function(){
            this.think();
            if(game.status === game.OVER){
                return;
            }
            if(this.mayLose.x!==3){
                game.move(this.mayLose.x,this.mayLose.y);
            }else{
                var x =1,y=1;
                while(chessBoard.box[x][y]!==0){
                    x = parseInt(Math.random()*11)%3;
                    y = parseInt(Math.random()*11)%3;
                }
                game.move(x,y);
            }
        },
        //判断顺序:己方能不能赢，对方能不能赢
        think:function(){
            this.mayLose = {x:3,y:3};
            this.emptyPos ={x:3,y:3};
            for(var i=0;i<3;i++){
                if(this.read(i,this.horizon)||
                    this.read(i,this.vertical)){
                    return;
                };
            }
            if(this.read('',this.diagonal1)||
                this.read('',this.diagonal2)){
                return;
            }
        },
        read:function(i,type){
            var sum =0;
            for(var j=0;j<3;j++){
                var pos = this.getPosByType(type,i,j);
                sum +=chessBoard.box[pos.x][pos.y];
                if(chessBoard.box[pos.x][pos.y]===0){
                    this.emptyPos.x = pos.x;
                    this.emptyPos.y = pos.y;
                }
            }
            return this.check(sum);
        },
        getPosByType:function(type,i,j){
            switch(type) {
                case this.horizon:
                    return {x:i,y:j};
                case this.vertical:
                    return {x:j,y:i};
                case this.diagonal1:
                    return {x:j,y:j};
                case this.diagonal2:
                    return {x:j,y:2-j}
            }
        },
        check:function(val){
            if(val===game.COMPUTER_COUNT*2){
                game.move(this.emptyPos.x,this.emptyPos.y);
                return true;
            }else if(val===game.PLAYER_COUNT*2){
                this.mayLose.x = this.emptyPos.x;
                this.mayLose.y = this.emptyPos.y;
            }
            return false;
        }
    };

    var chessBoard = {
        margin:100,
        width:600,
        box:[[0,0,0],[0,0,0],[0,0,0]],
        draw:function(){
            //绘制棋面
            drawRect(0,0,chessBoard.width,chessBoard.width,'#e6e61a',1,'#020202');
            //绘制格子
            canvas.cxt.beginPath();
            for(var i=1;i<3;i++){
                //绘制纵线
                canvas.cxt.moveTo(chessBoard.width/3*i,0);
                canvas.cxt.lineTo(chessBoard.width/3*i,chessBoard.width);
                //绘制横线
                canvas.cxt.moveTo(0,chessBoard.width/3*i);
                canvas.cxt.lineTo(chessBoard.width,chessBoard.width/3*i);
            }
            canvas.cxt.stroke();
        }

    };

    var chess = {
        margin:10,
        draw:function(x,y){
            canvas.cxt.beginPath();
            canvas.cxt.arc(
                chess.getCenterPos(x), //圆心的x坐标
                chess.getCenterPos(y), //圆心的y坐标
                (chessBoard.width/3-chess.margin*2)/2//圆半径
                , 0, 2 * Math.PI);
            canvas.cxt.closePath();
            //渐变
            var gradient = canvas.cxt.createRadialGradient(
                chess.getCenterPos(x)+5, //圆心的x坐标
                chess.getCenterPos(y)-5, //圆心的y坐标
                (chessBoard.width/3-chess.margin*2)/2, //圆半径
                chess.getCenterPos(x)+5,
                chess.getCenterPos(y)-5, 0);

            if(game.status === game.PLAYER_TURN){
                gradient.addColorStop(0,'#0a0a0a');
                gradient.addColorStop(1,'#636766');
            }else{
                gradient.addColorStop(0,'#d1d1d1');
                gradient.addColorStop(1,'#f9f9f9');
            }
            canvas.cxt.fillStyle = gradient;
            canvas.cxt.fill();
        },
        //得到圆心的位置;
        getCenterPos:function(arg){
            return chessBoard.width/3*arg+chessBoard.width/6;
        }
    };

    var canvas ={
        body:'',
        cxt:'',
        left:650,
        top:100,
        init:function(){
            this.body = document.getElementById('canvas');
            this.body.width = chessBoard.width +chessBoard.margin;
            this.body.height = chessBoard.width +chessBoard.margin;
            this.body.style.left = this.left;
            this.body.style.top = this.top;
            this.cxt = this.body.getContext('2d');
            button.location();
        }
    };
    
    var button ={
        body:'',
        location:function(){
            this.body = document.getElementById('again');
            this.body.style.left = canvas.left  + (chessBoard.margin+chessBoard.width)/2 -105;
            this.body.style.top = canvas.top + chessBoard.width +chessBoard.margin;
        }
    };

    //绘制矩形
    function drawRect( x, y, width, height, fillColor, borderWidth, borderColor){
        canvas.cxt.beginPath();
        canvas.cxt.moveTo(x, y);
        canvas.cxt.lineTo(x + width, y);
        canvas.cxt.lineTo(x + width, y + height);
        canvas.cxt.lineTo(x, y + height);
        canvas.cxt.lineTo(x, y);
        canvas.cxt.closePath();

        canvas.cxt.lineWidth = borderWidth;
        canvas.cxt.strokeStyle = borderColor;
        canvas.cxt.fillStyle = fillColor;

        canvas.cxt.fill();
        canvas.cxt.stroke();
    }
</script>
</html>


主要类：

canvas:  封装canvas的相对位置和初始化。

button: 封装再来一局按钮的相对位置。

chessBoard:封装棋盘相对位置和绘画，保存已落子的情况。

chess: 封装棋子的相对位置和绘画。

game:封装游戏状态（玩家落子、电脑落子、游戏结束）；游戏结束的判断及展示。

player:封装鼠标事件监听响应。

computer: 封装电脑的落子判断。


电脑落子基本思想：

 先判断自己能不能赢，再判断自己会不会输。再随机选择一个空白位置落子

seam22
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
成三棋小游戏
07-30
用C语言开发的一款民间成三棋的小游戏，功能比较简单
JavaScript实现一个带AI的井字棋游戏
10-18
主要介绍了基于JavaScript实现一个带AI的井字棋游戏源码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Java初学者必备实战项目 - 三子棋（附源代码和思路详解）
一个编程爱好者的博客
12-26 1380
文章目录游戏介绍效果图思路分析简单汇总项目总览小结 游戏介绍 三子棋是一种古老的简单棋盘游戏，玩家分别落子，当同种棋子连成一线即为胜利，先达到者为胜。 效果图 思路分析 在开始写逻辑之前，我们先思考一下游戏的架构，基本逻辑以及各种条件的判断。在这里我简答的画了一张图给你们，应该会对你们的理解有所帮助。 初始化棋盘 我们做的是三子棋，必须将数据存储起来，所以这里我们最合适的是使用二维数组进行存储，将行和列的坐标存储起来，来判断是否获胜。 创建一个方法initBoard意思为初始化棋盘，通过此方法，
基于vue框架使用canvas实现井字棋小游戏
qq_41929578的博客
04-06 3942
引言：最近实现了一个图片上传压缩的功能，使用了canvas，所以学习一下canvas的语法，实现一个井字棋小游戏，这个小游戏可以人人对弈，如果大家有兴趣，可以对代码进行迭代，比如采用极大值极小值搜索法来实现人机对弈或者机机对弈。 废话少说，先看演示效果:点击此处预览效果 1. 创建画布 <div id="app" > <div style="border: solid 1px #000000 ;width: 600px;height: 600px;" @click="getLo
用C/C++实现3字棋游戏
YLYwj的博客
12-16 357
用C\C++实现3字棋游戏
井字棋js（vue）
11-13
js （vue）如何实现井字琪 游戏规则我想不用我多说了
小程序 字体设置
央顺科技官方博客
10-14 3090
小程序 字体设置 适用于HTML，CSS，font-family：中文字体的英文名称 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi 仿宋_GB2312 FangSong_GB2312 楷体_GB2312 KaiTi_GB2312 宋体：SimSuncss中中文字体（font-fam
使用 JavaScript 进行井字游戏：创建棋盘类
allway2的博客
06-07 2268
Tic-Tac-Toe with JavaScript: Creating the Board Class | Ali Alaa - Front-end Web Developerhttps://alialaa.com/blog/tic-tac-toe-js本文由 3 个部分组成。在第一部分中，我们将开始构建井字棋游戏棋盘背后的逻辑。我们将学习如何创建一个代表棋盘的 Javascript 类。除了一些有助于我们获取有关棋盘信息的方法外，该类将保存棋盘的当前状态。让我们从创建项目的文件夹开始。文件夹的结构会很
井字棋(人机对战版)
dianshu1593的博客
10-30 1506
游戏介绍 井字棋，英文名叫Tic-Tac-Toe，是一种在3*3格子上进行的连珠游戏，和五子棋类似。然后由分别代表O和X的两个游戏者轮流在格子里留下标记（一般来说先手者为X），任意三个标记形成一条直线（包括行、列、对角线、反对角线），则为获胜。 解决策略 重点在于电脑方如何下棋，我们采取估计棋局每个位置的权重，首先要对棋局进行分类。 ---3个为空，重要性最低，权值设置为1　　　...
小程序font-family字体设置
热门推荐
张新丁
02-15 1万+
适用于HTML，CSS，font-family：中文字体的英文名称 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi 仿宋_GB2312 FangSong_GB2312 楷...
井字棋-OX棋.rar
11-19
假设我们现在有一个 3 x 3 的井字棋游戏，我们用一个二维数组代表棋盘，’x’ 代表玩家 X 下的棋子，’o’ 代表玩家 O 下的棋子，’e’ 代表该格没有棋子。例如： 一个空白的棋盘以下面的二维数组表示 [ [‘e’, ‘e’, ‘e’], [‘e’, ‘e’, ‘e’], [‘e’, ‘e’, ‘e’] ] 如果玩家 X 在第一行第一列下了一步棋，玩家 O 在第二行第二列下了一步棋，则表示如下： [ [‘x’, ‘e’, ‘e’], [‘e’, ‘o’, ‘e’], [‘e’, ‘e’, ‘e’] ] 现在需要用js实现一个 function，接受一个已有任意棋子的棋盘（和上面二维数组一样的格式），和玩家的标志（’x’ 或 ‘o'），返回该玩家下一步有几种可能的获胜方式（获胜方式以数组表示，[0, 0] 代表在第一行第一列下一步棋即可获胜，[2, 2] 代表在第三行第三列下一步棋即可获胜）。例如 someFunction( ‘x’, [ [‘o’, ‘e’, ‘e’], [‘o’, ‘x’, ‘o’], [‘x’, ‘x’, ‘e’] ] ) // return [ [2, 2
HTML5井字棋
11-21
可以作为学习html5的好demo，是一个大家都喜欢玩的井字棋游戏，感兴趣的可以下载下来玩
JS+canvas五子棋人机对战实现步骤详解
10-15
主要介绍了JS+canvas五子棋人机对战实现步骤详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JS+canvas实现的五子棋游戏【人机大战版】
10-19
主要介绍了JS+canvas实现的五子棋游戏,是采用比较强的AI实现的人机大战版游戏,涉及javascript结合HTML5实现图形绘制与人工智能相关操作技巧,需要的朋友可以参考下
js+canvas实现五子棋小游戏
11-19
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码，供大家参考，具体内容如下 效果展示： 源码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
原生JS+Canvas实现五子棋游戏
10-19
主要为大家详细介绍了原生JS+Canvas实现五子棋游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
多图表实现员工满意度调查数据分析python
04-22
员工满意度是指员工对于工作环境、待遇、职业发展和组织管理等方面的满意程度。它是衡量员工对工作的整体感受和情绪状态的重要指标。
2020届软件工程本科毕业生毕业设计项目.zip
04-22
2020届软件工程本科毕业生毕业设计项目
基于stm32平衡小车
最新发布
04-22
平衡小车 基于stm32 平衡小车 基于stm32 平衡小车 基于stm32
JS+Canvas绘画&导出图片
06-10
JS+Canvas可以用来绘画各种图形并导出为图片。下面是一个简单的例子，展示如何使用Canvas绘制图形并将其导出为PNG图片： ```html <!DOCTYPE html> <title>Canvas绘图并导出为图片 <canvas id="canvas" width=...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值