前端小白写了个网页版五子棋游戏，使用原生 JS + Canvas 实现绘制棋子、棋盘
功能模块
快来体验下吧！看下你能赢得了计算机么？
主要功能模块为：
1.人机对战功能
2.悔棋功能
3.撤销悔棋功能
老规矩，源码贴上
具体代码
（1）HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="css/1.css">
<link rel="stylesheet" href="css/2.css">
<script src=""></script>
<title>html5网页手机五子棋游戏</title>
</head>
<body>
<div id="chessBox">
<canvas id="canvas" width="0" height="0"></canvas>
</div>
<div id="chess_buttom_box">
<button class="select">选项</button>
<button class="anew">撤回</button>
<button class="regret">重开</button>
</div>
<div class="WJ_A">
<div class="WJ_A_left">
<div class="Wchess"></div>
<div class="Wchess_steps">白子第0步</div>
<div class="Wchess_expression">
<div class="emoji emoji--haha">
<div class="emoji__face">
<div class="emoji__eyes"></div>
<div class="emoji__mouth">
<div class="emoji__tongue"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="WJ_B">
<div class="WJ_B_right">
<div class="Bchess"></div>
<div class="Bchess_steps">黑子第0步</div>
</div>
<div class="Bchess_expression">
<div class="emoji emoji--haha">
<div class="emoji__face">
<div class="emoji__eyes"></div>
<div class="emoji__mouth">
<div class="emoji__tongue"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="js/1.js"></script>
</html>
（2）css代码
html,body{
position: relative;
width: 100%;
height: 100%;
margin: 0;
overflow: scroll;
background: #e6e7ec
}
/***********上下盒子***********/
#chessBox,#chess_buttom_box{
position: relative;
margin: 0 auto;
border-radius: 6px;
box-shadow: 1px 1px 3px 1px #9e9e9e5e;
}
#chess_buttom_box{
margin-top: 10px;
height: 50px;
top: 0px;
box-shadow: 0px 0px 0px 0px #9e9e9e5e;
}
#canvas{
display: block;
top: 0px;
position: absolute;
background: #f7e6b7;
border-radius: 4px;
}
.WJ_A,.WJ_B{
position: relative;
width: 100%;
height: 70px;
display: none;
}
.mobile_wja,.mobile_wjb{
display: block;
}
.WJ_A_left,.WJ_B_right{
position: absolute;
top: 15px;
width: 120px;
height: 40px;
background: #f3f3f3;
box-shadow: 0px 0px 5px 1px #dedede;
}
.WJ_B_right{
right: 0;
border-radius: 30px 0px 0px 30px;
}
.WJ_A_left{
left: 0;
border-radius: 0px 30px 30px 0px;
}
.WJ_A > .WJ_A_left > .Wchess{
top: 5px;
left: 10px;
}
.WJ_B > .WJ_B_right > .Bchess{
top: 5px;
right: 10px;
}
.Wchess_expression{
position: absolute;
width: 50px;
height: 50px;
display: none;
}
.Wchess_expression::after{
content: "白棋获胜";
position: absolute;
width: 150%;
height: 100%;
left: 50px;
top: 0px;
font-size: 15px;
text-align: center;
line-height: 50px;
}
.Bchess_expression{
position: absolute;
width: 50px;
height: 50px;
top: 10px;
display: none;
}
.Bchess_expression::after{
content: "黑棋获胜";
position: absolute;
width: 150%;
height: 100%;
left: -82px;
top: 0px;
font-size: 15px;
text-align: center;
line-height: 50px;
}
/*******************************/
/***********重开撤回按钮***********/
.regret,.anew,.select{
position: absolute;
width: 90px;
height: 30px;
background: #03A9F4;
color: #fff;
outline: none;
border: 0px;
user-select: none;
border-radius: 20px;
line-height: 30px;
left: 239px;
}
.regret{
left: 122px;}
.select{
display: none;}
.mobile_regret,.mobile_anew,.mobile_select{
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 30px;
left: 250px;
font-size: 12px;
box-shadow: 0px 0px 5px 1px #c7c7c7;
}
.mobile_regret{
left: 310px;}
.mobile_select{
display: block;left: 10px;}
/*******************************/
/***********黑白棋子***********/
.Bchess,.Wchess,.mobile_Bchess,.mobile_Bchess{
position: absolute;
width: 27px;
height: 27px;
border-radius: 30px;
background: radial-gradient(#62697b 10%,#49535d 90%);
box-shadow: 1px 1px 2px 0 #0000006e;
font-size: 10px;
line-height: 27px;
text-align: center;
color: #fff
}
.Wchess{
background: radial-gradient( #fdf9f9 20%,#edf0f0 90%);
box-shadow: 1px 1px 2px 0 #0000006e;
color: #000
}
.mobile_Bchess,.mobile_Wchess{
width: 19px;
height: 19px;
line-height: 19px;
font-size: 10px;
color: #fff;
}
.mobile_Wchess{
color: #000000;}
.Wchess_steps,.Bchess_steps{
position: absolute;
width: 82px;
height: 30px;
border-radius: 20px;
top: 5px;
font-size: 10px;
text-align: center;
line-height: 30px;
color: #949494;
}
.Wchess_steps{
right: 0px;
}
/*******************************/
（3）js代码
var hy_bodyWidth = document.body.clientWidth;//获取网页可视区宽度
var hy_bodyHeight = document.body.clientHeight;//获取网页可视区高度
var hy_chessBox = document.getElementById("chessBox");
var hy_canvas = document.getElementById("canvas");
var hy_ctx = hy_canvas.getContext("2d");
var hy_buttom_box = document.getElementById("chess_buttom_box");
var hy_regret = document.getElementsByClassName("regret")[0];
var hy_anew = document.getElementsByClassName("anew")[0];
var hy_select = document.getElementsByClassName("select")[0];//Bchess_steps
var hy_BchessSteps = document.getElementsByClassName("Bchess_steps")[0]
var hy_WchessSteps = document.getElementsByClassName("Wchess_steps")[0]
var hy_over = false; // 游戏结束 不可下棋
var hy_me = true; //可以下棋
var anewOff = true;//撤回按钮 可以点击
var regretOff = true// 按钮 可以点击
var hy_count = 0;
var hy_wins = [];
var hy_myWin = [];
var hy_computerWin = [];
var hy_chessBoard = [];
var hy_chessMap = [];
var hy_mode = [[1,0],[0,1],[1,1],[1,-1]];
var hy_lianziArr = [];
var hy_chessStep = 0;
var hy_WchessStep = 0;
var hy_BchessStep = 0;
var chessWB = [];
window.onresize = function(){
// 监听当前窗口改变事件
setTimeout(function(){
//当前窗口发生改变时 刷新页面
window.location.reload()
},hy_bodyWidth / 30)
};
var hy_Mobile_pc = {
hy_num: 0,
mWidth_pWidth: 0,
mHeight_pHeight: hy_bodyHeight,
devicenNme: "",
};
总结
五子棋游戏的核心关键点是：
1、弄清楚有多少种赢法；
2、怎么判断是否已经赢了；
3、计算机下棋算法。这里巧妙地运用数组存储赢法，判断是否赢了，通过权重比较，计算出计算机该下棋的位置。
过程中用到canvas，之前有学习过，虽然很久没用，查了些资料，复习了怎么画线，画圆，学会了怎么如何清除一个圆等。
然后要注意的是，用原生Js怎么为元素添加、删除class。