web前端之五子棋网页版小游戏

五子棋小游戏

这个五子棋小游戏，没有写成人机模式。

但大家可以尝试下自己饰演两个角色的五子棋，嘻嘻嘻

效果图片

效果

代码

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>简易五子棋游戏</title>
  <link rel="stylesheet" href="css/main.css">
  <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<h1>简易版五子棋小游戏</h1>
<h6>说明：体验下自己饰演两个角色的五子棋吧，嘻嘻。</h6>

<!--canvas是个画布，需要修改的是尺寸，不是修改样式-->
  <canvas id="canvas" width="450" height="450"></canvas>
  <div class="mol-main">
    <div class="mol-header">
      <h2>五子棋小游戏</h2>
    </div>
    <div class="mol-success white">
      白棋获胜
    </div>
    <div class="mol-success black">
      黑棋获胜
    </div>
    <br>
    <div>
      <button class="btn">关闭</button>
    </div>
  </div>
</body>
<script type="text/javascript" src="js/main.js"></script>
<script>
  $('.btn').click(function () {
    $('.mol-main').css('display','none');

  });
</script>
</html>

main.css

body{
    margin:0;
    background: #ccc;
}
h1{
    text-align: center;
}

h6{
    text-align: center;
    color: darkslategray;
}

/*------------棋盘-------------------------*/
#canvas{
    display: block;
    margin: 20px auto;

    background:#fff;
}
.mol-main{
    width:180px;
    height: 160px;
    margin: 0 auto;
    padding: 10px;

    background:#eee;
    border-radius: 10px;
    opacity: 0.9;

    position: absolute;
    top:25%;
    left: 40%;

    display: none;
}
.mol-header h2{
    text-align: left;
    font-weight: bold;
}
.mol-success{
    color: firebrick;
    font-weight: bold;
}

.white{
    display: none;
}
.black{
    display: none;
}

.btn{
    cursor: pointer;
    width: 70px;
    height: 30px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;;
    background: cadetblue;
    color: #000;
}
.btn:hover{
    background: lightseagreen;
    color: #fff;
}

main,js

/*
*1、绘制棋盘
    *1.1绘制棋盘中直线
* 2、绘制棋子
    *2.1绘制棋子
    * 2.2实现交互,点击下棋
    * 2.3黑白子棋交替操作
    * 2.4棋子落在棋盘交叉点上
    * 2.5设置已下棋处不得再进行操作
* 3、游戏胜负判断
    *当前所下的棋子参与到胜负判断中，此时下棋的人要么赢，要么不赢（输/继续进行）
    * 此时所下棋子的位置应当作为判断点
    * 一条线上左右颜色连续累加超过5，那么这个颜色就获胜
 */
//----------------------------------------------------

//获取到html的canvas标签
var canvas=document.querySelector('#canvas');
//获取绘制环境
var ctx =canvas.getContext('2d');

//创建棋子颜色数组
var chessColor=['#000','#fff'];

//棋盘数组
var maparr=[];

//判断哪方赢
var mode=[
    [1,0],//水平方向
    [0,1],//垂直方向
    [1,1],//右下 左上
    [1,-1]//右上 左下
];

//----------------------------------
//将棋盘上所有交叉点创建全为0的数组
//如果当数组为1时，说明已经有棋子了
for(var i=0;i<14;i++){
    maparr[i]=[];
    for(var j=0;j<14;j++){
        maparr[i][j]=0;
    }
}


//---设置游戏进行的步数-----为了实现黑白棋子交替进行操作--
var step=0;
/*----------绘制棋盘中直线--------------
*描述绘制路径
* 开始绘制
*/
function init() {
    //----------绘制15条垂直和水平直线---------------------
    for(var i=1;i<15;i++){
        //----绘制15条垂直直线------
        //在格子（30，30）处开始画线
        ctx.moveTo(30*i,30);
        //线画到（30，420）的位置
        ctx.lineTo(30*i,420);

        //----绘制15条水平直线-----
        //在格子（30，30）处开始画线
        ctx.moveTo(30,30*i);
        //线画到（420,30）的位置
        ctx.lineTo(420,30*i);
    }
    //-----开始绘制线--------------
    ctx.stroke();
}

init();

//--------绘制棋子---------------------
function drawChess(x,y,color){
    //修改填充颜色
    ctx.fillStyle=color;
    //画圆---圆心坐标轴（x,y）--半径15--起始点角度0--终点角度为2派---
    ctx.beginPath();
    ctx.arc(x,y,15,0,Math.PI*2,false);

    //ctx.fill()填充
    ctx.fill();
    ctx.stroke();
}


//-----下棋----并使棋子都在起哦安交叉线上-----------------------------
canvas.addEventListener('click',function(e){
    // console.log('点击棋盘');


    //--------------------------------------

    //e.offsetX和offsetY可以获取到点击时的坐标
    // console.log(e.offsetX,e.offsetY);

//--------实现所有棋子都在棋盘的交叉线上---------
    //math.floor()向下取整
    //+15---点下去的位置向右偏移15-----
    //----即使得在一个小正方形象限内位置任意点棋子都在那个交叉点出
    var dx =Math.floor((e.offsetX+15)/30)*30;
    var dy =Math.floor((e.offsetY+15)/30)*30;

    //点击落下棋子
    if(dx == 0 || dy == 0 || dx == 450 || dy == 450){
        return false;
    }

    //避免已有棋子的点再下一次
    if(maparr[dx/30-1][dy/30-1]==0){
        drawChess(dx,dy,chessColor[step%2]);
        maparr[dx/30-1][dy/30-1]=chessColor[step%2];

        checkSuccess(dx/30-1,dy/30-1,chessColor[step%2],mode[0]);
        checkSuccess(dx/30-1,dy/30-1,chessColor[step%2],mode[1]);
        checkSuccess(dx/30-1,dy/30-1,chessColor[step%2],mode[2]);
        checkSuccess(dx/30-1,dy/30-1,chessColor[step%2],mode[3]);

        step++;
    }
});

//-----------判断哪方赢------要么黑赢要么白赢--------------------
// var mode=[
//     [1,0],//水平方向
//     [0,1],//垂直方向
//     [1,1],//右下 左上
//     [1,-1]//右上 左下
// ];

//------根据mode数组检测不用方向-------------
function checkSuccess(x,y,color,mode) {
    // console.log(x,y,color);
    var count=0;
    for(var i=1;i<5;i++){
        if(maparr[x+i]*mode[0]){
            if(maparr[x+i*mode[0]][y+i*mode[1]]==color){
                count++;
            }else{
                break;
            }
        }
    }
    for(var i=1;i<5;i++){
        if(maparr[x-i]){
            if(maparr[x-i*mode[0]][y-i*mode[1]]==color){
                count++;
            }else{
                break;
            }
        }
    }
    // console.log('水平方向有',count+1,'个',color);
    if(count>=4){
        if(color=='#000'){
            //显示黑棋获胜框
            $('.mol-main').css('display','block');
            $('.black').css('display','block');

            // alert('黑棋获胜');
        }else{
            //显示白棋获胜框
            $('.mol-main').css('display','block');
            $('.white').css('display','block');

            // alert('白棋获胜');
        }
    }
}

引用

b站教程