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 原型继承
Dec 26 Javascript
在新窗口打开超链接的方法小结
Apr 14 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
JavaScript中函数(Function)的apply与call理解
Jul 08 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 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
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
一个php作的文本留言本的例子(二)
2006/10/09 PHP
.htaccess文件保护实例讲解
2011/02/06 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
Javascript模板技术
2007/04/27 Javascript
jquery 指南/入门基础
2007/11/30 Javascript
Cookie 小记
2010/04/01 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
python去掉字符串中重复字符的方法
2014/02/27 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
JAVA和C++的区别
2013/10/06 面试题
收银员的岗位职责范本
2014/02/04 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
react中props 的使用及进行限制的方法
2021/04/28 Javascript