10分钟学习简略五子棋 源码+注释教学
JS 实现的一个很简单的 五子棋
大概流程思路：
1.HTML5绘制棋盘
2.初始化二维数组
3.绘制棋子并且对应上二维数组
4.根据数组，计算方向，判别输赢
有bug或者可以改进的地方，亦或者有疑问我能帮上忙，可以加我q565378270，qq群55858402
<body>
<canvas id="mf" width="800" height="800" style="border:1px solid #c3c3c3;"></canvas>
</body>
<script>
WIN=0;
LOSE=0;
NOWPLAYER=1;//1代表白色，0代表黑色；
COUNTER=0;
var canvas=document.getElementById("mf");
var main=canvas.getContext("2d");
for(var sq=0;sq<19;sq++){
var grid=sq*50;
main.moveTo(0,0+grid);
main.lineTo(800,0+grid);
main.moveTo(0+grid,0);
main.lineTo(0+grid,800);
main.stroke();
}
var chessBoard=[];
for(var bx=0;bx<19;bx++){
chessBoard[bx]=[];
for(by=0;by<19;by++){
chessBoard[bx][by]=by;
}
}
console.log(chessBoard);
function drawChess(x,y,playNow,con){
if(con%2==0) {
main.beginPath();
main.arc(x*50+25,y*50+25,20,0,2*Math.PI);
main.stroke();
}else{
main.beginPath();
main.fillStyle="#000000";
main.arc(x*50+25,y*50+25,20,0,2*Math.PI);
main.fill();
}
}
canvas.onclick=function (e) {
var x=Math.floor(e.offsetX/50);//坐标
var y=Math.floor(e.offsetY/50);
// alert(COUNTER%2);
if(chessBoard[x][y]=="white"||chessBoard[x][y]=="black"){
alert("这里已经有人落子了")
}else{ COUNTER++;
drawChess(x,y,0,COUNTER);//坐标，颜色(多余)，计数器
}
if(NOWPLAYER==0){
chessBoard[x][y]='white';
}else{
chessBoard[x][y]='black';
}
if(COUNTER%2==0){
NOWPLAYER=1
}else{
NOWPLAYER=0
}
judge(x,y,chessBoard,chessBoard[x][y]);
};
function judge(x,y,arr,color){
if(Hjudge(x,y,arr,color)>5||Vjudge(x,y,arr,color)>5||LSjudge(x,y,arr,color)>5||RSjudge(x,y,arr,color)>5){
alert(color+"获胜");
}
}
//水平方向
function Hjudge(x,y,arr,color) {
var count=0;
for(var a=0;a<19;a++){
if(x-a>=0){
if(arr[x-a][y]==color){ //bug 小于0 报错；
count++
}else{
break;
}}
}
for(var b=0;b<19;b++){
if(arr[x+b][y]==color){
count++
}else{
break;
}
}
return count;
}
//垂直方向
function Vjudge(x,y,arr,color) {
var count=0;
for(var a=0;a<19;a++){
if(y-a>=0){
if(arr[x][y-a]==color){
count++
}else{
break;
}}
}
for(var b=0;b<19;b++){
if(arr[x][y+b]==color){
count++
}else{
break;
}
}
return count;
}
//左斜方向
function LSjudge(x,y,arr,color) {
var count=0;
for(var a=0;a<19;a++){
if(x-a>=0&&y-a>=0){
if(arr[x-a][y-a]==color){
count++
}else{
break;
}}
}
for(var b=0;b<19;b++){
if(arr[x+b][y+b]==color){
count++
}else{
break;
}
}
return count;
}
//右斜方向
function RSjudge(x,y,arr,color) {
var count=0;
for(var a=0;a<19;a++){
if(y-a>=0){
if(arr[x+a][y-a]==color){
count++
}else{
break;
}}
}
for(var b=0;b<19;b++){
if(x-b>=0){
if(arr[x-b][y+b]==color){
count++
}else{
break;
}
}}
return count;
}
</script>
-----------------------------
总体思路就是绘制棋盘，二维数组对应棋盘，落子坐标四舍五入，绘制在格子中央，判断各个方向输赢，结束reload。代码也许看上去繁琐。其实作为简单地练手入门并不复杂，有许多可以更进或者bug，大家可以一一指教，本人一定及时更新，若有误人子弟希望见谅并且向我提出，也可以直接联系本人。。愉快分享
