和老师一样敲的代码,看了好几遍,但测试的时候发现没到五个子就说我赢了请问哪位大哥帮我看看错在哪里
var chess = document.getElementById('chess');
var context = chess.getContext("2d");
var chessBoard = []
var me = true;
var over = false;
//赢法数组
var wins = []
//赢法的统计数组
var myWin = [];
var computerWin = [];
for(var i=0; i<15; i++){
chessBoard[i] = []
for (var j = 0; j < 15; j++) {
chessBoard[i][j] = 0;
};
}
for(var i=0; i<15; i++){
wins[i] = [];
for(var j=0; j<15; j++){
wins[i][j] = [];
}
}
//所有横线的赢法
var count = 0;
for(var i=0; i<15; i++){
for(var j=0; j<11; j++){
for(var k=0; k<5; k++){
wins[i][j+k][count] = true;
}
count++;
}
}
//所有竖线的赢法
for(var i=0; i<15; i++){
for(var j=0; j<11; j++){
for(var k=0; k<5; k++){
wins[j+k][i][count] = true;
}
count++;
}
}
//所有正向斜线的赢法
for(var i=0; i<11; i++){
for(var j=0; j<11; j++){
/*
j=0
wins[0][0][0]
wins[1][1][0]
wins[2][2][0]
wins[3][3][0]
wins[4][4][0]
j=1
wins[0][1][0]
wins[1][2][0]
wins[2][3][0]
wins[3][4][0]
wins[4][5][0]
*/
for(var k=0; k<5; k++){
wins[i+k][j+k][count] = true;
}
count++;
}
}
//所有反向斜线的赢法
for(var i=0; i<11; i++){
for(var j=14; j>3; j--){
/*
wins[14][0][0]
wins[14][1][0]
wins[14][2][0]
wins[14][3][0]
wins[14][4][0]
*/
for(var k=0; k<5; k++){
wins[i+k][j-k][count] = true;
}
count++;
}
}
console.log(count)
for(var i = 0; i < count; i++){
myWin[i] = 0;
computerWin[i] = 0;
}
context.strokeStyle = "#BFBFBF";
var logo = new Image();
logo.src = "images/chan.png"
logo.onload = function(){
context.drawImage(logo, 50, 50, 350, 350);
drawChessBoard();
}
var drawChessBoard = function(){
for(var i = 0; i < 15; i++){
//划横线
context.moveTo(15, 15 + i*30);
context.lineTo(435,15 + i*30);
//划竖线
context.moveTo(15 + i*30, 15);
context.lineTo(15 + i*30, 435);
context.stroke();
}
}
var oneStep = function(i, j, me){
context.beginPath();
context.arc(15 + i*30, 15 + j*30, 12, 0, 2 * Math.PI );
context.closePath();
var gradient = context.createRadialGradient(15 + i*30 + 2, 15 + j*30 - 2, 13, 15 + i*30 + 2, 15 + j*30 - 2, 0);
context.fillStyle = gradient;
if(me){
gradient.addColorStop(0, "#0A0A0A");
gradient.addColorStop(1, "#636766");
}else{
gradient.addColorStop(0, "#D1D1D1");
gradient.addColorStop(1, "#F9F9F9");
}
context.fill();
}
chess.onclick = function(e){
if(over){
return;
}
var x = e.offsetX;
var y = e.offsetY;
var i = Math.floor(x / 30);
var j = Math.floor(y / 30);
if(chessBoard[i][j] == 0){
oneStep(i, j, me);
if (me) {
chessBoard[i][j] = 1;
}else{
chessBoard[i][j] = 2;
}
me = !me;
for(var k=0; k<count; k++){
if(wins[i][j][k]){
myWin[k]++;
computerWin[k] = 6;
if(myWin[k] == 5){
window.alert("你赢了");
over = true;
}
}
}
}
}代码本身没有错误,之所以出现这个现象是因为到目前为止,白棋的落子也在onclick进行,这里没做特殊处理,所以白棋的落子也被统计在myWin这个赢法统计数组当中啦。所以你看看,是不是不分黑棋白棋,只要棋子连上五颗就判断成赢了呢?
在之后,白棋不会在onclick中处理,它的落子会在computerWin中统计,就不会这样啦。
老师给的不分白起黑骑就直接给黑棋加上了myWin,所以当你白棋黑棋共五个时myWin刚好加到了五,因此需要一个判断函数判断落子为黑棋还是白棋,然后再给相应的myWin和computerWin累加判断是否到五。代码如下(偷别人的):
var judgement=function(x,y,color){ //judgement函数判断游戏是否结束,color 判断落子颜色
for(var i=0;i<count;i++){
if(win[x][y][i]){ //点(x,y)处有赢法
if(color==1){ //判断落子为黑色的情况
myWin[i]++;//黑色落子累加器
if(myWin[i]==5){ //黑色落子在某种赢法中达到5个则执行以下语句
window.alert("黑子胜利!");
over=true;
}
}
if(color==2){ //判断落子为白色的情况
computerWin[i]++; //白色落子累加器
if(computerWin[i]==5){//白色落子在某种赢法中达到5个则执行以下语句
window.alert("白子胜利!");
over=true;
}
}
}
}
}
chess.onclick=function(e){
if(over){
return;
}
var x = e.offsetX;
var y = e.offsetY;
var i = Math.floor(x/30);
var j = Math.floor(y/30);
if(chessboard[i][j]==0)
{
onestep(i,j,me);
if(me){
chessboard[i][j]=1;
}
else
chessboard[i][j] = 2;
judgement(i,j,chessboard[i][j]);
me = !me;
// for(var k=0;k<count;k++){
// if(win[i][j][k]){
// myWin[k]++;
// computerWin=6;
// if(myWin[k] == 5){
// window.alert("你赢了");
// over=true;
// }
// }
// }
}
}
}
正在仔细看下咯