js 五子棋(无ai，仅判断胜负)
2012-04-24 14:30
323 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>五子棋</title>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:0 auto;padding: 0;width:600px;height:600px; text-align:center}
.top{width:600px;height:55px;}
.middle{width:600px;height:490px;}
.left{width:110px;height:480px;float:left;}
#right{width:480px;height:480px;float:left;padding:10px 0px 0px 10px; background-color:#CCC;}
#b1{width:450px;height:450px;z-index:1;margin: 10px 10px;position:absolute;}
#z2{width:480px;height:480px;z-index:2; display:none;position:absolute;}
#z2 span.wb{ background:url(imgs/wb.gif) no-repeat;}
#z2 span.bb{background:url(imgs/bb.gif) no-repeat;}
.bottom{width:600px;height:55px;}
</style>
<script src="js/JScriptLib.js" type="text/javascript"></script><!-- 文章js常用类 -->
<script type="text/javascript">
var flag = 0;
var w = [];
var b = [];
var chesscount = 1;
//开始游戏
function startGame() {
drawGameBack();//画棋盘
drawGameFlag();//棋子占位
showCurrent("白方");
}
function drawGameBack() {
var b1 = JScriptLib.$("b1", 0);
var divwh = JScriptLib.$("chessboard", 0).value;
var divcount = 15*15;
divwh = divwh + "px";
b1.style.borderTop = "#000 solid 1px";
b1.style.borderRight = "#000 solid 1px";
var _div = []
for (i = 0; i < divcount; i++) {
_div[i] = document.createElement("div");
_div[i].className = "div"
_div[i].style.width = divwh;
_div[i].style.height = divwh;
_div[i].style.borderBottom = "#000 solid 1px";
_div[i].style.borderLeft = "#000 solid 1px";
_div[i].style.styleFloat = "left";
b1.appendChild(_div[i]);
}
}
//span 宽高固定 20 px
function drawGameFlag() {
var z2 = JScriptLib.$("z2", 0);
z2.style.display = "block";
var spanwh = 20;
var spancount = 16*16;
spanwh = spanwh + "px";
var _span = [];
for (i = 0; i < spancount; i++) {
_span[i] = document.createElement("span");
_span[i].className = "span";
_span[i].style.width = spanwh;
_span[i].style.height = spanwh;
_span[i].style.margin = "0px 10px 10px 0px";
_span[i].style.styleFloat = "left";
_span[i].style.cursor = "pointer";//设置鼠标样式
_span[i].title=parseInt(i%16)+"-"+parseInt(i/16);//获取坐标（x,y）
z2.appendChild(_span[i]);
}
showPieces();//添加事件
}
function showPieces() {
var piece = z2.getElementsByTagName("span");
for (var i = 0; i < piece.length; i++) {
piece[i].onclick = function() {
play(this);
}
}
}
//开始下子
function play(obj) {
if (obj != null) {
if (obj.className != "wb" && obj.className != "bb") {
var index = obj.title;
if (flag == 0) {
obj.className = "wb"
w.push(index);
if (isWin(index)) {
chesscount = 1;
alert("白方胜！");
cancelGame();
} else {
//var xindex = index.split("-");
//w[parseInt(xindex[0])][parseInt(xindex[1])] = "白";
flag = 1;
showCurrent("黑方");
}
} else {
obj.className = "bb"
b.push(index);
if (isWin(index)) {
chesscount = 1;
alert("黑方胜！");
cancelGame();
} else {
flag = 0;
showCurrent("白方");
}
}
}
}
}
//判断是否获胜
function isWin(currentindex) {
var win = false;
var x;
var y;
var temp = currentindex.split("-");
x = parseInt(temp[0]);
y = parseInt(temp[1]);
if (flag == 0) {//白方
//垂直
if (winArithmetic(x, y, w, 0) == 5) {
return win = true;
}
//水平
if (winArithmetic(x, y, w, 1) == 5) {
return win = true;
}
//45度
if (winArithmetic(x, y, w, 2) == 5) {
return win = true;
}
//135度
if (winArithmetic(x, y, w, 3) == 5) {
return win = true;
}
} else {//黑方
//垂直
if (winArithmetic(x, y, b, 0) == 5) {
return win = true;
}
//水平
if (winArithmetic(x, y, b, 1) == 5) {
return win = true;
}
//45度
if (winArithmetic(x, y, b, 2) == 5) {
return win = true;
}
//135度
if (winArithmetic(x, y, b, 3) == 5) {
return win = true;
}
}
return win;
}
//0=垂直（y变化） 1=水平（x变化） 2=45度和3=135度（x,y都变化）
function winArithmetic(x, y, objarr, direction) {
var strtemp = getStr(x, y, 1, direction); //(changepoint + 1).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方1 继续判断
chesscount = 2;
strtemp = getStr(x, y, 2, direction); //(changepoint + 2).toString() + "-" + fixedpoint;
//正方2 继续判断
if (objarr.toString().indexOf(strtemp) != -1) {
chesscount = 3;
strtemp = getStr(x, y, 3, direction); //(changepoint + 3).toString() + "-" + fixedpoint;
//正方3 继续判断
if (objarr.toString().indexOf(strtemp) != -1) {
chesscount = 4;
strtemp = getStr(x, y, 4, direction); //(changepoint + 4).toString() + "-" + fixedpoint;
//正方4 继续判断
if (objarr.toString().indexOf(strtemp) != -1) {//正方5 返回
return chesscount = 5;
} else {//正方4，反方判断
strtemp = getStr(x, y, -1, direction); //(changepoint - 1).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方4 反方1 返回
return chesscount = 5;
}
}
} else {//正方3 反方判断
strtemp = getStr(x, y, -1, direction); //(changepoint - 1).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {
chesscount = 4; //正方3 反方1 共4
strtemp = getStr(x, y, -2, direction); //(changepoint - 2).toString() + "-" + fixedpoint;
//正方3 反方1 共4 反方判断
if (objarr.toString().indexOf(strtemp) != -1) {
return chesscount=5;
}
}
}
} else {//正方2 反方判断
strtemp = getStr(x, y, -1, direction); //(changepoint - 1).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方2 反方1 共3 继续反方判断
chesscount = 3;
strtemp = getStr(x, y, -2, direction); //(changepoint - 2).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方2 反方2 共4 继续反方判断
chesscount = 4;
strtemp = getStr(x, y, -3, direction); //(changepoint - 3).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方2 反方3 共5 返回
return chesscount=5;
}
}
}
}
} else {//正方1 反方判断
strtemp = getStr(x, y, -1, direction); //(changepoint - 1).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方1 反方1 共2 继续反方判断
chesscount = 2;
strtemp = getStr(x, y, -2, direction); //(changepoint - 2).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方1 反方2 共3 继续反方判断
chesscount = 3;
strtemp = getStr(x, y, -3, direction); //(changepoint - 3).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方1 反方3 共4 继续反方判断
chesscount = 4;
strtemp = getStr(x, y, -4, direction); //(changepoint - 4).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方1 反方4 共5 返回
return chesscount=5;
}
}
}
}
}
return chesscount;
}
function getStr(x, y, changeindex,direction) {
var str = "";
switch (direction) {
case 0: //垂直 y变化
str = x + "-" + (y + changeindex).toString();
break;
case 1: //水平 x变化
str = (x + changeindex).toString() + "-" + y;
break;
case 2: //2=45度（正方 x加y加）
str = (x + changeindex).toString() + "-" + (y + changeindex).toString();
break;
case 3: //3=135度（正方 x加y减）
str = (x + changeindex).toString() + "-" + (y - changeindex).toString();
break;
}
return str;
}
function showCurrent(info) {
JScriptLib.$("showinfo", 0).innerHTML = "当期执子为：<font color=red>" + info + "</font>";
}
function cancelGame() {
var b1 = JScriptLib.$("b1", 0);
b1.innerText = "";
b1.style.border = "none";
JScriptLib.$("z2", 0).innerText = "";
chesscount = 1;
w = [];
b = [];
flag = 0;
}
</script>
</head>
<body>
<!------- 头部开始 ------->
<div class="top">五子棋
<p id="showinfo"></p>
</div>
<!--头部结尾-->
<div class="middle">
<!------- 左边开始 ------->
<div class="left">
<h4>五子棋设置</h4>
<ul>
<li>棋盘大小
<select id="chessboard">
<option value="29">30*30</option>
</select>
</li>
<li>棋子大小
<select>
<option>20px</option>
</select>
</li>
<li><input type="button" value="开始游戏" onclick="startGame();" /></li>
<li><input type="button" value="重置设置" onclick="cancelGame();" /></li>
</ul>
</div>
<!-- 左边结尾 -->
<!-------- 右边开始 -------->
<div id="right">
<div id="b1"></div>
<div id="z2"></div>
</div>
<!--右边结尾 -->
</div>
<!--中部内容结尾-->
<!-------- 底部开始 -------->
<div class="bottom">版权</div>
<!-- 底部结尾 -->
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>五子棋</title>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:0 auto;padding: 0;width:600px;height:600px; text-align:center}
.top{width:600px;height:55px;}
.middle{width:600px;height:490px;}
.left{width:110px;height:480px;float:left;}
#right{width:480px;height:480px;float:left;padding:10px 0px 0px 10px; background-color:#CCC;}
#b1{width:450px;height:450px;z-index:1;margin: 10px 10px;position:absolute;}
#z2{width:480px;height:480px;z-index:2; display:none;position:absolute;}
#z2 span.wb{ background:url(imgs/wb.gif) no-repeat;}
#z2 span.bb{background:url(imgs/bb.gif) no-repeat;}
.bottom{width:600px;height:55px;}
</style>
<script src="js/JScriptLib.js" type="text/javascript"></script><!-- 文章js常用类 -->
<script type="text/javascript">
var flag = 0;
var w = [];
var b = [];
var chesscount = 1;
//开始游戏
function startGame() {
drawGameBack();//画棋盘
drawGameFlag();//棋子占位
showCurrent("白方");
}
function drawGameBack() {
var b1 = JScriptLib.$("b1", 0);
var divwh = JScriptLib.$("chessboard", 0).value;
var divcount = 15*15;
divwh = divwh + "px";
b1.style.borderTop = "#000 solid 1px";
b1.style.borderRight = "#000 solid 1px";
var _div = []
for (i = 0; i < divcount; i++) {
_div[i] = document.createElement("div");
_div[i].className = "div"
_div[i].style.width = divwh;
_div[i].style.height = divwh;
_div[i].style.borderBottom = "#000 solid 1px";
_div[i].style.borderLeft = "#000 solid 1px";
_div[i].style.styleFloat = "left";
b1.appendChild(_div[i]);
}
}
//span 宽高固定 20 px
function drawGameFlag() {
var z2 = JScriptLib.$("z2", 0);
z2.style.display = "block";
var spanwh = 20;
var spancount = 16*16;
spanwh = spanwh + "px";
var _span = [];
for (i = 0; i < spancount; i++) {
_span[i] = document.createElement("span");
_span[i].className = "span";
_span[i].style.width = spanwh;
_span[i].style.height = spanwh;
_span[i].style.margin = "0px 10px 10px 0px";
_span[i].style.styleFloat = "left";
_span[i].style.cursor = "pointer";//设置鼠标样式
_span[i].title=parseInt(i%16)+"-"+parseInt(i/16);//获取坐标（x,y）
z2.appendChild(_span[i]);
}
showPieces();//添加事件
}
function showPieces() {
var piece = z2.getElementsByTagName("span");
for (var i = 0; i < piece.length; i++) {
piece[i].onclick = function() {
play(this);
}
}
}
//开始下子
function play(obj) {
if (obj != null) {
if (obj.className != "wb" && obj.className != "bb") {
var index = obj.title;
if (flag == 0) {
obj.className = "wb"
w.push(index);
if (isWin(index)) {
chesscount = 1;
alert("白方胜！");
cancelGame();
} else {
//var xindex = index.split("-");
//w[parseInt(xindex[0])][parseInt(xindex[1])] = "白";
flag = 1;
showCurrent("黑方");
}
} else {
obj.className = "bb"
b.push(index);
if (isWin(index)) {
chesscount = 1;
alert("黑方胜！");
cancelGame();
} else {
flag = 0;
showCurrent("白方");
}
}
}
}
}
//判断是否获胜
function isWin(currentindex) {
var win = false;
var x;
var y;
var temp = currentindex.split("-");
x = parseInt(temp[0]);
y = parseInt(temp[1]);
if (flag == 0) {//白方
//垂直
if (winArithmetic(x, y, w, 0) == 5) {
return win = true;
}
//水平
if (winArithmetic(x, y, w, 1) == 5) {
return win = true;
}
//45度
if (winArithmetic(x, y, w, 2) == 5) {
return win = true;
}
//135度
if (winArithmetic(x, y, w, 3) == 5) {
return win = true;
}
} else {//黑方
//垂直
if (winArithmetic(x, y, b, 0) == 5) {
return win = true;
}
//水平
if (winArithmetic(x, y, b, 1) == 5) {
return win = true;
}
//45度
if (winArithmetic(x, y, b, 2) == 5) {
return win = true;
}
//135度
if (winArithmetic(x, y, b, 3) == 5) {
return win = true;
}
}
return win;
}
//0=垂直（y变化） 1=水平（x变化） 2=45度和3=135度（x,y都变化）
function winArithmetic(x, y, objarr, direction) {
var strtemp = getStr(x, y, 1, direction); //(changepoint + 1).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方1 继续判断
chesscount = 2;
strtemp = getStr(x, y, 2, direction); //(changepoint + 2).toString() + "-" + fixedpoint;
//正方2 继续判断
if (objarr.toString().indexOf(strtemp) != -1) {
chesscount = 3;
strtemp = getStr(x, y, 3, direction); //(changepoint + 3).toString() + "-" + fixedpoint;
//正方3 继续判断
if (objarr.toString().indexOf(strtemp) != -1) {
chesscount = 4;
strtemp = getStr(x, y, 4, direction); //(changepoint + 4).toString() + "-" + fixedpoint;
//正方4 继续判断
if (objarr.toString().indexOf(strtemp) != -1) {//正方5 返回
return chesscount = 5;
} else {//正方4，反方判断
strtemp = getStr(x, y, -1, direction); //(changepoint - 1).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方4 反方1 返回
return chesscount = 5;
}
}
} else {//正方3 反方判断
strtemp = getStr(x, y, -1, direction); //(changepoint - 1).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {
chesscount = 4; //正方3 反方1 共4
strtemp = getStr(x, y, -2, direction); //(changepoint - 2).toString() + "-" + fixedpoint;
//正方3 反方1 共4 反方判断
if (objarr.toString().indexOf(strtemp) != -1) {
return chesscount=5;
}
}
}
} else {//正方2 反方判断
strtemp = getStr(x, y, -1, direction); //(changepoint - 1).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方2 反方1 共3 继续反方判断
chesscount = 3;
strtemp = getStr(x, y, -2, direction); //(changepoint - 2).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方2 反方2 共4 继续反方判断
chesscount = 4;
strtemp = getStr(x, y, -3, direction); //(changepoint - 3).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方2 反方3 共5 返回
return chesscount=5;
}
}
}
}
} else {//正方1 反方判断
strtemp = getStr(x, y, -1, direction); //(changepoint - 1).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方1 反方1 共2 继续反方判断
chesscount = 2;
strtemp = getStr(x, y, -2, direction); //(changepoint - 2).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方1 反方2 共3 继续反方判断
chesscount = 3;
strtemp = getStr(x, y, -3, direction); //(changepoint - 3).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方1 反方3 共4 继续反方判断
chesscount = 4;
strtemp = getStr(x, y, -4, direction); //(changepoint - 4).toString() + "-" + fixedpoint;
if (objarr.toString().indexOf(strtemp) != -1) {//正方1 反方4 共5 返回
return chesscount=5;
}
}
}
}
}
return chesscount;
}
function getStr(x, y, changeindex,direction) {
var str = "";
switch (direction) {
case 0: //垂直 y变化
str = x + "-" + (y + changeindex).toString();
break;
case 1: //水平 x变化
str = (x + changeindex).toString() + "-" + y;
break;
case 2: //2=45度（正方 x加y加）
str = (x + changeindex).toString() + "-" + (y + changeindex).toString();
break;
case 3: //3=135度（正方 x加y减）
str = (x + changeindex).toString() + "-" + (y - changeindex).toString();
break;
}
return str;
}
function showCurrent(info) {
JScriptLib.$("showinfo", 0).innerHTML = "当期执子为：<font color=red>" + info + "</font>";
}
function cancelGame() {
var b1 = JScriptLib.$("b1", 0);
b1.innerText = "";
b1.style.border = "none";
JScriptLib.$("z2", 0).innerText = "";
chesscount = 1;
w = [];
b = [];
flag = 0;
}
</script>
</head>
<body>
<!------- 头部开始 ------->
<div class="top">五子棋
<p id="showinfo"></p>
</div>
<!--头部结尾-->
<div class="middle">
<!------- 左边开始 ------->
<div class="left">
<h4>五子棋设置</h4>
<ul>
<li>棋盘大小
<select id="chessboard">
<option value="29">30*30</option>
</select>
</li>
<li>棋子大小
<select>
<option>20px</option>
</select>
</li>
<li><input type="button" value="开始游戏" onclick="startGame();" /></li>
<li><input type="button" value="重置设置" onclick="cancelGame();" /></li>
</ul>
</div>
<!-- 左边结尾 -->
<!-------- 右边开始 -------->
<div id="right">
<div id="b1"></div>
<div id="z2"></div>
</div>
<!--右边结尾 -->
</div>
<!--中部内容结尾-->
<!-------- 底部开始 -------->
<div class="bottom">版权</div>
<!-- 底部结尾 -->
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AS3.0五子棋判断胜负及人机算法（AI）
- js实现五子棋（含AI）
- Cocos2d-x制作跳棋第四步:胜负判断、AI具体实现及实现特殊组合动作的小技巧
- 对五子棋胜负的一个模拟判断
- JS判断、控制文件上传的类型
- js如何判断输入字符串长度
- js如何判断一个对象是不是Array？
- js判断来源的url是否是本站点过来的url
- JS代码判断集锦大全第1/5页
- 使用JS实现在客户端判断上传文件大小
- js 判断手机横竖屏的实现方法（不依赖任何其他库）
- 用js判断输入是否为中文的函数
- 如何js中判断页面上选择框中输入的两个日期的差值小于31
- js判断IE浏览器版本（IE8及以下）
- js判断手机号是否正确并返回的实现代码
- js判断是否安装flash player及当前版本 和 检查flash版本是否需要升级
- JavaScript:isNaN("21"):js函数判断字符串是否为数字
- js 判断字符串是否包含某字符串,String对象中查找子字符,indexOf
- JS判断客户端是否是iOS或者Android手机移动端