<!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. http請求瀏覽器的緩存機制

    轉載自:http://kb.cnblogs.com/page/73901/ 流程 当资源第一次被访问的时候,HTTP头部如下 (Request-Line) GET /a.html HTTP/1.1 H ...

  2. 【java】基础中的杂乱总结（二）

    1 内部类进阶 package package8; //原则:先用内部类写 之后由于内部类匿名无法引用 用其继承的父类或实现的接口名 //再复写所有的抽象方法即可(是所有,否者还是抽象的,无法创建对象 ...

  3. Hibernate 系列教程12-继承-Join策略

    Employee public class Employee { private Long id; private String name; HourlyEmployee public class H ...

  4. php 图片压缩处理

    <?php require dirname(__FILE__).'/../includes/common.inc.php'; $_clean = array(); $_info = array( ...

  5. pipe的实现

    本文进行了详细的描述,http://blog.csdn.net/zhouhong1026/article/details/8151235

  6. linux 显示文件或文件夹

    用 -v 很简单呀! 显示文件 ls -l | grep -v '^d'显示目录 ls -l | grep '^d'

  7. publish over ssh

    http://stackoverflow.com/questions/22158092/jenkins-transferring-0-files-using-publish-over-ssh-plug ...

  8. Android真机连接手机Target显示unknown cmd命令下adb devices 显示offline

    主要原因是adb版本的问题: 1.找到adb.exe路径  比如:G:\BaiduYunDownload\Android\android-sdk\platform-tools,将该路径放到环境便利-- ...

  9. Windows API 之 CreateFile、CreateFileMapping 、MapViewOfFile

    CreateFile Creates or opens a file or I/O device. The most commonly used I/O devices are as follows: ...

  10. Installation error: INSTALL_FAILED_UID_CHANGED 的解决办法

    出现此问题的原因大多是apk冲突造成,解决的办法如下: 1.  Settings -> Applications, 卸载出现问题的apk,重新安装即可. 2. 如果apk无法卸载,则将apk相关 ...