JavaScript:js实现在线五子棋人机(人人)对弈

最新推荐文章于 2025-04-14 13:35:55 发布

0cfjg0

最新推荐文章于 2025-04-14 13:35:55 发布

阅读量1.4k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端技术文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_55630615/article/details/138157251

本文详细描述了如何使用HTML、CSS和JavaScript实现一个简单的在线五子棋游戏，包括棋盘绘制、用户落子交互、以及基本的AI对弈逻辑。尽管存在一些逻辑漏洞，但展示了前端开发在棋类游戏中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在线五子棋人机对弈

全部使用前端技术,使用HTML,CSS以及JS进行实现.

棋盘在后端就是一个15*15的二维数组

页面设计

请添加图片描述

页面设计的比较粗糙

主要使用js自带的canvas画布进行绘画

HTML代码如下:

<div class="outer">
        <canvas id="canvas" height="900" width="900"></canvas>
        <div class="button">
            <div id="reset">
                <button v-on:click="reset()">重试</button>
            </div>
            <!-- <div id="check">
                <button v-on:click="check()">开始</button>
            </div> -->
            <div id="jump">
                <button v-on:click="jump()">玩家本地对战</button>
            </div>
		 </div>
</div>

CSS样式设计如下:

给canvas加了个居中和看上去像棋盘的颜色

按钮使用fixed布局跟随视口移动

#canvas {
    margin: 0 auto;
    display: block;
    margin: auto;
    background:burlywood ;
    border: 5px solid black;
    border-radius: 5px;
}

.outer {
    background: grey;
    padding: 20px;
}

.button{
    position: fixed;
    top: 100px;
    left: 100px;
}

.button button{
    color: black;
    font-size: 20px;
    background-color:powderblue
}

#reset{
    float: left;
}

#check{
    float: left;
    margin-left: 10px;
}

JS代码如下:

简而言之:就是画了一堆横线和竖线

var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        for (let index = 0; index <= 15; index += 1) {
   
            ctx.moveTo(0, 60 * index);
            ctx.lineTo(900, 60 * index);
            ctx.stroke()
            ctx.moveTo(60 * index, 0);
            ctx.lineTo(60 * index, 900);
            ctx.stroke()
        };

落子

效果如下

请添加图片描述

同样使用canvas进行绘画,代码如下

 canvas.addEventListener('click', e => {
   
            //获取坐标距离父级的偏移量
            var {
    offsetX, offsetY } = e;
            //边界判断 不能点击格子外面的范围
            if (offsetX < 30 || offsetY < 30 || offsetX > 870 || offsetY > 870) {
   
                return;
            } else if (flag === "black") {
   
                let x = Math.round(e.offsetX / 60) * 60;
                let y = Math.round(e.offsetY / 60) * 60;
                if (arr[y / 60][x / 60] != 0) {
   
                    alert("此处已有棋子")
                    return;
                }
                arr[y / 60][x / 60] = "black";
                ctx.fillStyle = '#000';
                ctx.beginPath();
                ctx.arc(x, y, 20, 0, 2 * Math.PI)
                ctx.fill();
                ctx.closePath();
                if (test()) {
   
                    return;
                }
                // setTimeout(
                //     () => {
   
                //         clear(arrai);
                //         aitest();
                //         ai();
                //     }
                //     , 100);
                flag = "white"
            } else {
   
                    let x = Math.round(e.offsetX / 60) * 60;
                    let y = Math.round(e.offsetY / 60) * 60;
                    if (arr[y / 60][x / 60] != 0) {
   
                        alert("此处已有棋子")
                        return;
                    }
                    arr[y / 60][x / 60] = "white";
                    ctx.fillStyle = '#fff';
                    ctx.beginPath();
                    ctx.arc(x, y, 20, 0, 2 * Math.PI)
                    ctx.fill();
                    ctx.closePath();
                    test();
                flag =