<!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. sql server多行数据(一列)转换成一个字段

    create table #test ( id int not null, memeo int not null ) ,) ,) ,) )) ,,'') drop table #test 总结: 格式 ...

  2. 怎样将MySQL数据库上传到服务器

    首先,需要将本地的数据库导出来,作为一个数据文件,以备稍后上传到服务器用,在本地登陆phpmyadmin控制面板: 登陆成功后,在左侧选择需要操作的数据库: 选择后,页面会自动刷新,然后再在右边点击[ ...

  3. asm: Writing Inline Assembly

    A usual IA includes these parts: asm [volatile] ( AssemblerTemplate : OutputOperands [ : InputOperan ...

  4. iOS 常用代码块

    1.判断邮箱格式是否正确的代码: // 利用正则表达式验证 -( BOOL )isValidateEmail:( NSString  *)email {   NSString  *emailRegex ...

  5. sql高级篇（一）

    1.select top mysql中: select * from persons limit 5; 相当于oracle中的: select * from persons <=5; 在翻页中经 ...

  6. Objective-C相关Category的收集

    Objective-C相关Category的收集 Categories是给你得不到源码的classes增加功能的一种方法.这个页面收集一些相关的Category,并且持续更新,你可以订阅关注.作者是F ...

  7. CentOS添加字体

    到Windows XP或者Vista下复制字体到CentOS 1.到Windows XP或者Vista下复制字体到CentOS 雅黑:msyh 黑体:SimHei 宋体:SimSun 华文细黑:STX ...

  8. java集合框架list和set

    为什么出现集合类? 面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,就对对象进行存储,集合就是存储对象最常用的一中方式 数组和集合类同是容器,有何不同? 数组虽然也可以存储对象 ...

  9. C# 经典入门12章-System.Collections.Generic命名空间

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtUAAAAsCAIAAAAl09PEAAAgAElEQVR4nOx95Vscyd7285cMPrg7Aw ...

  10. UIImageView动画

    NSMutableArray *arrM = [NSMutableArray array]; // 2.加载所有图片 ; i <= ; i++) { NSString *imageName = ...