<!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. EL(表达式语言）

    EL(Expression Language):目的是为了简化Jsp页面的语言,使页面看起来更加简洁 基本的语法特点 以“${"开头,以”}“结束 一 与低版本的环境兼容----禁用EL ( ...

  2. ios开发使用lipo命令合并真机库和模拟器库

    在开发ios时,我们经常会遇到编译两套库文件,使用模拟器时链接模拟器库,使用真机时使用真机库,这样操作会对后期的维护带来麻烦,所以Apple提供了一个把多个不同平台的.a库文件合并成一个适用于多平台的 ...

  3. python2.x 使用protobuf

    1.在windows下配置protobuf 1.1 下载对应的包,包含两个:protoc.exe和源码文件(protoc也可以自己生成) 下载地址1 --- google code最近在迁移,也许以后 ...

  4. 优化eclipse

    1.取消自动validation windows–>perferences–>validation 除开Manual下面的复选框全部选中之外,其他全部不选 如需验证,在要验证的文件上,单击 ...

  5. servlet & javabean

    1.servelet 什么是Servlet?① Servlet就是JAVA 类② Servlet是一个继承HttpServlet类的类③这个在服务器端运行,用以处理客户端的请求 Servlet相关包的 ...

  6. dedecms 标签的基本用法

    1.关键描述调用标签: <meta name="keywords" content="{:fieldname='keywords'/}"> < ...

  7. tab奇偶行颜色交替+插件

    (function($){ $.fn.tableUI=function(options){ var defaults={ evenRowclass:"evenRow", oddro ...

  8. ==与equals()方法的不同

    ==比较分为两种情况:基本数据类型比较与引用数据类型比较 1.基本数据类型,根据基本数据类型的值是否相等来判断,相等则返回true,不相等则返回false.两端数据类型可以不同,如果转换后的数值相等, ...

  9. c语言scanf详解

    函数名: scanf 功 能: 执行格式化输入 用 法: int scanf(char *format[,argument,...]);scanf()函数是通用终端格式化输入函数,它从标准输入设备(键 ...

  10. Windows应用程序要点

    一个完整的Windows应用程序除了WinMain函数外,还包含用于处理用户动作和窗口消息的窗口函数.  Windows应用程序具有的一些特性: 消息驱动机制 图形设备接口(GDI) 基于资源的程序设 ...