//有一定基礎的人才能看得懂
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>改進五子棋</title>
<style type="text/css">
body{
background:#6b6b6b;
}
#canvas{
display:block;
margin:20px auto;
background:white;
}
#box{
position:absolute;
left:100px;
top:200px;
}
</style>
</head>
<body>
<canvas id="canvas" width="450px" height="450px"></canvas>
<script type="text/javascript">
//定義屬性
var map=[];
var step=0;
var canvas=document.querySelector("#canvas");
var context=canvas.getContext("2d");
var color=["black","white"];
//map初始化
function init(){
context.strokeStyle="black";
step=0;
context.strokeStyle="black";
for(var i=0;i<14;i++){
map[i]=[];
for(var j=0;j<14;j++){
map[i][j]=0;
}
}
}
//划線
function drawLine()
{
for(var i=1;i<15;i++){
context.moveTo(30*i,30);
context.lineTo(30*i,420);
context.moveTo(30,30*i);
context.lineTo(420,30*i);
}
context.stroke();
}
drawLine();
//畫棋子
function drawChess(x,y,color){
context.beginPath();
context.fillStyle=color;
context.arc(x,y,15,0,Math.PI*2);
context.fill();
context.stroke();
}
//判斷勝負
/*先判斷一條線上的連續顏色>=5 包括左邊和右邊
1.當x+i<0 跳出循環 從當前位置向左判斷
2.從當前位置向左判斷
3.右邊顏色一樣才num++
4.顏色一樣才num++
5.當 x-i<0 跳出循環
6.返回num
7.從當前位置向右判斷
8.直線判斷結束
9 其他同理 不過是 邊界問題
*/
function vectory(x,y,color)
{
var num=0;
var result=0;//記錄滿足條件的棋子數
//左右判斷
var lightRight=right(x,y,color,num);//返回右邊同色的個數
lightRight+=left(x,y,color,num);//加上左邊同色的個數
//上下判斷
var upDown=up(x,y,color,num);
upDown+=down(x,y,color,num);
//左下右上
var leftDownToRightUp=leftDown(x,y,color,num);
leftDownToRightUp+=rightUp(x,y,color,num);
//左上右下
var leftUpToRightDwon=leftUp(x,y,color,num);
leftUpToRightDwon+=rightDown(x,y,color,num);
if(lightRight>=4 || upDown>=4 ||leftDownToRightUp>=4|| leftUpToRightDwon>=4)
{
alert(color+"方勝利");
location.reload(true);//刷新頁面
}
}
//向右邊判斷
function right(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(x+i>13){ //判斷邊界問題 不到邊界就可以一直判斷
break;
}
else{
if(map[x+i][y]==color)
{
num++;
}
else{
break;
}
}
}
return num;//返回一行右邊同色的個數
}
//向左邊判斷
function left(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(x-i<0){ //判斷邊界問題 不到邊界就可以一直判斷
break;
}
else{
if(map[x-i][y]==color)
{
num++;
}
else{
break;
}
}
}
return num;//返回一行左邊同色的個數
}
//向上判斷
function up(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(y-i<0){ //判斷邊界問題 不到邊界就可以一直判斷
break;
}
else{
if(map[x][y-i]==color)
{
num++;
}
else{
break;
}
}
}
return num;//返回一行右邊同色的個數
}
//向下判斷
function down(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(y+i>13){ //判斷邊界問題 不到邊界就可以一直判斷
break;
}
else{
if(map[x][y+i]==color)
{
num++;
}
else{
break;
}
}
}
return num;//返回一行右邊同色的個數
}
//左下判斷
function leftDown(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(x-i<0){ //判斷邊界問題 不到邊界就可以一直判斷
break;
}
else if(y+i>13){
break;
}
else{
if(map[x-i][y+i]==color)
{
num++;
}
else{
break;
}
}
}
return num;//返回一行右邊同色的個數
}
//右上判斷
function rightUp(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(y-i<0){ //判斷邊界問題 不到邊界就可以一直判斷
break;
}
else if(x+i>13){
break;
}
else{
if(map[x+i][y-i]==color)
{
num++;
}
else{
break;
}
}
}
return num;//返回一行右邊同色的個數
}
//左上判斷
function leftUp(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(x-i<0){ //判斷邊界問題 不到邊界就可以一直判斷
break;
}
else if(y-i<0){
break;
}
else{
if(map[x-i][y-i]==color)
{
num++;
}
else{
break;
}
}
}
return num;//返回一行右邊同色的個數
}
//右下判斷
function rightDown(x,y,color,num)
{
for(var i=1;i<5;i++)
{
if(x+i>13){ //判斷邊界問題 不到邊界就可以一直判斷
break;
}
else if(y+i>13){
break;
}
else{
if(map[x+i][y+i]==color)
{
num++;
}
else{
break;
}
}
}
return num;//返回一行右邊同色的個數
}
//canvas下棋監聽器
canvas.addEventListener("click",function(e){
var dx=Math.round(e.offsetX/30)*30;//瞄准位置 只能在(30*x,30*y)位置上
var dy=Math.round(e.offsetY/30)*30;//瞄准位置
var reX=(dx/30)-1;//通過坐標位置映射棋盤數組中的位置
var reY=(dy/30)-1;
console.log(reX+','+reY);
if(dx==0||dx==450||dy==0||dy==450){
return;
}
if(map[reX][reY]==0){
drawChess(dx,dy,color[step%2]);
map[reX][reY]=color[step%2];
vectory(reX,reY,color[step%2]);
step++;
console.log(map);
}
});
init();
</script>
</body>
</html>