原生Javascript实现五子棋

最新推荐文章于 2024-08-21 19:21:13 发布

陈win

最新推荐文章于 2024-08-21 19:21:13 发布

阅读量3.6k

点赞数 8

文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/qq_41961383/article/details/126533769

版权

本文详细介绍了如何使用原生JavaScript实现五子棋游戏，包括棋盘绘制、赢法数组、人落子、判断人获胜、计算机落子的思路与实现。通过HTML5 canvas画布、事件监听等方式，实现棋盘的交互与游戏逻辑。

摘要由CSDN通过智能技术生成

原生Javascript实现五子棋

棋盘绘制

1.设置居中标题
2.使用html5 canvas画布标签，居中、宽高设置为450px、阴影
3.使用js画线条，横竖都有15条线，每条线间距为30px，即棋盘宽高为420px（1430px），剩余30px平分给上下和左右各15px。
方法：画横线和竖线，使用坐标设置起始点，横线x轴都是从15 - 435，y轴是15+i30px，竖线同上方法，画出十五条。
4.加上重置按钮，并将鼠标cursor设置为移到棋盘上和按钮上自动变成小手。
在这里插入图片描述

整个棋盘的绘制代码如下：
五子棋.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋</title>
    <style>
        .title{
            text-align: center;
        }
        .chess{
            /* canvas与image一样虽然可以设置高和宽，但是是行内块，所以把它变成块元素，方便用margin居中 */
            display: block;
            margin: 50px auto;
            /* 阴影往下往右是正数，前两个值代表往下往右的偏移量，第三个代表阴影宽度，最后一个是阴影颜色 */
            box-shadow: 5px 5px 5px #b9b9b9,-2px -2px 2px #efefef;
            cursor: pointer;
        }
        div{
            text-align: center;
        }
        .res{
            padding: 10px 20px;
            background-color: pink;
            border-radius: 10px;
            color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h3 class="title">--五子棋--</h3>
    <canvas class="chess" width="450px" height="450px"></canvas>
    <div>
        <a class="res">restart</a>
    </div>
</body>
    <script>
        let chess = document.getElementsByClassName('chess')[0];
        // 获取2d画布的上下文
        let cxt = chess.getContext("2d");
        // 线的颜色
        cxt.strokeStyle = "#b9b9b9";
        window.onload = function(){
            drawChessBoard();
        }
        function drawChessBoard(){
            for(let i=0;i<15;i++){
                // 从canvas画布位置开始计算
                // 每条横线起始点位置
                cxt.moveTo(15,15+i*30);
                // 每条横线终点位置
                cxt.lineTo(435,15+i*30);
                // 使用stroke方法连
                cxt.stroke();
                // 竖线同上
                cxt.moveTo(15+i*30,15);
                cxt.lineTo(15+i*30,435);
                cxt.stroke();
            }
        }

    </script>
</html>

五子棋赢法数组

把每一个赢法存下来，需要初始化一个三维数组，前两个位置是存棋子在棋盘的位置坐标，最后一个存的是赢法的编号，每一个赢法编号都唯一。
赢法分为横着连成5子，竖着连成5子，正斜线连成五子和反斜线连成五子。
例：
// [0,0,0]/[1,0,0]/[2,0,0]/[3,0,0]/[4,0,0] 从棋盘左上角开始横着往右五个棋子
// [1,0,1]/[2,0,1]/[2,0,1]/[3,0,1]/[5,0,1] 从棋盘左上角后面一个开始横着往右五个棋子
js代码如下：

 // 初始化数组
        let wins = [];
        for(let i=0;i<15;i++){
            wins[i] = [];
            for(let j=0;j<15;j++){
                wins[i][j] = [];
            }
        }
        // 设置赢法编号
        let id = 0;
        // 统一横线赢法，即横着连成5个子
        // 横坐标i的起始位置只能到11，再往后就没法赢了
        for(let i = 0;i<11;i++){
            for(let j=0;j<15;j++){
                for(let k = 0;k<5;k++){
                    wins[i+k][j][id] = true
                }
                id++;
            }
        }

        // 统计竖线赢法
        for(let i = 0;i<11;i++){
            for(let j=0;j<15;j++){
                for(let k = 0;k<5;k++){
                    wins[j][i+k][id] = true
                }
                id++;
            }
        }

        // 统计正斜线,从左上连到右下角
        for(let i=0;i<11;i++){
            for(let j=0;j<11;j++){
                for(let k=0;k<5;k++){
                    wins[j+k][i+k][id] = true;
                }
                id++;
            }
        }

        // 统计反斜线,从右上连到左下角
        for(let i=0;i<11;i++){
            for(let j=14;j>=4;j--){
                for(let k=0;k<5;k++){
                    wins[i+k][j-k][id] = true;
                }
                id++;
            }