<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五子棋canvas</title>
<link rel="stylesheet" type="text/css" href="css/1.css"/>
<script>
//javascript绘制canvas棋盘。
function initialize(){
myCanvas = document.getElementById("myCanvas");
context = myCanvas.getContext("2d");
//绘制一个 间距为40px的棋盘
for (var i=0; i<=1280; i+=40) {
context.beginPath();
context.moveTo(i,0);
context.lineTo(i,1280);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(0,i);
context.lineTo(1280,i);
context.closePath();
context.stroke();
}
}
var wChess = new Image();
wChess.src = "img/w.png"; //定义白色棋子图片
var bChess = new Image();
bChess.src = "img/b.png"; //定义黑色棋子图片
var gGrid = new Image();
gGrid.src = "img/g.png";
var oHint = new Image();
oHint.src = "img/hint.png";
var white = false; //用来判断轮到白棋下子
var winJ = false; //胜利条件
var t = 0; //记录下棋的步数
var playerLast = []; //记录该位置的坐标（x,y）
var chess = 1;
//二维数组，相当于棋盘的坐标。0为没有棋子坐落，1为白棋走的，2为黑棋走的。
var chessArray = new Array(31);
for (var x = 0; x <= 31; x++) {
chessArray[x] = new Array(15);
for (var y = 0; y <= 15; y++) {
chessArray[x][y] = 0;
}
}
//二维数组，储存下棋位置的坐标
var backArray = new Array(31);
for(var x = 0; x <= 31; x++){
backArray[x] = new Array(15);
for(var y = 0; y <= 15; y++){
backArray[x][y] = 0;
}
}
var coordinatesArray = [];
//function hint(coordinates){
// var x = parseInt((coordinates.clientX-20) / 40); //x值为水平方向的第 x+1 的位置。
// var y = parseInt((coordinates.clientY-20) / 40); //y值为水平方向的第 y+1 的位置。
//
//
// if(x>=0 && y>=0 && x<31 && y<15){
// context.drawImage(oHint , x* 40+20 ,y * 40+20 );
// }
//
//}
function backChess(){ //点击悔棋按钮，执行此函数
if(t > 0){ //判断t步，如果t等于0，则说明没有下棋，则不能悔棋，弹出提示。
if ( t%2 == 0) { //t步求余，等于0时，则悔黑色棋
lastbackChess(2, coordinatesArray[t][0][0], coordinatesArray[t][0][1]);
t--; //悔棋完成，t步-1
}else if(t%2 != 0){ //t步求余，不等于0时，则悔白色棋
lastbackChess(1, coordinatesArray[t][0][0], coordinatesArray[t][0][1]);
t--;
}
}else{
alert("已经没有可以悔棋的棋子了!");
}
}
function lastbackChess(chess,bx,by){
if (chess == 1 ) { //悔白色棋子
context.drawImage(gGrid , bx * 40+20 ,by * 40+20 ); //在此位置用图片覆盖棋子，恢复没有下棋的状态
chessArray[bx][by] = 0; //此位置判断胜利的值变为0，恢复没有下棋的状态
white = true; //悔棋后，继续下白棋
winJ = false; //胜利判定变为否
chess = 2; //实现循环悔棋
} else{ //悔黑色棋子
context.drawImage(gGrid , bx * 40+20 ,by * 40+20 ); //在此位置用图片覆盖棋子，恢复没有下棋的状态
chessArray[bx][by] = 0; //此位置判断胜利的值变为0，恢复没有下棋的状态
white = false; //悔棋后，继续下黑棋
winJ = false; //胜利判定变为否
chess = 1; //实现循环悔棋
}
}
//
//function lastbackChess(chess, bX, bY){
//
// alert(chess);
//
// if (chess == 1 ) {
// alert(backArray[bX][bY][0]);
// context.drawImage(gGrid , bX * 40+20 ,bY * 40+20 );
// chessArray[bX][bY] = 0;
// white = false;
// console.log("hhh");
// chess = 2;
// } else{
// alert(backArray[bX][bY]);
// context.drawImage(gGrid , bX * 40+20 ,bY * 40+20 );
// chessArray[bX][bY] = 0;
// white = true;
// console.log("hh");
// chess = 1;
// }
//}
function play(coordinates){ //当用户下棋时，触发此函数，传入event。
var x = parseInt((coordinates.clientX-20) / 40); //x值为水平方向的第 x+1个位置。
var y = parseInt((coordinates.clientY-20) / 40); //y值为垂直方向的第 y+1个位置。
playerLast = [x,y]; //记录当前坐标
if(chessArray[x][y] != 0){ //如果下棋的位置已经被其他棋子占有，则弹出警告，并终止。
alert("棋盘上可没有叠罗汉这一招哦！");
return;
}
if (white) { //白棋传入true值，变为false，进入黑棋下子。
t+=1;
white = false;
designChess(1 , x, y);
} else{ //白棋传入false值，变为true，进入白棋下子，实现回合制。
t+=1;
white = true;
designChess(2 , x, y);
}
}
function designChess(chess , x, y){
if (chess == 1) { //下白色棋子
if(x>=0 && y>=0 && x<31 && y<15){ //满足0 =< x <31, 0 =< y <15的区域才能下棋
if (winJ == true) { //画棋前先判断是否已经结束
backArray[x][y] = playerLast; //将当前位置的坐标储存进二维数组
coordinatesArray[t] = [backArray[x][y]]; //第t步时，棋子的坐标
alert("棋局已经结束，请刷新重玩");
return;
}else{
context.drawImage(wChess , x* 40+20 ,y * 40+20 );
chessArray[x][y] = 1; //存储白色棋子该位置的值，用于后面胜利条件的判断
backArray[x][y] = playerLast; //将当前位置的坐标储存进二维数组
coordinatesArray[t] = [backArray[x][y]]; //第t步时，棋子的坐标
console.log(coordinatesArray[t]);
}
}
else{ //下出区域则提醒不能下载边界
alert("大兄弟，这个位置会让你感觉走投无路的，换个地方下吧");
}
} else{
if(x>=0 && y>=0 && x<31 && y<15){
if (winJ == true) { //画棋前先判断是否已经结束
backArray[x][y] = playerLast; //将当前位置的坐标储存进二维数组
coordinatesArray[t] = [backArray[x][y]]; //第t步时，棋子的坐标
alert("棋局已经结束，请刷新重玩");
return;
}else{
context.drawImage(bChess , x* 40+20 ,y * 40+20 );
chessArray[x][y] = 2; //存储黑色棋子该位置的值,用于后面胜利条件的判断
backArray[x][y] = playerLast;
coordinatesArray[t] = [backArray[x][y]];
console.log(coordinatesArray[t]);
}
}
else{
alert("大兄弟，这个位置会让你感觉走投无路的，换个地方下吧");
}
}
judge(chess, x ,y) //下棋后判断是否胜利
}
function judge(chess, x, y){
var winX = 0; //用于判断水平方向的胜利条件
var winY = 0; //用于判断垂直方向的胜利条件
var winTopLeft = 0; //用于判断左上右下方向的胜利条件
var winTopRight = 0; //用于判断左下右上方向的胜利条件
//当水平方向出现4颗相同棋子，此时做出判断
var jXr = 0; //用于存储右方向的胜利条件
var jXl = 0; //用于存储左方向的胜利条件
var jYr = 0; //用于存储下方的胜利条件
var jYl = 0; //用于存储上方的胜利条件
var jTVr = 0; //用于存储左上右下的右下方胜利条件
var jTVl = 0; //用于存储左上右下的左上方胜利条件
var jTWr = 0; //用于存储左下右上的右上方胜利条件
var jTWl = 0; //用于存储左下右上的左下方胜利胜利条件
var jSum = 0; //用于存储水平方向胜利条件，等于2时，则已经满足胜利条件。
for (var z = x; z < 31; z++) {
if (chessArray[z][y] != chess) { //检索右边是否有相邻同色棋子
if(chessArray[z][y] == chess || chessArray[z][y] == 0){
jXr = 1; //如果有同色棋子或是空棋位，则满足一半胜利条件
}
break;
}
winX++; //有同色棋子，胜利条件+1。
}
for (var z = x-1; z >= 0; z--) {
if (chessArray[z][y] !== chess) { //检索左边是否有相邻同色棋子
if(chessArray[z][y] == chess || chessArray[z][y] == 0){
jXl = 1; //如果有同色棋子或是空棋位，则满足一半胜利条件
}
break;
}
winX++;
}
if (winX == 4) { //当相邻棋子达到4颗时，做出必要判断
jSum = jXl + jXr;
if (jSum == 2) { //当左右都有相邻棋子和2个空位的时候，已经胜利了
if (chess == 1) { //chess = 1 代表白棋胜利
alert("白棋胜利了");
} else{ //chess != 1代表黑棋胜利
alert("黑棋胜利了");
}
winJ = true;
}
}
for (var z = y; z < 15; z++) {
if (chessArray[x][z] != chess) { //检索下方是否有相邻同色棋子
if(chessArray[x][z] == chess || chessArray[x][z] == 0){
jYr = 1; //如果有同色棋子或是空棋位，则满足一半胜利条件
}
break;
}
winY++; //有同色棋子，胜利条件+1。
}
for (var z = y-1; z >= 0; z--) {
if (chessArray[x][z] !== chess) { //检索上方是否有相邻同色棋子
if(chessArray[x][z] == chess || chessArray[x][z] == 0){
jYl = 1; //如果有同色棋子或是空棋位，则满足一半胜利条件
}
break;
}
winY++;
}
if (winY == 4) { //当上下相邻棋子达到4颗时，做出必要判断
jSum = jYl + jYr;
if (jSum == 2) { //当上下都有相邻棋子和2个空位的时候，已经胜利了
if (chess == 1) { //chess = 1 代表白棋胜利
alert("白棋胜利了");
} else{ //chess != 1代表黑棋胜利
alert("黑棋胜利了");
}
winJ = true;
}
}
for (var z = x, c = y; x < 31, c < 15; z++,c++) {
if (chessArray[z][c] != chess) { //检索右下方是否有相邻同色棋子
if (chessArray[z][c] == chess || chessArray[z][c] == 0) {
jTVr = 1; //如果有同色棋子或是空棋位，则满足一半胜利条件
}
break;
}
winTopLeft++;
}
for (var z = x-1, c = y-1; x < 31, c < 15; z--, c--) {
if (chessArray[z][c] != chess) { //检索左上方是否有相邻同色棋子
if (chessArray[z][c] == chess || chessArray[z][c] == 0) {
jTVl = 1; //如果有同色棋子或是空棋位，则满足一半胜利条件
}
break;
}
winTopLeft++;
}
if (winTopLeft == 4) {
jSum = jTVr + jTVl;
if (jSum == 2) { //当左上方和右下方都存在同色棋子和空棋位时，已经获胜
if (chess == 1) {
alert("白棋获胜");
} else{
alert("黑棋获胜");
}
}
}
for (var z = x, c = y; x < 31, c >= 0; z++,c--) {
if (chessArray[z][c] != chess) { //检索右上方是否有同色棋子
jTWr = 0;
if (chessArray[z][c] == chess || chessArray[z][c] == 0) {
jTWr = 1; //存在同色棋或空棋位则接近胜利
}
break;
}
winTopRight++;
}
for (var z = x-1, c = y+1; x >= 0, c < 15; z--, c++) {
if (chessArray[z][c] != chess) { //检索左下方是否有同色棋子
jTWl = 0;
if (chessArray[x][c] == chess || chessArray[z][c] == 0) {
jTWl = 1; //存在同色棋或空棋位则接近胜利
}
break;
}
winTopRight++;
}
if (winTopRight == 4) { //存在4颗同色棋时，做出胜利判断
jSum = jTWr + jTWl;
if (jSum == 2) { //存在2个空棋位则已经获胜
if (chess == 1) {
alert("白棋获胜");
} else{
alert("黑棋获胜");
}
}
}
if (winX == 5 || winY == 5 || winTopLeft == 5 || winTopRight == 5) { //满足其一则获胜
if (chess==1) {
alert("白棋胜利了");
} else if(chess==2){
alert("黑棋胜利了");
}
winJ = true; //已获得胜利传递true值
}
}
</script>
</head><body οnlοad="initialize()">
<canvas id="myCanvas" width="1280" height="640" οnmοusedοwn="play(event)" ></canvas>
<a href="javascript:void(0);" class="backchess" οnclick="backChess()">悔棋</a>
</body>
</html>
154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
