<!doctype html>

<html>

<head>

	<meta charset="utf-8">

	<title>五子棋</title>

	<style type="text/css">

	*{

		margin: 0px;

		padding: 0px;

	}

	canvas{

		background: url(images/bg.jpg);

	}

	canvas:hover{

		cursor: pointer;

	}

	</style>

</head>

<body>

	<canvas width="800" height="800" id="canvas"></canvas>

	<script type="text/javascript">

	//初始化

	var canvas = document.getElementById('canvas');

	var context = canvas.getContext('2d');

	var flag = 1;

	//定义二维数组

	var data = new Array();

	for(var i=1; i<16; i++){

		data[i] = new Array();

		for(var j=1; j<16; j++){

			data[i][j] = 0;

		}

	}

	window.onload = function() {

		// 1.绘制网格

		drawGrid();

		// 2.绘制棋子

		drawPiece();

	}

	function drawGrid() {

		for(var i=1; i<16; i++){

			context.beginPath();

			context.moveTo(50, 50*i);

			context.lineTo(750, 50*i);

			context.closePath();

			context.stroke();

		}

		for(var i=1; i<16; i++){

			context.beginPath();

			context.moveTo(50*i, 50);

			context.lineTo(50*i, 750);

			context.closePath();

			context.stroke();

		}

	}

	function drawPiece() {

		canvas.onclick = function(){

			var x = Math.round(event.clientX/50);

			var y = Math.round(event.clientY/50);

			if(data[x][y] !=0){

				alert("棋子不能重复"); return false;

			}

			if(flag == 1){

				data[x][y] = 1;

				context.fillStyle = "#000";

				context.beginPath();

				context.arc((x*50), (y*50), 20, 0*Math.PI, 2*Math.PI, false);

				context.closePath();

				context.fill();

				bunko(x, y, flag);

				flag = 2;

			}else{

				data[x][y] = 2;

				context.fillStyle = "#fff";

				context.beginPath();

				context.arc((x*50), (y*50), 20, 0*Math.PI, 2*Math.PI, false);

				context.closePath();

				context.fill();

				bunko(x, y, flag);

				flag = 1;

			}

		}

		function bunko(x, y, flag) {

			var count1 = 0;

			var count2 = 0;

			var count3 = 0;

			var count4 = 0;

			/* 1.水平方向判断 */

			//向左判断

			for(var n=x; n>0; n--){

				if(data[n][y] != flag){

					break;

				}

				count1 = count1+1;

			}

			//向右判断	x+1 表示在水平方向上判断时不包含当前棋子本身

			for(var n=x+1; n<16; n++){

				if(data[n][y] != flag){

					break;

				}

				count1 = count1+1;

			}

			/* 2.垂直方向判断 */

			//向上判断

			for(var n=y; n>0; n--){

				if(data[x][n] != flag){

					break;

				}

				count2 = count2+1;

			}

			//向下判断 y+1 表示在垂直方向上判断时不包含当前棋子本身

			for(var n=y+1; n<16; n++){

				if(data[x][n] != flag){

					break;

				}

				count2 = count2+1;

			}

			/* 3.斜对角（右下左上方向）*/

			//右下左上

			for(var n=x, m=y; n>1 && m>1; n--, m--){

				if(data[n][m] != flag){

					break;

				}

				count3 = count3+1;

			}

			for(var n=x+1, m=y+1; n<16 && m<16; n++, m++){

				if(data[n][m] != flag){

					break;

				}

				count3 = count3+1;

			}

			for(var n=x, m=y; n<16 && m>1; n++, m--){

				if(data[n][m] != flag){

					break;

				}

				count4 = count4+1;

			}

			for(var n=x-1, m=y+1; n>0 && m<16; n--, m++){

				if(data[n][m] != flag){

					break;

				}

				count4 = count4+1;

			}

			if(count1>=5 || count2>=5 || count3>=5 || count4>=5){

				if(flag == 1){

					alert("黑棋赢了！");

					return false;

				}else{

					alert("白起赢了！");

				}

			}

		}

	}

	</script>

</body>

</html>

　　

