<!DOCTYPE html>
<html><head>
<title>五子棋</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="600" height="600" style="background:url('wuzi/bak.jpg')"></canvas>
<script type="text/javascript">
// 画布
var cxt = document.getElementById('canvas').getContext('2d');
// 棋盘
for (var i = 0; i < 15; i++) {
for (var j = 0; j < 15; j++) {
cxt.strokeRect(i*40,j*40,40,40);
};
};
// 棋子
// 白棋
var white = new Image();
white.src='wuzi/white.png';
// 黑棋
var black = new Image();
black.src='wuzi/black.png';
// 开局的状态 没有棋子0 白1 黑2
// 行
var chess = new Array(15);
for (var i = 0; i < 15; i++) {
// 列
chess[i] = new Array(15);
for (var j = 0; j < 15; j++) {
chess[i][j] = 0;
};
};
// 下棋
document.getElementById('canvas').onclick = play;
//判断下的是白子还是黑子
var isWhite = false;
function play(e){
var col = Math.round(e.clientX / 40); //列
var row = Math.round(e.clientY / 40); //行
// 判断当前位置有没有子
if (chess[row][col] != 0) {
alert('你傻啊!这里有子');
return;
};
// 画白子
if (isWhite) {
cxt.drawImage(white,col*40-18,row*40-18);
// 存储状态
chess[row][col] = 1;
win(row,col,1);
isWhite = false;
}else{
// 画黑子
cxt.drawImage(black,col*40-18,row*40-18);
// 存储状态
chess[row][col] = 2;
win(row,col,2);
isWhite = true;
}
// 判断输赢的函数
function win(row,col,n){
var sum = 1;
var c = col;
var r = row;
// 水平
while(chess[row][col-1]==n&&col-1>0){
sum++;
col--;
}
col = c;
row = r;
while(chess[row][col+1]==n&&col+1<15){
sum++;
col++;
}
if (sum>=5) {
if (n==1) {
alert('白棋胜,确定重新开局');
}else{
alert('黑棋胜,确定重新开局');
}
restore();
};
// 垂直
sum = 1;
col = c;
row = r;
while(chess[row-1][col]==n&&row-1>0){
sum++;
row--;
}
col = c;
row = r;
while(chess[row+1][col]==n&&row+1<15){
sum++;
row++;
}
if (sum>=5) {
if (n==1) {
alert('白棋胜,确定重新开局');
}else{
alert('黑棋胜,确定重新开局');
}
restore();
};
// 斜边
// 右上 左下
sum = 1;
col = c;
row = r;
while(chess[row-1][col+1]==n&&row-1>0&&col+1<15){
sum++;
row--;
col++;
}
col = c;
row = r;
while(chess[row+1][col-1]==n&&row+1<15&&col-1>0){
sum++;
row++;
col--;
}
if (sum>=5) {
if (n==1) {
alert('白棋胜,确定重新开局');
}else{
alert('黑棋胜,确定重新开局');
}
restore();
};
// 左上 右下
sum = 1;
col = c;
row = r;
while(chess[row-1][col-1]==n&&row-1>0&&col-1>0){
sum++;
row--;
col--;
}
col = c;
row = r;
while(chess[row+1][col+1]==n&&row+1<15&&col+1<15){
sum++;
row++;
col++;
}
if (sum>=5) {
if (n==1) {
alert('白棋胜,确定重新开局');
}else{
alert('黑棋胜,确定重新开局');
}
restore();
};
}
}
function restore(){
window.location.reload();
}
</script>
</body>
</html>