html頁面代碼
<!DOCTYPE HTML>
<html>
<head>
<title>五子棋</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="wuziqi.js"></script>
<style type="text/css">
table {
border: 1px;
width: 480px;
height: 480px;
border-collapse: collapse;
background-color: #E1AF70;
}
table tr td{
border: #000 1px solid;
margin: 0px;
padding: 0px;
}
.box{
position: relative;
}
.block{
position: absolute;
border-radius:25px;
}
.block:HOVER{
cursor: pointer;
border: white 2px solid;
}
.focus-black{
background: -moz-linear-gradient(top, #CCC, #000);
background: -webkit-linear-gradient(top, #CCC, #000);
box-shadow:0px 0px 5px rgba(0,0,0, 0.45);
}
.focus-white{
background: -moz-linear-gradient(top, #FFF, #EEE);
background: -webkit-linear-gradient(top, #FFF, #EEE);
box-shadow:0px 0px 5px rgba(0,0,0, 0.45);
}
.alertdiv{
position:absolute;
height:60px;
width:150px;
z-index:9999;
left:50%;
margin-left:-400px;
margin-top:150px;
padding:1px;
border:1px #ccc solid;
font-size:16px;
display:none;
background-color:yellow
}
.alertdiv p{
font-size:16px,
line-height:30px;
padding-top:35px;
padding-bottom:35px;
}
</style>
</head>
<body>
<div>
<button οnclick="config.colorSign=1">白棋優先</button><button οnclick="config.colorSign=2">黑棋優先</button><button οnclick="window.location.reload();">再來一局</button>
</div>
<div>
<button id="startButton" οnclick="config.gameState=1">開始</button><button id="suspendButton" >暫停</button><button id="giveupButton" >認輸</button>
</div>
<div id="msg" class="alertdiv">
<p>這裏是提示信息！</p>
</div>
</body>
</html>
引入的wuziqi.js文件中的代碼如下：
//面向對象的config
var config={
row:16, //行
col:16, //列
white:1, //白色
black:2, //黑色
timeout_short:1000*1,//超時一秒
timeout_medium:1000*2, //超時2秒
timeout_long:1000*3, //超時3秒
gameState:0, //0未開始|結束(默認)，1.進行中，2暫停中
margin:5, //每個棋子的邊距5像素
who_turn:1, //輪到誰？ 1白子 2黑子
};
//定義一個二維數組
var my_arr=new Array();
for(var i=0;i<config.row;i++){
my_arr[i]=new Array();
for(var j=0;j<config.col;j++){
my_arr[i][j]=0;
}
}
$(function(){
//初始化棋盤以及棋子位置div
initGame();
//綁定棋子點擊事件
$(".block").click(function(){
if(config.gameState==1){
eventCLick($(this));
}else if(config.gameState==2){
showMsg("遊戲暫停中");
}else{
showMsg("遊戲尚未開始或者已結束，請重新開始");
setTimeout("hiddenMsg()",config.timeout_short);
}
});
//綁定開始、暫停、結束按鈕點擊事件
//開始
$("#startButton").click(function(){
config.gameState=1;
showMsg("遊戲開始");
setTimeout("hiddenMsg()",config.timeout_short);
});
//暫停
$("#suspendButton").click(function(){
if(config.gameState==1){
config.gameState=2;
showMsg("暫停中");
}else{
showMsg("請先開始遊戲");
setTimeout("hiddenMsg()",config.timeout_short);
}
});
//認輸
$("#giveupButton").click(function(){
if(config.gameState==1||config.gameState==2){
if(config.who_turn==config.white){
config.gameState=0;
showMsg("白方認輸");
}else if(config.who_turn==config.black){
config.gameState=0;
showMsg("黑方認輸");
}
}else{
showMsg("請先開始遊戲");
setTimeout("hiddenMsg()",config.timeout_short);
}
});
});
//初始化遊戲
function initGame(){
createView();
}
//創建棋盤
function createView(){
var html="<div class='box'><table>";
for(var i=0;i<config.row;i++){
html+="<tr>";
for(var k=0;k<config.col;k++){
html+="<td>";
html+="</td>";
}
html+="</tr>";
}
html+="</table></div>";
$(document.body).append(html);
//創建棋子對應的位置div
var width=$(".box table").width();
var single=(width/config.row).toFixed(0); //toFixed(num) 四捨五入，保留num位小數
var leftMargin=(single/2).toFixed(0);
var x=parseInt(leftMargin);
var y=parseInt(leftMargin);
//創建棋子
for(var i=1;i<config.row;i++){
for(var k=1;k<config.col;k++){
var box="";
box="<div class='block' id='${id}' style='width:${w}px;height:${h}px;left:${x}px;top:${y}px;'></div>";
box=box.replace("${id}",i+"#"+k);
box=box.replace("${h}", single-config.margin);
box=box.replace("${w}", single-config.margin);
box=box.replace("${x}", x);
box=box.replace("${y}", y);
$(".box").append(box);
x+=parseInt(single);
}
y+=parseInt(single);
x=parseInt(leftMargin);
}
}
//單擊棋子
function eventCLick(target){
if(config.who_turn==1){
//$(target).addClass("focus-black");
set_my_arr(config.white,target);
}else if(config.who_turn==2){
//$(target).addClass("focus-white");
set_my_arr(config.black,target);
}
}
//設置棋盤二維數組的值
function set_my_arr(color,target){
var id=$(target).attr("id");
var index=new Array();
index=id.split("#");
var x_index=parseInt(index[0]);
var y_index=parseInt(index[1]);
if(my_arr[x_index][y_index]==0){ //該處已經放置棋子
//1、設置對應的二維矩陣的值
my_arr[x_index][y_index]=color;
//2、設置對應的棋子div背景色（顯示棋子）
if(color==config.white){
$(target).css("background-color","white");
config.who_turn=config.black;
}else if(color==config.black){
$(target).css("background-color","black");
config.who_turn=config.white;
}
//判斷是否勝利
if(isSuccess(x_index,y_index,color)){
config.gameState=0; //遊戲結束
if(color==config.white){
showMsg("白子勝利");
setTimeout("hiddenMsg()",config.timeout_long);
}else{
showMsg("黑子勝利");
setTimeout("hiddenMsg()",config.timeout_long);
}
var confirm=window.confirm("遊戲結束，是否再來一局？");
if(confirm){
window.location.reload(); //頁面刷新
}else{
return false;
}
}
}else{
showMsg("該處已有棋子");
setTimeout("hiddenMsg()",config.timeout_short);
return false;
}
}
//判斷是否五子成一條直線
function isSuccess(i,j,color){
//alert("i="+i+"j="+j);
var left=j-4;
var right=j+4;
var top=i-4;
var bottom=i+4;
if(left<1) {left=1;}
if(right>15) {right=15;}
if(top<1) {top=1;}
if(bottom>15) {bottom=15;}
var sum;
var flag=false;
//橫着
if(flag==false){
sum=0;
for(var a1=left;a1<=right;a1++){
if(my_arr[i][a1]==color){
sum++;
if(sum==5){
flag=true;
break;
}
}else{
sum=0;
}
}
}
//豎着
if(flag==false){
sum=0;
for(var a2=top;a2<=bottom;a2++){
if(my_arr[a2][j]==color){
sum++;
if(sum==5){
flag=true;
break;
}
}else{
sum=0;
}
}
}
//計算當前棋子距 上下左右邊 的距離
var left_margin=j-1;
var right_margin=config.col-1-j;
var top_margin=i-1;
var bottom_margin=config.row-1-i;
var x1,y1,x2,y2,x3,y3,x4,y4;
//右上頂點座標
var margin1=top_margin>right_margin? right_margin:top_margin;
margin1=margin1>4? 4:margin1;
x1=i-margin1;
y1=j+margin1;
//左下頂點座標
var margin2=left_margin>bottom_margin? bottom_margin:left_margin;
margin2=margin2>4? 4:margin2;
x2=i+margin2;
y2=j-margin2;
//左上頂點座標
var margin3=top_margin>left_margin? left_margin:top_margin;
margin3=margin3>4? 4:margin3;
x3=i-margin3;
y3=j-margin3;
//右下頂點座標
var margin4=bottom_margin>right_margin? right_margin:bottom_margin;
margin4=margin4>4?4:margin4;
x4=i+margin4;
y4=j+margin4;
//alert("x1="+x1+"y1="+y1+"x2="+x2+"y2="+y2+"x3="+x3+"y3="+y3+"x4="+x4+"y4="+y4);
//右斜---待完善
if(flag==false){
sum=0;
var a3,a4;
for( a3=x1,a4=y1;(a4>=y2)&&(a3<=x2);a4--){
//alert(a3+"=="+a4);
//alert(my_arr[a3][a4]);
if(my_arr[a3][a4]==color){
sum++;
//alert(sum);
if(sum==5){
flag=true;
break;
}
}else{
sum=0;
}
a3++;
}
}
//左斜---待完善
if(flag==false){
sum=0;
var a5,a6;
for( a5=x3, a6=y3;(a5<=x4)&&(a6<=y4);a5++){
if(my_arr[a5][a6]==color){
sum++;
//alert(sum);
if(sum==5){
flag=true;
break;
}
}else{
sum=0;
}
a6++;
}
}
return flag;
}
//顯示提示信息div層
function showMsg(msg){
$("#msg").html(msg);
$("#msg").css("display","block");
}
//隱藏提示信息div層
function hiddenMsg(){
$("#msg").css("display","none");
}
/*
var winWidth,winHeight;
//獲取窗口寬度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//獲取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通過深入Document內部對body進行檢測，獲取窗口大小
if (document.documentElement && document.documentElement.clientHeight &&
document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
// alert("窗口的寬度"+winWidth+"窗口高度"+winHeight);
*/
