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 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
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
德生1994机评
2021/03/02 无线电
ThinkPHP之A方法实例讲解
2014/06/20 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
移动端js图片查看器
2016/11/17 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
Mac下安装vue
2018/04/11 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
Python制作CSDN免积分下载器
2015/03/10 Python
Python正则表达式使用经典实例
2016/06/21 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
乡镇四风对照检查材料
2014/08/31 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
2014年建筑工作总结
2014/11/26 职场文书
优秀教师事迹材料
2014/12/15 职场文书
学生保证书
2015/01/16 职场文书
六年级作文之自救
2019/12/19 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电