js五子棋2
上一篇文章(js五子棋1)我直接使用dom存储五子棋落子位置,这次使用二维数组存储落子位置
1.初始化一个二维数组,0=没有子,1=黑子,2=白子
var qipan = new Array();
for(var i = 0; i < 15; i++) {
qipan[i] = new Array();
for(var j = 0; j < 15; j++) {
qipan[i][j] = 0;
}
}
2.点击td的事件改为,修改二维数组中对应的值
$(document).ready(function() {
$("td").click(function() {
var qs = parseInt($(".v1").html());
var row = $(this).parent().index();
var column = $(this).index();
if(qipan[row][column] == 0) {
if(qs % 2 == 0) {
$(this).css("background-image", "url(../img/black.png)");
qipan[row][column] = 1;
$("#set").val("白方下");
} else {
$(this).css("background-image", "url(../img/white.png)");
qipan[row][column] = 2;
$("#set").val("黑方下");
}
qs += 1;
$(".v1").html(qs);
$(".v2").html(Math.ceil(qs / 2));
if(isWin(row, column)) {
if(qs % 2 == 0) {
alert("白方胜");
} else {
alert("黑方胜");
}
reSet();
}
}
})
})3.新的重置方法中增加对二维数组的重置
function reSet() {
var board = document.getElementById("board");
for(var i = 0; i < 15; i++) {
for(var j = 0; j < 15; j++) {
qipan[i][j] = 0;
board.rows[i].cells[j].style.background = "";
}
}
$(".v1").html("0");
$(".v2").html("0");
$("#set").val("黑方下");
}
4.同理,判断胜利的方法也要做出相应的修改(略)
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no">
<title></title>
<style type="text/css">
#board {
width: 600px;
height: 600px;
float: left;
position: absolute;
top: 0px;
left: 0px;
}
#board td {
padding: 0px; //默认1px
border: 0px;
width: 40px;
height: 40px;
}
#msg {
float: left;
width: 160px;
height: 600px;
background-color: #dcdcdc;
position: absolute;
top: 0px;
left: 600px;
}
#set {
padding: 0px;
float: left;
width: 158px;
height: 80px;
font-family: "微软雅黑";
font-size: 40px;
color: blue;
}
#cd {
text-align: center;
font-family: "宋体";
font-size: 28px;
float: left;
border: solid 1px black;
width: 88px;
height: 48px;
}
#val {
text-align: center;
font-size: 40px;
float: left;
border: solid 1px black;
width: 68px;
height: 48px;
}
#cz {
font-size: 40px;
width: 160px;
height: 70px;
}
</style>
<script src="../js/jquery-3.1.1.min.js">
</script>
</head>
<body>
<table id="board" cellspacing="0px">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div id="msg">
<input id="set" type="text" value="黑方下" readonly="readonly" />
<div id="cd">棋数：</div>
<div id="val" class="v1">0</div>
<div id="cd">回合：</div>
<div id="val" class="v2">0</div>
<button id="cz">重置</button>
</div>
</body>
<script type="text/javascript">
var board = document.getElementById("board");
for(var i = 0; i < board.rows.length; i++) {
for(var j = 0; j < board.rows[i].cells.length; j++) {
var cell = board.rows[i].cells[j].bgColor;
if(i % 2 == 0) {
if(j % 2 == 0) {
board.rows[i].cells[j].bgColor = "#33ff33";
} else {
board.rows[i].cells[j].bgColor = "#00cc00";
}
} else {
if(j % 2 == 0) {
board.rows[i].cells[j].bgColor = "#00cc00";
} else {
board.rows[i].cells[j].bgColor = "#33ff33";
}
}
}
}
</script>
<script type="text/javascript">
var qipan = new Array();
for(var i = 0; i < 15; i++) {
qipan[i] = new Array();
for(var j = 0; j < 15; j++) {
qipan[i][j] = 0;
}
}
</script>
<script>
$(document).ready(function() {
$("td").click(function() {
var qs = parseInt($(".v1").html());
var row = $(this).parent().index();
var column = $(this).index();
if(qipan[row][column] == 0) {
if(qs % 2 == 0) {
$(this).css("background-image", "url(../img/black.png)");
qipan[row][column] = 1;
$("#set").val("白方下");
} else {
$(this).css("background-image", "url(../img/white.png)");
qipan[row][column] = 2;
$("#set").val("黑方下");
}
qs += 1;
$(".v1").html(qs);
$(".v2").html(Math.ceil(qs / 2));
if(isWin(row, column)) {
if(qs % 2 == 0) {
alert("白方胜");
} else {
alert("黑方胜");
}
reSet();
}
}
})
})
$(document).ready(function() {
$("#cz").click(function() {
reSet();
})
})
function reSet() {
var board = document.getElementById("board");
for(var i = 0; i < 15; i++) {
for(var j = 0; j < 15; j++) {
qipan[i][j] = 0;
board.rows[i].cells[j].style.background = "";
}
}
$(".v1").html("0");
$(".v2").html("0");
$("#set").val("黑方下");
}
function isWin(row, column) {
if(isRowWin(row, column) || isColWin(row, column) || isX1Win(row, column) || isX2Win(row, column)) {
return true;
} else {
return false;
}
}
function isRowWin(row, column) {
var sum = 1;
var cell = qipan[row][column];
for(var c = column-1; c >=0; c--) {
if(cell == qipan[row][c]) {
sum += 1;
} else {
break;
}
}
if(sum == 5) {
return true;
}
for(var c = column+1; c<15; c++) {
if(cell == qipan[row][c]) {
sum += 1;
} else {
break;
}
}
if(sum > 4) {
return true;
} else {
return false;
}
}
function isColWin(row, column) {
var sum = 1;
var cell = qipan[row][column];
for(var r = row-1; r >=0; r--) {
if(cell == qipan[r][column]) {
sum += 1;
} else {
break;
}
}
if(sum == 5) {
return true;
}
for(var r = row+1; r<15; r++) {
if(cell == qipan[r][column]) {
sum += 1;
} else {
break;
}
}
if(sum > 4) {
return true;
} else {
return false;
}
}
function isX1Win(row, column) {
var sum = 1;
var cell = qipan[row][column];
for(var r=row-1,c=column-1;r>=0&&c>=0;r--,c--) {
if(cell == qipan[r][c]) {
sum += 1;
} else {
break;
}
}
if(sum == 5) {
return true;
}
for(var r=row+1,c=column+1;r<15&&c<15;r++,c++) {
if(cell == qipan[r][c]) {
sum += 1;
} else {
break;
}
}
if(sum > 4) {
return true;
} else {
return false;
}
}
function isX2Win(row, column) {
var sum = 1;
var cell = qipan[row][column];
for(var r=row-1,c=column+1;r>=0&&c<15;r--,c++) {
if(cell == qipan[r][c]) {
sum += 1;
} else {
break;
}
}
if(sum == 5) {
return true;
}
for(var r=row+1,c=column-1;r<15&&c>=0;r++,c--) {
if(cell == qipan[r][c]) {
sum += 1;
} else {
break;
}
}
if(sum > 4) {
return true;
} else {
return false;
}
}
</script>
</html>