解决方案 »
- 向各位大鸟请教个SpringMVC加Hibernate的onetomany的问题
- 帮帮新手,谢谢,启动tomcat的startup.bat报2个错,信息如下帮我分析下到底问题出在了哪里,谢谢了!
- WEB-INF文件夹下文件的访问!
- 求救救救。。
- 我想回传type="checkbox"类型的已打勾的选项到javabean中,我该如何做,JSP方法我知道,但不用jsp
- 求助:那位朋友有java servlets2.3 编程指南的随书代码啊?
- 怎样将数组合并成字符串?
- HELP~~~~~ 一个简单的问题 ,高手请速回答,100马上送上
- jsp开发环境配置问题,在线等.....
- 关于在jsp页面中生成.csv文件的文件名问题
- 求大神指教。为什么不能算出购物车结果
- [源码]医药管理系统中英文版本
还有 HTML5 的 js 有画布了
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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 onload="drawRect()">
<div>
<canvas width="640" id="canvas" onmousedown="play(event)" height="640">你的浏览器不支持HTML5 canvas ,请使用 google chrome 浏览器 打开.
</canvas>
</div></body>
</html>由于公司网限制,图片上传不了。
代码可以直接运行,只需要找两张棋子的图片,黑棋b.png 白棋w.png
高手。。现在 js刚刚学会了你这种写法。但是还是不熟悉能推荐几本书,或者 资料什么的 学习学习,然后 在试试写东西我刚试了试你这算法 是怎么实现的怎么我赢不了他(本来就下的不好。。)
不知道是哪位高手写的 用的 jquery 、其实最好学下js的基础知识、、、、、、培训过一次貌似跟java差不错的形式 但也有差别