<html>
<head>
<title>Dragging</title>
<style>
#cans{margin:50px;}
</style>
</head>
<body>
<canvas id="cans" width="800" height="800"></canvas>
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript">
canv=document.getElementById("cans");
cs=canv.getContext("2d");
cs.beginPath();
for(j=0;j<19;j++){
cs.moveTo(0,j*40)
cs.lineTo(720,j*40);
cs.moveTo(j*40,0)
cs.lineTo(j*40,720);
}
var arr = new Array();
for(i=0;i<19;i++){
arr[i]=new Array();
for(k=0;k<19;k++){
arr[i][k]=0;
}
}
cs.stroke();
flag=0;
$("#cans").on("click",function(e){
cs.beginPath();
x=e.offsetX;
y=e.offsetY;
for(i=0;i<19;i++){
if(Math.abs(x-i*40)<20){
mx=i*40;
px=i
}
if(Math.abs(y-i*40)<20){
my=i*40;
py=i;
}
}
if(arr[px][py]==0){
flag=!flag;
if(flag){
cs.fillStyle="black"
cs.arc(mx,my,20,0,6.28)
cs.fill()
arr[px][py]=1;
}else{
cs.fillStyle="white";
cs.arc(mx,my,20,0,6.28)
cs.fill();
cs.stroke();
arr[px][py]=2;
}
}
//纵向检测
if(arr[px][py-1]==arr[px][py]){
if(arr[px][py-2]==arr[px][py]){
if(arr[px][py-3]==arr[px][py]){
if(arr[px][py-4]==arr[px][py]){
res=1;
}else{
for(var w=1;w<=1;w++){
if(arr[px][py+w]!==arr[px][py]){
res=0;
break;
}else{
res=1;
}
}
}
}else{
for(var w=1;w<=2;w++){
if(arr[px][py+w]!==arr[px][py]){
res=0;
break;
}else{
res=1;
}
}
}
}else{
for(var w=1;w<=3;w++){
if(arr[px][py+w]!==arr[px][py]){
res=0;
break;
}else{
res=1;
}
}
}
}else{
for(var w=1;w<=4;w++){
if(arr[px][py+w]!==arr[px][py]){
res=0;
break;
}else{
res=1;
}
}
}
if(res==1){
alert('您已获胜!')
}
//横向检测
if(arr[px-1][py]==arr[px][py]){
if(arr[px-2][py]==arr[px][py]){
if(arr[px-3][py]==arr[px][py]){
if(arr[px-4][py]==arr[px][py]){
res=1;
}else{
for(var w=1;w<=1;w++){
if(arr[px+w][py]!==arr[px][py]){
res=0;
break;
}else{
res=1;
}
}
}
}else{
for(var w=1;w<=2;w++){
if(arr[px+w][py]!==arr[px][py]){
res=0;
break;
}else{
res=1;
}
}
}
}else{
for(var w=1;w<=3;w++){
if(arr[px+w][py]!==arr[px][py]){
res=0;
break;
}else{
res=1;
}
}
}
}else{
for(var w=1;w<=4;w++){
if(arr[px+w][py]!==arr[px][py]){
res=0;
break;
}else{
res=1;
}
}
}
if(res==1){
alert('您已获胜!')
}
//正向45度检测
if(arr[px-1][py-1]==arr[px][py]){
if(arr[px-2][py-2]==arr[px][py]){
if(arr[px-3][py-3]==arr[px][py]){
if(arr[px-4][py-4]==arr[px][py]){
res=1;
}else{
for(var w=1;w<=1;w++){
if(arr[px+w][py+w]!==arr[px][py]){
res=0;
break;
}else{
res=1;
}
}
}
}else{
for(var w=1;w<=2;w++){
if(arr[px+w][py+w]!==arr[px][py]){
res=0;
break;
}else{
res=1;
}
}
}
}else{
for(var w=1;w<=3;w++){
if(arr[px+w][py+w]!==arr[px][py]){
res=0;
break;
}else{
res=1;
}
}
}
}else{
for(var w=1;w<=4;w++){
if(arr[px+w][py+w]!==arr[px][py]){
res=0;
break;
}else{
res=1;
}
}
}
if(res==1){
alert('您已获胜!')
}
//反向45度检测
if(arr[px+1][py-1]==arr[px][py]){
if(arr[px+2][py-2]==arr[px][py]){
if(arr[px+3][py-3]==arr[px][py]){
if(arr[px+4][py-4]==arr[px][py]){
res=1;
}else{
for(var w=1;w<=1;w++){
if(arr[px-w][py+w]!==arr[px][py]){
res=0;
break;
}else{
res=1;
}
}
}
}else{
for(var w=1;w<=2;w++){
if(arr[px-w][py+w]!==arr[px][py]){
res=0;
break;
}else{
res=1;
}
}
}
}else{
for(var w=1;w<=3;w++){
if(arr[px-w][py+w]!==arr[px][py]){
res=0;
break;
}else{
res=1;
}
}
}
}else{
for(var w=1;w<=4;w++){
if(arr[px-w][py+w]!==arr[px][py]){
res=0;
break;
}else{
res=1;
}
}
}
if(res==1){
alert('您已获胜!')
}
})
</script>
</body>
</html>
