canvas实现双人对战五子棋代码-html代码-BFW代码库

canvas实现双人对战五子棋代码

代码语言：html

所属分类：游戏

代码描述：canvas实现双人对战五子棋代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
 
    <style type="text/css">
        *{
                                margin:0;
                                padding:0;
                        }
                        .gobang{
                                margin:10px auto;
                                width:642px;
                                height: 642px;
                                /*border:1px solid;*/
                                background: url(//repo.bfw.wiki/bfwrepo/image/5e4350528640e.png);
                                overflow: hidden;
                        }
                        .text{
                                margin:0 auto;
                                width:100px;
                                height:40px;
                                text-align: center;
                                color:#f00;
                                border:1px solid red;
                                line-height: 40px;
                                display: block;
                        }
                        #can{
                                margin:0px auto;
                                border:1px solid green;
                                display: block;
                        }
    </style>
</head>

<body>
    <canvas class="text">PK</canvas>
    <div class="gobang">

        <canvas id="can" width="640" height="640">
                您的浏览器不支持canvas
        </canvas>
    </div>
    <script>
        var text = document.getElementsByClassName('text');     
        
        
                
                //定义二维数组作为棋盘
                var maps = new Array(16);
                var len = maps.length;
                // alert(len)
                var url="";  
                for(var i=0;i<len;i++){
                        maps[i] = new Array();
                        for(var j = 0;j<len;j++){
                                maps[i][j] = 0;
                                // console.log(maps[i][j]);
                        }
                }
        
                //初始化棋子
                var black = new Image();
                var white = new Image();
                var clientWidth = document.documentElement.clientWidth;
                black.src = "//repo.bfw.wiki/bfwrepo/icon/67ad84aeb217a.png";
                white.src = "//repo.bfw.wiki/bfwrepo/icon/67ad84a111e25.png";
                //棋盘初始化
                var can = document.getElementById('can');
                var ctx = can.getContext("2d");  //获取该canvas的2D绘图环境对象
                ctx.strokeStyle = "#333";
                for(var m=0;m<len-1;m++){
                        for(var n=0;n<len-1;n++){
                                ctx.strokeRect(m*40+20,n*40+20,40,40);  //绘制40的小正方形
                        }
                }
                //绘制文字
                var can1 = document.getElementsByClassName('text');
                var ctx1 = can1[0.........完整代码请登录后点击上方下载按钮下载查看