<!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. Mysql-左连接查询条件失效的解决办法

    on 后面不能 接and 要接where 这个条件才能判断成功 判断条件先后顺序,先判断主条件where,再判断条件on 如果是左连接on限制的就是右表,如果不为真则那一行的值为null,where限 ...

  2. ClickOnce发布注意的一些细节

    细节1.应用程序启动前检查更新: 步骤:主工程-右键属性-发布(页面)-按“更新”按钮-勾选“应用程序应该检查更新(T)”-选择“应用程序启动前(F)”,如下图: 细节二:ClickOnce发布时&q ...

  3. js操作select和option

    1.动态创建select function createSelect(){ var mySelect = document.createElement_x("select"); m ...

  4. OpenGL—Android 开机动画源码分析一

    .1 Android开机动画实现方式目前实现Android开机动画的方式主要是逐帧动画和OpenGL动画. ?逐帧动画 逐帧动画是一种常见的动画形式(Frame By Frame),其原理是在“连续的 ...

  5. ReactiveX序列——RxSwift 浅析

      ReactiveX序列——RxSwift Swift是苹果公司新推出的一门现代化的编程语言,并且将其开源出来了,Swift具有很多的优点,这也使得这门语言推出的短时间引起了很大反应的原因,在最近的 ...

  6. linux系统定时重启tomcat

    #touch auto-start.sh [root@Linux opt]# echo $LANGen_US.UTF-8 #vim auto-start.sh #!/bin/sh export LAN ...

  7. python smtplib.SMTPDataError: (554

  8. Udp发送

    string message = "0302"; byte[] sendbytes = Encoding.ASCII.GetBytes(message); remoteIpep = ...

  9. javascript预编译

    刚学前端的小白,第一次写博客,难免有点幼稚.以后每周写两次博客,慢慢积累. 笨鸟不必先飞,但一定是最后一个留下的.加油! JS的预编译定义 在一段程序执行前,js会把var和function这两个关键 ...

  10. new del 问题

    实验一: new_del_caller工程(静态库) -new_del_caller.cpp #include <new> void new_del_caller() { ]; delet ...