<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style>
????????canvas?{
????????????display:?block;
????????????margin:?50px?auto;
????????????box-shadow:?-2px?-2px?2px?#efefef,?5px?5px?5px?#999;
????????}
????</style>
</head>
<body>
<canvas?id="canvas"?width="450"?height="450"></canvas>
<script>
????var?mc?=?document.getElementById('canvas');
????var?ctx?=?mc.getContext('2d');
????var?me?=?true;
????var?chessArr?=?[];
????var?over?=?false;
????//贏法數(shù)組
?var?wins?=?[];
????//贏法的統(tǒng)計數(shù)組
?var?myWin?=?[];//人
?var?computerWin?=?[];//計算機
?for?(var?i?=?0;?i?<?15;?i++)?{
????????chessArr[i]?=?[];
????????for?(var?j?=?0;?j?<?15;?j++)?{
????????????chessArr[i][j]?=?0;
????????}
????}
????//初始化
????//初始化贏法數(shù)組
?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++)?{
????????????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--)?{
????????????for?(var?k?=?0;?k?<?5;?k++)?{
????????????????wins[i?+?k][j?-?k][count]?=?true;
????????????}
????????????count++;
????????}
????}
????console.log(wins,?count);
????for?(var?i?=?0;?i?<?count;?i++)?{
????????myWin[i]?=?0;
????????computerWin[i]?=?0;
????}
????var?logo?=?new?Image();
????logo.src?=?"img/book.jpg";
????logo.onload?=?function?()?{
????????ctx.drawImage(logo,?0,?0,?450,?450);
????????drawBoard();
????}
????//繪制棋盤
?function?drawBoard()?{
????????ctx.strokeStyle?=?'#bfbfbf';
????????for?(var?i?=?0;?i?<?15;?i++)?{
????????????ctx.moveTo(15?+?i?*?30,?15);
????????????ctx.lineTo(15?+?i?*?30,?435);
????????????ctx.moveTo(15,?i?*?30?+?15);
????????????ctx.lineTo(435,?i?*?30?+?15);
????????????ctx.stroke();
????????}
????}
????//繪制棋子
?function?drawChess(i,?j,?me)?{
????????ctx.beginPath();
????????ctx.arc(15?+?i?*?30,?15?+?j?*?30,?13,?0,?2?*?Math.PI);
????????ctx.closePath();
????????var?gradient?=?ctx.createRadialGradient(15?+?i?*?30?+?2,?15?+?j?*?30?-?2,?13,?15?+?i?*?30?+?2,?15?+?j?*?30?-?2,?0);
????????if?(me)?{
????????????gradient.addColorStop(0,?"#0a0a0a");
????????????gradient.addColorStop(1,?"#636367");
????????}?else?{
????????????gradient.addColorStop(0,?"#D1D1D1");
????????????gradient.addColorStop(1,?"#f9f9f9");
????????}
????????ctx.fillStyle?=?gradient;
????????ctx.fill();
????}
????mc.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?(chessArr[i][j]?==?0)?{
????????????drawChess(i,?j,?me);
????????????if?(me)?{
????????????????chessArr[i][j]?=?1;
????????????}?else?{
????????????????chessArr[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("you?win?!!!");
???????????????????????over?=?true;
????????????????????}
????????????????}
????????????}
????????}
????}
</script>
</body>
</html>
2019-03-27
if (chessArr[i][j] == 0) {
drawChess(i, j, me);
if (me) {
? ? chessArr[i][j] = 1;
} else {
? ? chessArr[i][j] = 2;
}
me = !me;
for (var k = 0; k < count; k++) {
? ? if (wins[i][j][k]) {
? ? if(chessArr[i][j] == 1 ){ //這個表示我方贏了 ? ? ?
???? ? ? ? ? myWin[k]++;
???? ? ? ? ? computerWin[k] = 6;
???? ? ? ? ? if (myWin[k] == 5) {
???? ? ? ? ? ? ? window.alert("you win !!!");
???? ? ? ? ? ? ?over = true;
???? ? ? ? ? }
? ? ? ? }else{
???? ????????myWin[k] = 6;
???? ? ? ? ? computerWin[k] ++ ;
???? ? ? ? ? if (computerWin[k] == 5) {
???? ? ? ? ? ? ? window.alert("計算機贏了");
???? ? ? ? ? ? ? over = true;
???? ? ? ? ? }
? ? ? ? }
? ? }
}
}
2019-03-27
你判斷一下 你的?chessArr[i][j]??值
if?(chessArr[i][j]?==?0)?{ drawChess(i,?j,?me); if?(me)?{ ????chessArr[i][j]?=?1; }?else?{ ????chessArr[i][j]?=?2; } me?=?!me; for?(var?k?=?0;?k?<?count;?k++)?{ ????if?(wins[i][j][k])?{ ???? if(chessArr[i][j]?==?1?){?//這個表示我方贏了 ???? ? ????????myWin[k]++; ????????computerWin[k]?=?6; ????????if?(myWin[k]?==?5)?{ ????????????window.alert("you?win?!!!"); ???????????over?=?true; ????????} ????????}else{ myWin[k]?=?6; ????????computerWin[k]?++?; ????????if?(computerWin[k]?==?5)?{ ????????????window.alert("計算機贏了"); ??????????? over?=?true; ????????} ????????} ????} }}