<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="GBK">
<title>歪歪五子棋盘</title>
<style type="text/css">
*{margin:0;padding:0;}
td{width:25px;height:25px;border:solid 1px Gray;background:rgb(182,132,93);cursor:pointer;}
table{width:600px;margin:100px auto;}
</style>
</head>
<body>
<table id="wuziqi"></table>
<script type="text/javascript">
(function(){
function Five(){
}
Five.prototype = {
constructor:Five,
temp:1,
clickNum:0,
td:document.getElementsByTagName('td'),
init:function(){
var that = Five.prototype,
td = that.td;
that._initTable();
for(i=0;i<td.length;i++){
(function(x){
//事件绑定
td[x].id = x;
td[x].onclick = that._clickEvent;
})(i);
}
},
_initTable:function(){
var arr = [];
for(i=0;i<20;i++){
arr.push('<tr>');
for(j=0;j<20;j++){
arr.push('<td></td>');
}
arr.push('</tr>');
}
document.getElementById('wuziqi').innerHTML = arr.join('');
},
_clickEvent:function(){
var that = Five.prototype;
that.temp++;
if(that.temp % 2 == 0){
this.style.backgroundColor = "#000";
this.setAttribute('val',0);
}else{
this.style.backgroundColor = "#fff";
this.setAttribute('val',1);
}
that._level.call(this,parseInt(this.id));
that._vertical.call(this,parseInt(this.id));
that._leftOblique.call(this,parseInt(this.id));
//that.clickNum = this.
},
_getVal:function(obj){
return parseInt(obj.getAttribute('val'),10)
},
//水平
_level:function(n){
var that = Five.prototype;
var tdn = that.td[n];
var _val = that._getVal(tdn);
var total = 1;//number
var _leftn = 5;
var _rightn = 5;
var _border = n%20;
if(_border<=3){
_leftn = _border;
}else if(_border >= 17){
_rightn = 20-_border;
}
//水平方向上，先向左边遍历
for(i = 1;i<_leftn;i++){
if(that._getVal(that.td[n-i])== _val){
total++;
}else{
break;
}
}
//向右边遍历
for(i = 1;i<_rightn;i++){
if(that._getVal(that.td[n+i])== _val){
total++;
}else{
break;
}
}
if(total >= 5){
that._whiteOrBlack.apply(this);
}
},
//竖直
_vertical:function(n){
var that = Five.prototype;
var tdn = that.td[n];
var _val = that._getVal(tdn);
var total = 1;//number
//先向左上遍历
for(i = 1;i<5;i++){
if(that._getVal(that.td[n-i*20])== _val){
total++;
}else{
break;
}
}
//向下边遍历
for(i = 1;i<5;i++){
if(that._getVal(that.td[n+i*20])== _val){
total++;
}else{
break;
}
}
if(total >= 5){
that._whiteOrBlack.apply(this);
}
},
//斜
_leftOblique:function(n){
var that = Five.prototype;
var tdn = that.td[n];
var _val = that._getVal(tdn);
var _leftTotal = 1;//number
var _rightTotal = 1;
//左上方倾斜
for(i = 1;i<5;i++){
if(that._getVal(that.td[n-i*21])== _val){
_leftTotal++;
}else{
break;
}
}
for(i = 1;i<5;i++){
if(that._getVal(that.td[n+i*21])== _val){
_leftTotal++;
}else{
break;
}
}
//右上方倾斜
for(i = 1;i<5;i++){
if(that._getVal(that.td[n-i*19])== _val){
_rightTotal++;
}else{
break;
}
}
for(i = 1;i<5;i++){
if(that._getVal(that.td[n+i*19])== _val){
_rightTotal++;
}else{
break;
}
}
if(_leftTotal >= 5 || _rightTotal >= 5){
that._whiteOrBlack.apply(this);
return;
}
},
_whiteOrBlack:function(){
if(this.getAttribute('val') == 1){
alert('白色赢');
}else{
alert('黑色赢');
}
}
}
var _fiveTest = new Five();
try{
window.addEventListener('load',_fiveTest.init,false);
}catch(e){
window.attachEvent('onload',_fiveTest.init);
}
})();
</script>
</body>
</html>