html5 canvas 五子棋游戏的更多相关文章

  1. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  2. HTML5 Canvas小游戏基础：用户交互

    交互是游戏的根本.缺少了用户交互,游戏就不能称之为游戏,只能说是动画或电影.事件是浏览器响应用户交互操作的一种机制. 1．事件和事件执行 事件定义了用户与页面交互时产生的各种操作(主要通过鼠标或热键的 ...

  3. Html5 Canvas斗地主游戏

    过完年来公司,没什么事,主管说研究下html5 游戏,然后主管就给了一个斗地主的demo,随后我就开始看代码, 现在我看了html5以及canvas相关知识和斗地主的demo后,自己用demo上的素材 ...

  4. 开源HTML5 Canvas游戏Runtime发布

    Cantk-Runtime是通用的HTML5 Canvas 2D游戏引擎运行库,让HTML5游戏的性能飞起来.Cantk-Runtime以PhoneGap插件的方式提供,从此结束PhoneGap低性能 ...

  5. 怎样用HTML5 Canvas制作一个简单的游戏

    原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...

  6. [译]怎样用HTML5 Canvas制作一个简单的游戏

    这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...

  7. 两个Canvas小游戏

    或许连小游戏都算不上,可以叫做mini游戏. 没有任何框架或者稍微有点深度的东西,所以有js基础的或者要追求炫酷效果的可以直接ctrl+w了. 先贴出两个游戏的试玩地址: 是男人就走30步 是男人就忍 ...

  8. 自己写的HTML5 Canvas + Javascript五子棋

    看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...

  9. html5 canvas简易版捕鱼达人游戏源码

    插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...

随机推荐

  1. php秒杀

    我们知道数据库处理sql是一条条处理的,假设购买商品的流程是这样的: sql1:查询商品库存 ? 1 2 3 4 5 if(库存数量 > 0) {   //生成订单...   sql2:库存-1 ...

  2. php 后台权限例子 （mysql 数据表）

    说明   超级管理员的权限最高   可以操作所有的功能   !!!      超级管理员给特定的用户分配对应的权限 下文注解:   用户表 关联 用户组表  每个用户组对应特定的功能权限    !! ...

  3. Theos tweak MSHookFunction

    #import "substrate.h" static FILE * (*s_orig_fopen) ( const char * filename, const char * ...

  4. 数据格式处理（数字，日期），java处理，jsp的fmt处理

    java 格式处理  public static String formatTosepara(float data) {DecimalFormat df = new DecimalFormat(&qu ...

  5. Sublime Text 3 安装使用

    机器比较老,运行Pycharm等卡死,所以选择Sublime,非常流畅. 安装 版本3103 官网下载安装 注册码: —– BEGIN LICENSE —–Nicolas HennionSingle ...

  6. Oracle Sql优化之Merge 改写优化Update

    1.待改写语句如下 update table1 f )),) ,),)), f.jine2 )),) from table2 e where e.kjqj=f.kjqj=e.gs=f.gs and e ...

  7. 十二月总结-and-2016年终总结

    回顾 今天是2016的最后一天了,所以今天来做一个年终总结是最好不过的了.各种期末考试随着而来,也就意味着在工大的第一个学期马上结束了.回顾一下这一年所获得或者失去的一些东西: 2月份在家焦虑的等待着 ...

  8. 利用未文档化API：RtlGetNtVersionNumbers 获取系统版本号

    问题一:Windows SDK 8.1版本中的VersionHelper.h文件当中没有IsWindows10ORGreater,所以当你用IsWindows8Point1ORGreater判断出版本 ...

  9. L7,too late

    words: parcel,包裹 detective,侦探 expect,期待 airfield,飞机起落的场地 guard,警戒,守卫,n precious,adj,珍贵的 stone,石头 exp ...

  10. hdu_5555_Immortality of Frog(状压DP)

    题目连接:hdu_5555_Immortality of Frog 题意: 给你一个NxN的网格,第N行的每一列都有个青蛙,这些青蛙只会往上走,上帝会在每个膜中放一个长生不老的药,一共有N个膜,每个膜 ...