Javascript和HTML5利用canvas构建Web五子棋游戏实现算法


Posted in Javascript onJuly 17, 2013

这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战。
五子棋棋盘落子点对应的二维数组。数组的元素对应落子点。比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子;
判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的。

判断五子棋赢棋算法
下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现。
其中函数的参数xx.yy为数组下标,chess数组实现五子棋棋盘落子点的数据结构映射。
算法的思想方法是:以当前落子点对应的下标为基点,向其周围8个方向进行搜索,如果有同色子连五子,返回1,或2,否则返回0。返回1代表白棋方胜,返回2代表黑棋方胜。返回0代表没有发生赢棋数据结构状态。
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法 
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法 

<!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 
[y] != chess) { 
break; 
} 
count1++; 
} 
for (var i = x + 1; i < 15; i++) { 
if (chessData 
[y] != chess) { 
break; 
} 
count1++; 
} 
//上下判断 
for (var i = y; i >= 0; i--) { 
if (chessData[x] 
!= chess) { 
break; 
} 
count2++; 
} 
for (var i = y + 1; i < 15; i++) { 
if (chessData[x] 
!= chess) { 
break; 
} 
count2++; 
} 
//左上右下判断 
for (var i = x, j = y; i >= 0, j >= 0; i--, j--) { 
if (chessData 
[j] != chess) { 
break; 
} 
count3++; 
} 
for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) { 
if (chessData 
[j] != chess) { 
break; 
} 
count3++; 
} 
//右上左下判断 
for (var i = x, j = y; i >= 0, j < 15; i--, j++) { 
if (chessData 
[j] != chess) { 
break; 
} 
count4++; 
} 
for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) { 
if (chessData 
[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>

Javascript 相关文章推荐
实现JavaScript中继承的三种方式
Oct 16 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
js实现3D旋转效果
Aug 18 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 #Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 #Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 #Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 #Javascript
js导出格式化的excel 实例方法
Jul 17 #Javascript
js检查页面上有无重复id的实现代码
Jul 17 #Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 #Javascript
You might like
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
php截取中文字符串函数实例
2015/02/23 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
React组件的三种写法总结
2017/01/12 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
sublime python3 输入换行不结束的方法
2018/04/19 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
Python中的元组介绍
2019/01/28 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
Python 爬虫的原理
2020/07/30 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
公务员的自我鉴定
2013/10/26 职场文书
投标承诺书怎么写
2014/05/24 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL