js实现五子棋游戏代码

代码语言:html

所属分类:游戏

代码描述:js实现五子棋游戏代码,可开启调试模式

代码标签: 游戏

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

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

<head>
    <meta charset="UTF-8">
    <style>
        * {
        margin: 0px;
        padding: 0px;
    }
    #chess {
        position: relative;
        width: 762px;
        height: 762px;
        margin: 50px auto 0px auto;
        background-image: url("//repo.bfw.wiki/bfwrepo/images/game/wuziqi/timg.jpg");
        background-size: 100% 100%;
    }
    
    .grid {
        width: 50px;
        height: 50px;
        position: absolute;
        padding: 5px;
        box-sizing: border-box;
        border-radius: 25px;
        background-origin: content-box;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        line-height: 50px;
        text-align: center;
        color: aqua;
    }
    </style>
</head>

<body>
    <div id="chess"></div>

<script>
    var chess;//棋盘对象
var grid;//二维数组,记录棋盘点是否有棋子,什么棋子
var chessWidth = 15;//棋盘格数
var count = 0;//棋子数,根据棋子数判定当前该是白棋还是黑棋
var block = false;//点击时间锁
var AI = false;//AI开关
function createGrid(x, y) {//创建棋盘节点div
    var temp = document.createElement("div");
    temp.classList.add("grid");
    temp.style.left = (7 + x * 50) + "px";
    temp.style.top = (7 + y * 50) + "px";
    temp.x = x;
    temp.y = y;
    temp.value = 0;//0为空位,1为黑子,2为白子
    retur.........完整代码请登录后点击上方下载按钮下载查看

网友评论0