//code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#mycanvas{
position: absolute;
left: 0;
top: 0;
bottom:0;
right: 0;
background: #eee;
margin: auto;
border:1px solid #333;
box-shadow: 0 0 20px black;
}
</style>
</head>
<body>
<canvas width="600" id='mycanvas' height="600"></canvas>
<script>
(function(){
var arr=[];
var mycanvas=document.getElementById('mycanvas');
var context=mycanvas.getContext('2d');
var witch=true
var win=false
for(var i=0;i<15;i++){
arr[i]=[];
context.moveTo(i*40,0);
context.lineTo(i*40,600);
context.stroke()
context.moveTo(0,i*40);
context.lineTo(600,i*40);
context.stroke()
for(var j=0;j<15;j++){
arr[i][j]={
haschress:false,
who:""
};
}
// console.log(arr)
}
function drawarc(i,j,r){
if(arr[i][j].haschress||i==0||j==0||win){
return
}
context.beginPath();
context.arc(i*40,j*40 ,10,0,Math.PI*2);
context.fillStyle=(witch?'#fff':'#333');
context.fill();
context.stroke();
context.closePath();
arr[i][j].haschress=true;
arr[i][j].who=witch;
witch=!witch;
whowin(i,j)
}
function whowin(i,j,){
//水平
var count =0;
var current=arr[i][j].who;
for(var n=0;n<15;n++){
// console.log(arr[n][j].who)
if(arr[n][j].who===!witch){
count++;
if(count==5){
win=true;
!witch?alert('白棋赢了'):alert('黑棋赢了')
retutn
}
}else{
count=0
}
}
//垂直
count=0;
for(var n=0;n<15;n++){
console.log(arr[i][n].who)
if(arr[i][n].who===!witch){
count++;
if(count==5){
win=true;
!witch?alert('白棋赢了'):alert('黑棋赢了')
return
}
}else{
count=0
}
}
//左上
count=0;
// alert(i)
// alert(j)
//alert(1-(-1))
var num=Math.abs(j-i)
for(var n=0;n<15-num;n++){
if(arr[num-(-n)][n].who===!witch){
// alert(423432)
count++;
// alert(count)
if(count==5){
win=true;
!witch?alert('白棋赢了'):alert('黑棋赢了')
return
}
}else{
count=0
}
}
//左下
// debugger
count = 0
num=j-(-i);
for(var n=0;n<num;n++){
if(arr[n][num-n].who===!witch){
// alert(423432)
count++;
// alert(count)
if(count==5){
win=true;
!witch?alert('白棋赢了'):alert('黑棋赢了')
return
}
}else{
count=0
}
}
}
mycanvas.addEventListener('click',function(e){
var ev=e||window.event;
// var target=e.target||e.srcElement;
console.log(ev)
var i=(ev.offsetX/40).toFixed(0);
var j=(ev.offsetY/40).toFixed(0);;
drawarc(i,j);
})
})()
</script>
</body>
</html>