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的parseInt 进制问题
May 07 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
js如何获取网页所有图片
May 12 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
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
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
2017/11/07 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
代理班主任的自我评价
2014/02/04 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
支部鉴定材料
2014/06/02 职场文书
优秀毕业生求职信
2014/06/05 职场文书
创优争先心得体会
2014/09/11 职场文书
七一建党节演讲稿
2014/09/11 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
如何理解python接口自动化之logging日志模块
2021/06/15 Python
英镑符号 £
2022/02/17 杂记
SQL Server一个字符串拆分多行显示或者多行数据合并成一个字符串
2022/05/25 SQL Server