纯js实现五子棋

最新推荐文章于 2024-06-27 10:26:13 发布

a514548454

最新推荐文章于 2024-06-27 10:26:13 发布

阅读量788

点赞数

jsp 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

jquery

10 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<script type="text/javascript" src="<%=basePath %>JS/jquery-1.9.0.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
  margin: 10px;
}
</style>
<script type="text/javascript">
var canvas;
var context;
var isWhite = true;//设置是否该轮到白棋
var isWell = false;//设置该局棋盘是否赢了，如果赢了就不能再走了
var img_b = new Image();
img_b.src = "images/b.png";//白棋图片
var img_w = new Image();
img_w.src = "images/w.png";//黑棋图片
var chessData = new Array(15);//这个为棋盘的二维数组用来保存棋盘信息，初始化0为没有走过的，1为白棋走的，2为黑棋走的
for (var x = 0; x < 15; x++) {
chessData[x] = new Array(15);
for (var y = 0; y < 15; y++) {
   chessData[x][y] = 0;
   }
}
function drawRect() {//页面加载完毕调用函数，初始化棋盘
  canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");
  for (var i = 0; i <= 640; i += 40) {//绘制棋盘的线
   context.beginPath();
   context.moveTo(0, i);
   context.lineTo(640, i);
   context.closePath();
   context.stroke();
   context.beginPath();
   context.moveTo(i, 0);
   context.lineTo(i, 640);
   context.closePath();
   context.stroke();
  }
}
function play(e) {//鼠标点击时发生
  var x = parseInt((e.clientX - 20) / 40);//计算鼠标点击的区域，如果点击了（65，65），那么就是点击了（1，1）的位置
  var y = parseInt((e.clientY - 20) / 40);
  if (chessData[x][y] != 0) {//判断该位置是否被下过了
    alert("你不能在这个位置下棋");
   return;
   }
   if (isWhite) {
    isWhite = false;
     drawChess(1, x, y);

       }
      else {
          isWhite = true;
          drawChess(2, x, y);
      }
}
function drawChess(chess, x, y) {//参数为，棋（1为白棋，2为黑棋），数组位置
  if (isWell == true) {
   alert("已经结束了，如果需要重新玩，请刷新");
   return;
  }
  if (x >= 0 && x < 15 && y >= 0 && y < 15) {
   if (chess == 1) {
    context.drawImage(img_w, x * 40 + 20, y * 40 + 20);//绘制白棋
     chessData[x][y] = 1;
     }
    else {
     context.drawImage(img_b, x * 40 + 20, y * 40 + 20);
     chessData[x][y] = 2;
    }
    judge(x, y, chess);
  }
}
function judge(x, y, chess) {//判断该局棋盘是否赢了
  var count1 = 0;
  var count2 = 0;
  var count3 = 0;
  var count4 = 0;               //左右判断
  for (var i = x; i >= 0; i--) {
   if (chessData[i][y] != chess) {
    break;
    }
   count1++;
   }
  for (var i = x + 1; i < 15; i++) {
   if (chessData[i][y] != chess) {
    break;
    }
   count1++;
   }
  //上下判断
  for (var i = y; i >= 0; i--) {
   if (chessData[x][i] != chess) {
    break;
    }
   count2++;
   }
  for (var i = y + 1; i < 15; i++) {
   if (chessData[x][i] != chess) {
    break;
    }
   count2++;
   }
  //左上右下判断
  for (var i = x, j = y; i >= 0, j >= 0; i--, j--) {
   if (chessData[i][j] != chess) {
    break;
    }
   count3++;
   }
  for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) {
   if (chessData[i][j] != chess) {
     break;
     }
    count3++;
    }
  //右上左下判断
  for (var i = x, j = y; i >= 0, j < 15; i--, j++) {
   if (chessData[i][j] != chess) {
    break;
    }
   count4++;
   }
  for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) {
   if (chessData[i][j] != chess) {
     break;
     }
    count4++;
    }
  if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) {
   if (chess == 1) {
    alert("白棋赢了");
    }
   else {
    alert("黑棋赢了");
    }
   isWell = true;//设置该局棋盘已经赢了，不可以再走了
  }
}
</script>
</head>
<body οnlοad="drawRect()">
<div>
<canvas width="640" id="canvas" οnmοusedοwn="play(event)" height="640">
你的浏览器不支持HTML5 canvas ，请使用 google chrome 浏览器打开.
</canvas>
</div>
</body>
</html>

a514548454

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯js实现五子棋

String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>JS/jquery-1.9.0.min.js">http://www.w3.org/TR/x
复制链接

扫一扫

专栏目录