📄 五子棋2.html
字号:
<!-- saved from url=(0022)http://internet.e-mail -->
<html>
<body bgcolor="#FFFFCC">
<p>
<table border="1" width=100% bgcolor="#FFdd44">
<tr><td >
<table width=100% height=50 border=0 bgcolor="#FFCC33" ><!--bgcolor="#175FA6" bgcolor="#FF9900"-->
<tr>
<td width=40%>
<input type=text value="" size="25" style="font-size:26" name=displayInfo >
</td>
<td width=20% align=right>
<input type=button value="悔 棋" onclick=goback()>
</td>
<td width=10% align=center>
<input type=button value="重新开始" onclick=reloadGame()>
</td>
<td width=30% align=right>
<input type=button value="退出游戏" onclick=window.close()>
</td>
</tr>
</table>
</td>
</tr>
</table>
</p>
<script>
var flag ;//标志黑子或者白子
var allQiZi;//总共的棋盘格子
var b_QiZi ;//已下黑子数
var w_QiZi ;//已下白子数
var times ;//等于5 就是胜利
var kuanORgao ;//几行几列
var tableWidth ;//表格宽
var tableHeight ;//表格高
var historyStep ;//每一步都记录在这里
var dispaly;
init();
function init(){
flag = true;//标志黑子或者白子
allQiZi = 100;//总共的棋盘格子
b_QiZi = 0;//已下黑子数
w_QiZi = 0;//已下白子数
times ;//等于5 就是胜利
kuanORgao = 10;
tableWidth = 450;
tableHeight = 450;
dispaly = document.getElementById("displayInfo");
dispaly.value=" *黑*子*方*走*棋* ";
historyStep = "";
document.write("<table align='center' border='1' bgcolor='#ddddee'><tr><td>");
document.write("<table width='"+tableWidth+"' height='"+tableHeight+"' align='center' border='0' cellspacing='0' cellpadding='0' bgcolor='#ccccdd'>");
for(var b= 1;b <= kuanORgao ; b++ ){
document.write( "<tr>");
for(var a= 1; a <= kuanORgao ; a++){
document.write( "<td>");
/*
if(a==1&&b==1){//左上
document.write( "<div name = div_"+a+"_"+b+"_n id = div_"+a+"_"+b+"_n style= display: onclick = dropFun(div_"+a+"_"+b+"_w,div_"+a+"_"+b+"_b,div_"+a+"_"+b+"_n) ><img src= image/zuo_sh.gif width="+tableHeight/kuanORgao+" heigh="+tableHeight/kuanORgao+" alt=div_"+a+"_"+b+" ></img></div>\n");
}else{
if(a==1&&b==kuanORgao){//右上
document.write( "<div name = div_"+a+"_"+b+"_n id = div_"+a+"_"+b+"_n style= display: onclick = dropFun(div_"+a+"_"+b+"_w,div_"+a+"_"+b+"_b,div_"+a+"_"+b+"_n) ><img src= image/zuo_xia.gif width="+tableHeight/kuanORgao+" heigh="+tableHeight/kuanORgao+" alt=div_"+a+"_"+b+" ></img></div>\n");
}else{
if(a==kuanORgao&&b==1){//左下
document.write( "<div name = div_"+a+"_"+b+"_n id = div_"+a+"_"+b+"_n style= display: onclick = dropFun(div_"+a+"_"+b+"_w,div_"+a+"_"+b+"_b,div_"+a+"_"+b+"_n) ><img src= image/you_sh.gif width="+tableHeight/kuanORgao+" heigh="+tableHeight/kuanORgao+" alt=div_"+a+"_"+b+" ></img></div>\n");
}else{
if(a==kuanORgao&&b==kuanORgao){//右下
document.write( "<div name = div_"+a+"_"+b+"_n id = div_"+a+"_"+b+"_n style= display: onclick = dropFun(div_"+a+"_"+b+"_w,div_"+a+"_"+b+"_b,div_"+a+"_"+b+"_n) ><img src= image/you_xia.gif width="+tableHeight/kuanORgao+" heigh="+tableHeight/kuanORgao+" alt=div_"+a+"_"+b+" ></img></div>\n");
}else{
document.write( "<div name = div_"+a+"_"+b+"_n id = div_"+a+"_"+b+"_n style= display: onclick = dropFun(div_"+a+"_"+b+"_w,div_"+a+"_"+b+"_b,div_"+a+"_"+b+"_n) ><img src= image/null_.gif width="+tableHeight/kuanORgao+" heigh="+tableHeight/kuanORgao+" alt=div_"+a+"_"+b+" ></img></div>\n");
}
}
}
}
*/
document.write( "<div name = div_"+a+"_"+b+"_b id = div_"+a+"_"+b+"_b style= display:none onclick = dropFun(div_"+a+"_"+b+"_w,div_"+a+"_"+b+"_b,div_"+a+"_"+b+"_n) ><img src= image/black_.gif width="+tableHeight/kuanORgao+" heigh="+tableHeight/kuanORgao+" ></img></div>\n");
document.write( "<div name = div_"+a+"_"+b+"_w id = div_"+a+"_"+b+"_w style= display:none onclick = dropFun(div_"+a+"_"+b+"_w,div_"+a+"_"+b+"_b,div_"+a+"_"+b+"_n) ><img src= image/white_.gif width="+tableHeight/kuanORgao+" heigh="+tableHeight/kuanORgao+" ></img></div>\n");
document.write( "<div name = div_"+a+"_"+b+"_n id = div_"+a+"_"+b+"_n style= display: onclick = dropFun(div_"+a+"_"+b+"_w,div_"+a+"_"+b+"_b,div_"+a+"_"+b+"_n) ><img src= image/null_.gif width="+tableHeight/kuanORgao+" heigh="+tableHeight/kuanORgao+" alt=div_"+a+"_"+b+" ></img></div>\n");
document.write( "</td>");
}
document.write( "</tr>");
}
document.write("</table >");
document.write("</td></tr></table >");
}
//五子棋点击
function dropFun(divObj_w,divObj_b,divObj_n){
//alert(divObj_w);
if(flag){// 黑子
if(divObj_n.style.display != "none"){// 还没点击,所以显示为空图片
divObj_b.style.display = "";//显示黑子
divObj_w.style.display = "none";
divObj_n.style.display = "none"
historyStep = historyStep +"="+ divObj_b.name;
//alert(historyStep);
}else{// 点击 过了的棋子 不能够 点击,
if(divObj_w.style.display != "none" || divObj_b.style.display != "none"){
return false;
}
}
b_QiZi = b_QiZi + 1;
checkWin(divObj_b,"black");//检查黑子是否胜利
flag = false;
dispaly.value=" *白*子*方*走*棋* _已"+w_QiZi+"步";
}else{// 白子
if(divObj_n.style.display != "none"){// 还没点击,所以显示为空图片
divObj_w.style.display = "";//显示白子
divObj_b.style.display = "none";
divObj_n.style.display = "none"
historyStep = historyStep +"="+ divObj_w.name;
//alert(historyStep);
}else{
if(divObj_w.style.display != "none" || divObj_b.style.display != "none"){
return false;
}
}
w_QiZi = w_QiZi + 1;
checkWin(divObj_w,"white");//检查白子是否胜利
flag =true;
dispaly.value=" *黑*子*方*走*棋* _已"+b_QiZi+"步";
}
if((w_QiZi + b_QiZi)>= allQiZi){
alert("比赛结束了，双方平局！");
}
}
function checkWin(divObj,wORb){
if(wORb == "white"){
if(w_QiZi < 5){//如果小于 5 个 棋子
return false;
}else{
checkWhoWin(divObj);
}
}
if(wORb == "black"){
if(b_QiZi < 5){//如果小于 5 个 棋子
return false;
}else{
checkWhoWin(divObj);
}
}
}
function checkWhoWin(divObj){
var ss;
var xLine,yLine;
var bORw;
var divname = divObj.name;
ss = divname.split("_");
xLine = ss[1];
yLine = ss[2];
bORw = ss[3];
//alert(xLine);
//alert(yLine);
//alert(bORw);
//alert(divname);
checkXY(xLine,yLine,bORw);
}
function checkXY(xLine,yLine,bORw){//
times = 0;
var win = false;
if(!win){
times = checkXY_left(xLine,yLine,bORw,times);//左，
win = whoWin(times,bORw);
}
if(!win){
//alert(times);
times = checkXY_right(xLine,yLine,bORw,times);//右
win = whoWin(times,bORw);
}
times = 0;
if(!win){
//alert("times = "+times);
times = checkXY_left_up(xLine,yLine,bORw,times);//左上
win = whoWin(times,bORw);
//alert("times = "+times);
}
if(!win){
//alert("times = "+times);
times = checkXY_right_down(xLine,yLine,bORw,times);//右下
win = whoWin(times,bORw);
//alert("times = "+times);
}
times = 0;
if(!win){
//alert("times = "+times);
times = checkXY_up(xLine,yLine,bORw,times);//，上
win = whoWin(times,bORw);
//alert("times = "+times);
}
if(!win){
//alert("times = "+times);
times = checkXY_down(xLine,yLine,bORw,times);//下
win = whoWin(times,bORw);
//alert("times = "+times);
}
times = 0;
if(!win){
//alert("times = "+times);
times = checkXY_right_up(xLine,yLine,bORw,times);//右上
win = whoWin(times,bORw);
//alert("times = "+times);
}
if(!win){
//alert("times = "+times);
times = checkXY_left_down(xLine,yLine,bORw,times);//左下
win = whoWin(times,bORw);
//alert("times = "+times);
}
//alert("times = "+times);
}
/////////////////////
function checkXY_left(xLine,yLine,bORw,count){//检查 左 方向，即横向 --
var nearDiv;
xLine = Number(xLine);
yLine = Number(yLine);
for(var i = xLine-1;i > 0; i --){
nearDiv = document.getElementById("div_"+i+"_"+yLine+"_"+bORw);
//alert(nearDiv.name);
if(nearDiv.style.display == ""){
count = count + 1;
//continue;
}else{
break;
}
}
//alert("checkXY_left count = "+count);
return count;
}
function checkXY_right(xLine,yLine,bORw,count){//检查 右 方向，即横向 --
var nearDiv;
xLine = Number(xLine);
yLine = Number(yLine);
for(var i = xLine+1;i <= kuanORgao; i ++){
nearDiv = document.getElementById("div_"+i+"_"+yLine+"_"+bORw);
//alert(nearDiv.name);
if(nearDiv.style.display == ""){
count = count + 1;
//continue;
}else{
break;
}
}
//alert("checkXY_right count = "+count);
return count;
}
//////////////////////
function checkXY_left_up(xLine,yLine,bORw,count){//检查 左上 方向，即 \
var nearDiv;
xLine = Number(xLine);
yLine = Number(yLine);
var j = yLine-1;
for(var i = xLine-1;i > 0; i --){
if(j > 0){
nearDiv = document.getElementById("div_"+i+"_"+j+"_"+bORw);
//alert(nearDiv.name);
if(nearDiv.style.display == ""){
count = count + 1;
//continue;
}else{
break;
}
}
j--;
}
//alert("checkXY_left_up count = "+count);
return count;
}
function checkXY_right_down(xLine,yLine,bORw,count){//检查 右下 方向，即 \
var nearDiv;
xLine = Number(xLine);
yLine = Number(yLine);
var j = yLine+1;
for(var i = xLine+1;i <= kuanORgao; i ++){
if(j <= kuanORgao) {
nearDiv = document.getElementById("div_"+i+"_"+j+"_"+bORw);
//alert(nearDiv.name);
if(nearDiv.style.display == ""){
count = count + 1;
//continue;
}else{
break;
}
}
j ++;
}
//alert("checkXY_right_down count = "+count);
return count;
}
///////////////////////
function checkXY_up(xLine,yLine,bORw,count){//检查 上 方向，即横向 |
var nearDiv;
xLine = Number(xLine);
yLine = Number(yLine);
for(var i = yLine-1;i > 0; i --){
nearDiv = document.getElementById("div_"+xLine+"_"+i+"_"+bORw);
//alert(nearDiv.name);
if(nearDiv.style.display == ""){
count = count + 1;
//continue;
}else{
break;
}
}
//alert("checkXY_up count = "+count);
return count;
}
function checkXY_down(xLine,yLine,bORw,count){//检查 下 方向，即横向 |
var nearDiv;
xLine = Number(xLine);
yLine = Number(yLine);
for(var i = yLine+1;i <= kuanORgao; i ++){
nearDiv = document.getElementById("div_"+xLine+"_"+i+"_"+bORw);
//alert(nearDiv.name);
if(nearDiv.style.display == ""){
count = count + 1;
//continue;
}else{
break;
}
}
//alert("checkXY_down count = "+count);
return count;
}
//////////////////////
function checkXY_right_up(xLine,yLine,bORw,count){//检查 右上 方向，即横向 /
var nearDiv;
xLine = Number(xLine);
yLine = Number(yLine);
var j = yLine-1;
//alert(xLine+"aa"+yLine+"aa"+bORw+"aa"+count);
//alert(xLine+1);
for(var i = xLine+1 ;i <= kuanORgao; i ++){
if(j > 0 ){
nearDiv = document.getElementById("div_"+i+"_"+j+"_"+bORw);
//alert(nearDiv.name);
if(nearDiv.style.display == ""){
count = count + 1;
//continue;
}else{
break;
}
}
j--;
}
//alert("checkXY_right_up count = "+count);
return count;
}
function checkXY_left_down(xLine,yLine,bORw,count){//检查 左下 方向，即横向 /
var nearDiv;
xLine = Number(xLine);
yLine = Number(yLine);
var j = yLine+1;
for(var i = xLine-1;i > 0; i --){
if(j <= kuanORgao){
//alert(i+"aa"+j);
nearDiv = document.getElementById("div_"+i+"_"+j+"_"+bORw);
//alert(nearDiv.name);
if(nearDiv.style.display == ""){
count = count + 1;
//continue;
}else{
break;
}
}
j ++;
}
//alert("checkXY_left_down count = "+count);
return count;
}
function whoWin(times,bORw){
if(times == 4){
if(bORw == "b"){
alert("!黑子胜出!") ;
if(confirm("再来一局吗?"))
{
window.location.reload();
}else{
//window.close();
}
}else{
alert("!白子胜出!") ;
if(confirm("再来一局吗?"))
{
window.location.reload();
}else{
//window.close();
}
}
return true;
}else{
return false;
}
}
function reloadGame(){
if(confirm("重新开始一局吗?"))
{
window.location.reload();
}
}
function goback(){
//alert(historyStep);
var hisstep = historyStep.split("=");
//alert(hisstep.length);
if(hisstep.length <= 1){
alert("不能再悔了");
return false;
}
var laststep = hisstep[hisstep.length-1];
//alert(laststep);
var last = document.getElementById(laststep.toString());
//alert(last.style.dispaly.value);
last.style.display = "none";
//alert(last.name);
var b = historyStep.length - last.name.length-1;
historyStep = historyStep.substring(0,b);
//alert(historyStep);
dispaly = document.getElementById("displayInfo");
dispaly.value=" *黑*子*方*走*棋* ";
if(flag){
var lastNull = document.getElementById(laststep.toString().replace("w","n"));
//alert("lastNull"+lastNull);
//alert(lastNull.name);
lastNull.style.display = "";
w_QiZi = w_QiZi -1;
dispaly.value=" *白*子*方*走*棋* _已"+w_QiZi+"步";
flag = false;
}else{
var lastNull = document.getElementById(laststep.toString().replace("b","n"));
//alert("lastNull"+lastNull);
//alert(lastNull.name);
lastNull.style.display = "";
b_QiZi = b_QiZi -1;
dispaly.value=" *黑*子*方*走*棋* _已"+b_QiZi+"步";
flag = true;
}
}
</script>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -