大概思路

我们需要有一个登陆界面，然后将游戏界面的链接放在登陆界面里，一点击就跳转到界面
我们就要准备做游戏的界面，先是找到我们需要的素材，再画棋盘，需要用到canvas标签,然后画棋盘主要在js里做
棋盘画好后，就是画棋子
棋子画好后，我们需要让棋子能够交替执行
最后定义输赢的规则，也就是棋子的五颗相连。

我们先看看登录界面，在看代码理解会快一点
在这里插入图片描述
先看成品五子棋的界面

`html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开始游戏</title>
    <style>
<!-- 因为登录界面不需要很多代码，所以所幸将原本css的代码放在html里面，但是正常情况不建议大家这样做-->
        .wh{
            /*设置边框的宽和高*/
            width: 500px;
            height: 500px;
            padding: 10px;
            border:2px solid blanchedalmond;
            /*居中*/
            margin: auto;
        }
        #head{
            /*设计字体颜色,以及文字居中*/
            background: crimson;
           text-align: center;
        }
        #href{
            /*给"开始游戏"设置字体大小 以及定位*/
            background: aqua;
       font-size: 25px;
            font-weight: bold;
           position: relative;
     left: 230px;

        }
        /*设计一个 hover*/
        #href:hover{
            background-color: #ca7879;
        }
#img{
    width: 500px;
    height: 380px;
    margin: auto;
    opacity: 0.5;
}
    </style>
</head>
<body>
<!--我们应该尽量将标签装到块元素中-->
<div class="wh">
<!-- 弄一个标题-->
    <h1 id="head">欢迎来到五子棋世界</h1>
<!--弄一个五子棋游戏的链接，这一步是必须的-->
    <a href="five1.html" id="href">开始游戏</a>
<!--再插入一个背景图，要好看点-->
   <img src="../image/五子棋.jfif"  id="img">
</div>
</body>
</html>

接下来就是五子棋游戏的制作了,先看html的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五子棋</title>
</head>
<body id="body">
<!--用canvas画布,设置一个id,到时候js才可以操作,我们下棋需要点击所以需要一个点击事件-->
<canvas  id="mycanvas"
          width="600px"
           height="600px"  onclick="draw(event)">
</canvas>
<!--两个链接 -->
<link  rel="stylesheet"  href="../wuziqi/five2.css">
<script src="five3.js" type="text/javascript"></script>
</body>
</html>

再就是css的代码，css的代码最少

#mycanvas{
    /*五子棋的那个木板,实际是一块块小木板平铺起来的  用repeat平铺起来*/
    background: url("../image/bak.jpg")  repeat;
}
#body{
    margin: 0px;
}

我们主要的代码都在js里面
我们先要弄明白三点
第一点黑白棋子需要交替执行
第二点下棋时,不能重棋,所以需要一个二维数组来记录.
第三点判断胜负时,我们需要判断上和下左和右
左上和右下右上和左下这几个方向是否五颗棋连在一起
个人建议阅读我的js代码顺序为

1到41行随后draw函数再chess函数再darawblack以及drawwhite函数,最后iswin(确定胜负)函数

"use strict"
//先用document取到节点,在进行操作
var mycan=document.getElementById("mycanvas");
//我们第一步要先画棋盘  先取得画笔getContext
var pain=mycan.getContext("2d");
//我们先画一条横着的线条  开始画
pain.beginPath();
pain.moveTo(20,20);//线条开始
pain.lineTo(580,20);//线条结束
pain.closePath();//画完
pain.stroke();
for(var y=1;y<15;y++){
    //由于是一个重复的过程所以用循环  这里我们保证每根线条距离为40
    var i=40;
    i=i*y;
    pain.beginPath();
    pain.moveTo(20,i+20);
    pain.lineTo(580,i+20);
    pain.closePath();
    pain.stroke();
}
//纵向的线条也是一样
pain.beginPath();
pain.moveTo(20,20);
pain.lineTo(20,580);
pain.closePath();
pain.stroke();
for (var x=1;x<15;x++){
    var i1=1;
    i1=x*40;
    pain.beginPath();
    pain.moveTo(i1+20,20);
    pain.lineTo(i1+20,580);
    pain.closePath();
    pain.stroke();
}
//棋盘画完该画棋子了  先引入图片
var image_b=new Image();
image_b.src="../image/black.png";
var image_w=new Image();
image_w.src="../image/white.png";

//我们要保证不能重旗，所以给二位数组赋值
function drawblack(newx2,newy2) {
    //所以要取整在乘以40，例如第一格子 以此原本x和y的坐标60几 取整后在乘，40,40 刚好可以出现在横纵交点处
pain.drawImage(image_b,newx2*40,newy2*40);
     //每次下黑棋 赋值的目的是为了后面的不能两个棋子下同一个位置做准备
     
     array1[newx2][newy2]=1;
}
function drawwhite(newx1,newy1) {

    pain.drawImage(image_w,newx1*40,newy1*40);
    //每次下白棋 这里赋值为2是为了后面五颗棋子相连的判断做准备
     array1[newx1][newy1]=2;

}
//这里的flag是最后的步骤,可以先忽略
var flag=false;
function draw(event) {
    if(flag){
        alert("胜负已定，重新开局");
         //是为了刷新程序
        window.location.reload();
    }
    //获得点击位置x,y
    var x=event.clientX;
    var y=event.clientY;
    //注意我们发现这个直接用画笔画的话 棋子出现的位置是相对真实位置的右下角的
    //因此要对位置取整在乘以40
     var newx=parseInt(x/40);
    var newy=parseInt(y/40);
     //我们需要画棋子，并且棋子需要交替执行，所以就需要一个二维数组记录数值
     if (array1[newx][newy]==0){
         chess(newx,newy);
     }else{
         alert("此位置已有棋子，不能重棋");
     }
}
var boolean=true;
//为了能够交替执行，我们需要一个boolean
function chess(x,y) {
if (boolean){
    //黑棋先行
    drawblack(x,y);
    //这个最后确定胜负时的代码
    if(iswin(x,y)){
        alert("恭喜黑棋获胜");
        flag=true;
        return;
    }
    boolean=false;
//    黑棋下完后就改变为false
}else{
    //每次画白棋就改变为true
    drawwhite(x,y);
    if(iswin(x,y)){
        flag=true;
        alert("恭喜白棋获胜");
        return;
    }
    boolean=true;
}
}
//最后一个环节  确定胜负
function iswin(x,y) {
    //这个判断是为了判断最后的棋子是否五颗相连
    if (up_down(x,y) == 5||leftright(x,y)==5||left_up(x,y)==5||right_up(x,y)==5) {
        return true;
    } else {
        return false;
    }
    //找向上一样的棋子
}
function up_down(x,y){
    //先来一个sum值
    var sum=1;
    var value=array1[x][y];
    for (var i=y-1;i>=0;i--){
        if(value == array1[x][i]){
            //当下的这颗棋子与上面的棋子值相等时 就sum加一
            sum=sum+1;
        }else {
            break;
        }
    }
    for (var i1=y+1;i1<14;i1++){
        if(value==array1[x][i1]){
            sum=sum+1;
        }else {
            break;
        }
    }
    return sum;
}
//判断左右
function leftright(x,y) {
    var sum1=1;
var value1=array1[x][y];
for(var q=x-1;q>=0;q--){
    if (value1==array1[q][y]){
        sum1=sum1+1;
    }else {
        break;
    }
}
    for(var q=x+1;q<=14;q++){
        if (value1==array1[q][y]){
            sum1=sum1+1;
        }else {
            break;
        }
    }
return sum1;
}
//判断右下和左上
function left_up(x,y) {
    var sum2 = 1;
    var value2 = array1[x][y];
    for (var w = x - 1, e = y - 1; w >= 0 && y >= 0; w--, e--) {
        if (value2 == array1[w][e]) {
            sum2 = sum2 + 1;
        } else {
            break;
        }

        for (var a = x + 1, b = y + 1; a <= 14 && b <= 14; a++, b++) {
            if (value2 == array1[a][b]) {
                sum2 = sum2 + 1;
            } else {
                break;
            }
        }
        return sum2;
    }
}
//右上与左下
function right_up(x,y) {
    var sum3=1;
   var value3=array1[x][y];
    for (var r=x+1 , t=y-1;r<=14 && t>=0;r++,t--){
        if(value3 == array1[r][t]){
            sum3=sum3+1;
        }else {
            break;
        }
    }
    for (var o=x-1 , u=y+1;o>=0&&u <=14;o--,u++){
        if(value3==array1[o][u]){
            sum3=sum3+1;
        }else {
            break;
        }
    }
    return sum3;
}
//找向下的棋子
//设一个二维数组存储位置用 刚好对应棋盘的行和列的格子用 先遍历让所有位置为0
var array1=new Array();
for (var a=0;a<15;a++) {
    array1[a] = new Array();
    for (var b = 0; b < 15; b++) {
        array1[a][b] = 0;
    }
}

最后在这里把素材发出来
在这里插入图片描述

原文链接：https://blog.csdn.net/qq_49016878/article/details/116372414