<html>
<head>
<title>Game</title>
<script src="jquery.js"></script>
<style>
.msg_div{
margin-left:auto;
margin-right:auto;
width:200px;
height:60px;
}
.game_div{
width:600px;
height:600px;
//border:1px solid red;
margin-left:auto;
margin-right:auto;
}
.map_div{
width:560px;
height:560px;
border:1px solid black;
margin:20px;
position:relative;
background-color:yellow;
}
.hidden_div{
width:600px;
height:600px;
//border:1px solid blue;
position:absolute;
margin-top:-21px;
margin-left:-21px;
z-index:999;
}
.item_div{
width:38px;
height:38px;
border:1px solid black;
float:left;
}
.item_div_hidden{
width:40px;
height:40px;
//border:1px solid blue;
float:left;
//-moz-opacity: 0.7;
//opacity:.70;
//filter: alpha(opacity=70);
z-index:999;
}
.chess_black{
width: 32px;
height: 32px;
margin:4px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-border-radius: 20px;
background-color: #111111;
z-index:1000;
}
.chess_white{
width: 32px;
height: 32px;
margin:4px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-border-radius: 20px;
background-color: #dddddd;
z-index:1000;
}
</style>
</head>
<body>
<script>
var map_width = 15;
var map_height = 15;
var item_len = 40;
var map_status;
var can_put = true;
var last_put_x;
var last_put_y;
var last_counter_x=-1;
var last_counter_y=-1;
//0:未结束，1：玩家胜利，2：电脑胜利
var game_result = 0;
var counter_num;
$(function(){
init();
});
var init = function(){
$("body").html("<div id=‘msg_div‘ class=‘msg_div‘></div><div id=‘game_div‘ class=‘game_div‘><div id=‘map_div‘ class=‘map_div‘></div></div>");
var html_str = "";
for (var i=0;i<map_height-1;i++){
var tmp_str = "<div>";
for (var j=0;j<map_width-1;j++){
tmp_str += "<div class=‘item_div‘></div>";
}
tmp_str += "</div>";
html_str += tmp_str;
}
$("div[id=‘map_div‘]").html(html_str+"<div id=‘hidden_div‘ class=‘hidden_div‘></div>");
map_status = new Array();
html_str = "";
for (var i=0;i<map_height;i++){
var tmp_arr = new Array();
var tmp_str = "<div>";
for (var j=0;j<map_width;j++){
tmp_arr.push(0);
tmp_str += "<div class=‘item_div_hidden‘ id=‘item_"+i+"_"+j+"‘></div>";
}
map_status.push(tmp_arr);
tmp_str += "</div>";
html_str += tmp_str;
}
$("div[id=‘hidden_div‘]").html(html_str);
$("div[id^=‘item_‘]").each(function(){
$(this).click(function(){
if (can_put){
var str_id_arr = $(this).attr("id").split("_");
if (map_status[str_id_arr[1]][str_id_arr[2]] == 0){
/*
$(this).html("<div key=‘chess‘ class=‘chess_black‘></div>");
map_status[str_id_arr[1]][str_id_arr[2]] = 1;
last_put_x = str_id_arr[1];
last_put_y = str_id_arr[2];
*/
put_chess(str_id_arr[1],str_id_arr[2],"black");
can_put = false;
}
}
});
});
//设置定时器
//console.log(map_status);
counter_num = setInterval("put_white()",50);
}
var check_up = function(x,y,dir,type){
x = parseInt(x);
y = parseInt(y);
var result = {len:0,pos_min:"",pos_max:"",dir_min:"",dir_max:""};
if (dir >= 0){
if (x == 0){
return result;
}
var i;
for (i=x-1;i>=0;i--){
if (map_status[i][y] == type){
result.len++;
} else{
break;
}
}
result.pos_min = (i+1)+"_"+y;
result.dir_min="up";
}
if (dir <= 0){
if (x == map_height-1){
return result;
}
var i;
for (i=x+1;i<map_height;i++){
if (map_status[i][y] == type){
result.len++;
} else{
break;
}
}
result.pos_max = (i-1)+"_"+y;
result.dir_max="down";
}
return result;
}
var check_up_left = function(x,y,dir,type){
x = parseInt(x);
y = parseInt(y);
var result = {len:0,pos_min:"",pos_max:"",dir_min:"",dir_max:""};
if (dir >= 0){
if (x == 0 || y==0){
return result;
}
var i,j;
for (i=x-1,j=y-1;i>=0&&j>=0;i--,j--){
if (map_status[i][j] == type){
result.len++;
} else{
break;
}
}
result.pos_min = (i+1)+"_"+(j+1);
result.dir_min="up_left";
}
if (dir <=0 ){
if (x == map_height-1 || y == map_width-1){
return result;
}
for (var i=x+1,j=y+1;i<map_height&&j<map_width;i++,j++){
if (map_status[i][j] == type){
result.len++;
} else{
break;
}
}
result.pos_max = (i-1)+"_"+(j-1);
result.dir_max="down_right";
}
return result;
}
var check_up_right = function(x,y,dir,type){
x = parseInt(x);
y = parseInt(y);
var result = {len:0,pos_min:"",pos_max:"",dir_min:"",dir_max:""};
if (dir >= 0){
if (x == 0 || y==0){
return result;
}
for (var i=x-1,j=y+1;i>=0&&j<map_width;i--,j++){
if (map_status[i][j] == type){
result.len++;
} else{
break;
}
}
result.pos_min = (i+1)+"_"+(j-1);
result.dir_min="up_right";
}
if (dir <= 0){
if (x == map_height-1 || y == map_width-1){
return result;
}
for (var i=x+1,j=y-1;i<map_height&&j>=0;i++,j--){
if (map_status[i][j] == type){
result.len++;
} else{
break;
}
}
result.pos_max = (i-1)+"_"+(j+1);
result.dir_max="down_left";
}
return result;
}
var check_left = function(x,y,dir,type){
x = parseInt(x);
y = parseInt(y);
var result = {len:0,pos_min:"",pos_max:"",dir_min:"",dir_max:""};
if (dir >= 0){
if (y == 0){
return result;
}
for (var i=y-1;i>=0;i--){
if (map_status[x][i] == type){
result.len++;
} else{
break;
}
}
result.pos_min = (x)+"_"+(i+1);
result.dir_min="left";
}
if (dir <= 0){
if (y == map_width-1){
return result;
}
for (var i=y+1;i<map_width;i++){
if (map_status[x][i] == type){
result.len++;
} else{
break;
}
}
result.pos_max = (x)+"_"+(i-1);
result.dir_max="right";
}
return result;
}
//last_put_x,last_put_y，依据最后落子位置，计算有无胜利
var check_result = function(x,y,type,return_type){
x = parseInt(x);
y = parseInt(y);
var flag = false;
var arr = new Array();
var result = check_up(x,y,0,type);//落子位置向上计算连子个数
arr.push(result);
if (result.len >= 4){
flag = true;
}
result = check_up_left(x,y,0,type);
arr.push(result);
if (result.len >= 4){
flag = true;
}
result = check_up_right(x,y,0,type);
arr.push(result);
if (result.len >= 4){
flag = true;
}
result = check_left(x,y,0,type);
arr.push(result);
if (result.len >= 4){
flag = true;
}
if (return_type == "boolean"){
return flag;
} else{
return arr;
}
}
//计算白子位置,依据给定坐标和方向
var counter_position = function(x,y,dir){
x = parseInt(x);
y = parseInt(y);
var position = {x:-1,y:-1};
switch (dir){
case "up":
if (x-1>=0 && map_status[x-1][y] == 0){
position.x = x-1;
position.y = y-0;
}
return position;
case "down":
if (x+1<map_height && map_status[x+1][y] == 0){
position.x = x+1;
position.y = y-0;
}
return position;
case "up_left":
if (x-1>=0 && y-1>=0 && map_status[x-1][y-1] == 0){
position.x = x-1;
position.y = y-1;
}
return position;
case "up_right":
if (x-1>=0 && y+1 <map_width && map_status[x-1][y+1] == 0){
position.x = x-1;
position.y = y+1
}
return position;
case "left":
if (y-1>=0 && map_status[x][y-1] == 0){
position.x = x-0;
position.y = y-1;
}
return position;
case "right":
if (y+1<map_width && map_status[x][y+1] == 0){
position.x = x-0;
position.y = y+1;
}
return position;
case "down_left":
if (y-1>=0 && x+1 <map_height && map_status[x+1][y-1] == 0){
position.x = x+1;
position.y = y-1;
}
return position;
case "down_right":
if (y+1<map_width && x+1<map_height && map_status[x+1][y+1] == 0){
position.x = x+1;
position.y = y+1;
}
return position;
}
}
//放置棋子
var put_chess = function(x,y,opt){
x = parseInt(x);
y = parseInt(y);
$("div[id=‘item_"+x+"_"+y+"‘]").html("<div key=‘chess‘ class=‘chess_"+opt+"‘></div>");
if (opt == "white"){
map_status[x][y] = 2;
last_counter_x = x;
last_counter_y = y;
}
if (opt == "black"){
map_status[x][y] = 1;
last_put_x = x;
last_put_y = y;
}
}
//计算白子落子位置
var counter_option = function(counter_x,counter_y,put_x,put_y){
counter_x = parseInt(counter_x);
counter_y = parseInt(counter_y);
put_x = parseInt(put_x);
put_y = parseInt(put_y);
var arr = check_result(put_x,put_y,1,"array"); //这里计算黑子的落位情况
var index =-1;
for (var i =0;i<arr.length;i++){
if (arr[i].len >=1 ||(index > -1 && arr[i].len > arr[index].len)){ //如果黑子连子大于等于2（这里不包括当前落子，实际为1+1=2）则拦截
index = i;
break;
}
}
if (index != -1){
if (arr[index].pos_min != ""){
var min_position = (arr[index].pos_min).split("_");
var position = counter_position(min_position[0],min_position[1],arr[index].dir_min);
if (position.x >=0 && position.y >= 0){
put_chess(position.x,position.y,"white");
return true;
}
}
if (arr[index].pos_max != ""){
var max_position = (arr[index].pos_max).split("_");
var position = counter_position(max_position[0],max_position[1],arr[index].dir_max);
if (position.x >=0 && position.y >= 0){
put_chess(position.x,position.y,"white");
return true;
}
}
}
arr = check_result(counter_x,counter_y,2,"array");
for (var i=arr.length-1;i>=0;i--){
for (var j=0;j<i;j++){
if (arr[j].len < arr[j+1].len){
var tmp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = tmp;
}
}
}
var position;
for (var i=0;i<arr.length;i++){
var tmp_arr = (arr[i].pos_min).split("_");
position = counter_position(tmp_arr[0],tmp_arr[1],arr[i].dir_min);
if (position.x >=0 && position.y >=0){
break;
}
tmp_arr = (arr[i].pos_max).split("_");
position = counter_position(tmp_arr[0],tmp_arr[1],arr[i].dir_max);
if (position.x >=0 && position.y >=0){
break;
}
}
if (position.x >= 0 && position.y >= 0){
put_chess(position.x,position.y,"white");
return true;
}
return false;
}
var check_all_put = function(){
var position = {x:-1,y:-1};
for (var i=0;i<map_height;i++){
for (var j=0;j<map_width;j++){
if (map_status[i][j] == 0){
position.x = i;
position.y = j;
break;
}
}
}
return position;
}
//放置白子
var put_white = function(){
if (!can_put){ //判定玩家有无落子
//计算玩家有无胜利
if (check_result(last_put_x,last_put_y,1,"boolean")){
game_result = 1;
}
//玩家没有胜利，计算白子位置并落子
if (game_result == 0){
var position = {x:-1,y:-1};
//如果白子为首次落子，则计算白子随机位置
if (last_counter_x <0 || last_counter_y <0){
position.x = Math.round(6 + Math.random()*3);
position.y = Math.round(6 + Math.random()*3);
while (map_status[position.x][position.y] != 0){
position.x = Math.round(6 + Math.random()*3);
position.y = Math.round(6 + Math.random()*3);
}
put_chess(position.x,position.y,"white");
} else{
if(!counter_option(last_counter_x,last_counter_y,last_put_x,last_put_y)){
position = check_all_put();
if (position.x >= 0){
put_chess(position.x,position.y,"white");
} else {
game_result = 3;
}
}
}
if (check_result(last_counter_x,last_counter_y,2,"boolean")){
game_result = 2;
}
}
can_put = true;
}
//游戏结束，解除定时
if (game_result != 0){
can_put = false;
var str = "";
switch (game_result){
case 1:str="You Win";break;
case 2:str="You Lost";break;
case 3:str="Draw";break;
}
$("div[id=‘msg_div‘]").html(str);
clearTimeout(counter_num);
}
}
</script>
</body>
</html>
原文：http://my.oschina.net/u/2284472/blog/529547