Macro Da

每天学一点,成长多一点!

简单的H5游戏,“井字游戏”。

前两天用canvas画了个“井字游戏”棋盘,基于这个制作了井字游戏功能,游戏功能较为简单,纯属练习。

演示地址:https://www.xueyidian.cn/demo/%E4%BA%95%E5%AD%97%E6%B8%B8%E6%88%8F.html

源码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>井字游戏</title>
<style>
	body{padding: 0;margin: 0;}	
	#well{float: left; cursor: pointer;}
	.tip{margin: 80px 0 0 40px;float: left; width: 490px;}
	.tip p{line-height: 30px;}
	.red{color: #cd192e;}
	.blue{color: #1943cd;}
	.fz30{font-size: 30px; vertical-align: top;}
	.state{display: block; clear: both; margin: 20px 0 0 120px;}
</style>
</head>
<body>
<canvas id="well" width="400" height="400" onClick="startWell()"></canvas>
<div class="tip">
	<h1>井字游戏</h1>
	<p><span class="red">红方</span>和<span class="blue">蓝方</span>轮流下棋子(<span class="red">红方</span>先下),点击方格下棋,一方连成一排获胜,刷新可重新开始。</p>
	<p><span class="red">红:<span class="fz30">×</span></span></p>
	<p><span class="blue">蓝:<span class="fz30">○</span></span></p>
</div>
<div class="state">当前状态:<span id="st">轮到<span id="state" class="red">红方</span>下棋</span></div>
<script>
	var well = document.getElementById("well");
	var wlc = well.getContext("2d");
	var bw = 3;            //线的宽度
	var m = 80;            //棋盘的外边距
	var w = 300;           //棋盘宽度
	var h = w;             //棋盘高度,与宽度保持一致
	var p = w * 0.07;      //网格的内边距
	var r = w / 3 / 2 - p; //圆棋子的半径
	var state = true;      //true为红方先行,falsh则为蓝方
	var s = document.getElementById("state");
	var st = document.getElementById("st");
	var red = new Array(); //记录红方下棋
	var blue = new Array();//记录蓝方下棋
	var result = 0;            //游戏结果 0为在游戏中,1为红方赢,2为蓝方赢,3位平局
	var win = new Array(   //胜利条件
		new Array(0,1,2),
		new Array(3,4,5),
		new Array(6,7,8),
		new Array(0,3,6),
		new Array(1,4,7),
		new Array(2,5,8),
		new Array(0,4,8),
		new Array(2,4,6)
	);
	
	
	function chessboard(wlc){
		//画外部线框
		wlc.lineWidth = bw;
		wlc.strokeRect(m, m, w, h);

		//开始画网格
		wlc.beginPath();
		//画第一列线
		wlc.moveTo(m + w * 1 / 3, m);
		wlc.lineTo(m + w * 1 / 3, m + h);
		//画第二列线
		wlc.moveTo(m + w * 2 / 3, m);
		wlc.lineTo(m + w * 2 / 3, m + h);
		//画第一行线
		wlc.moveTo(m, m + h * 1 / 3);
		wlc.lineTo(m + w, m + h * 1 / 3);
		//画第二行线
		wlc.moveTo(m, m + h * 2 / 3);
		wlc.lineTo(m + w, m + h * 2 / 3);

		wlc.stroke();
	}
	
	
	function xPiece(wlc, path){
		
		var shang = parseInt(path / 3);  //判断Y轴位置   1
		var yu = path % 3;               //判断X轴位置   0
		
		var m1xS = m + w / 3 * yu + p;              //第一条斜线的开始点X轴
		var m1yS = m + h / 3 * shang + p;           //第一条斜线的开始点Y轴
		var m1xE = m + w / 3 * yu + p + r * 2;      //第一条斜线的结束点X轴
		var m1yE = m + h / 3 * shang + p + r * 2;   //第一条斜线的结束点Y轴
		
		var m2xS = m + w / 3 * yu + p + r * 2;      //第二条斜线的开始点X轴
		var m2yS = m + h / 3 * shang + p;           //第二条斜线的开始点Y轴
		var m2xE = m + w / 3 * yu + p;              //第二条斜线的结束点X轴
		var m2yE = m + h / 3 * shang + p + r * 2;   //第二条斜线的结束点Y轴
		
		//开始画叉
		wlc.beginPath();
		wlc.strokeStyle = "#cd192e";
		wlc.moveTo(m1xS, m1yS);
		wlc.lineTo(m1xE, m1yE);
		wlc.moveTo(m2xS, m2yS);
		wlc.lineTo(m2xE, m2yE);

		wlc.stroke();
	}
	
	function roundPiece(wlc, path){
		var shang = parseInt(path / 3);  //判断Y轴位置   1
		var yu = path % 3;               //判断X轴位置   0
		var x = m + w / 3 * yu + w / 6;      //计算X轴
		var y = m + h / 3 * shang + h / 6;   //计算Y轴
		
		wlc.beginPath();
		wlc.strokeStyle = "#1943cd";
		wlc.arc(x, y, r, 0, 2 * Math.PI);
		wlc.stroke();
	}
	
	chessboard(wlc);   //画棋盘
	
	function drawWell(){
		
//		xPiece(wlc,1);        //画叉棋子
//		xPiece(wlc,6);        //画叉棋子
//		xPiece(wlc,4);        //画叉棋子
//		xPiece(wlc,8);        //画叉棋子
//		
//		roundPiece(wlc, 0);   //画圆棋子
//		roundPiece(wlc, 2);   //画圆棋子
//		roundPiece(wlc, 3);   //画圆棋子
//		roundPiece(wlc, 5);   //画圆棋子
//		roundPiece(wlc, 7);   //画圆棋子
		
	}
	
	function startWell(){
		
		//标准的获取鼠标点击相对于canvas画布的坐标公式
		var box = well.getBoundingClientRect();
		var x = (event.clientX + (-box.left)) * well.width / box.width - m;
		var y = (event.clientY + (-box.top)) * well.height / box.height - m;
		
		var xIndex = parseInt(x / (w / 3));
		var yIndex = parseInt(y / (h / 3));
		var index = xIndex + yIndex * 3;
		
		
		if(x < w && y < w && result == 0){
			if(red.indexOf(index) == -1 && blue.indexOf(index) == -1){
				if(state){
					xPiece(wlc, index);
					red.push(index);
					red.sort();
					s.innerHTML = "蓝方";
					s.className = "blue";
					state = false;
				}else{
					roundPiece(wlc, index);
					blue.push(index);
					blue.sort();
					s.innerHTML = "红方";
					s.className = "red";
					state = true;
				}
				for(var i = 0,len = win.length; i < len; i++){
					if(red.toString().indexOf(win[i].toString()) != -1){
						alert('红方赢');
						st.innerHTML = "红方赢";
						result = 1;
						break;
					}else if(blue.toString().indexOf(win[i].toString()) != -1){
						alert('蓝方赢');
						st.innerHTML = "蓝方赢";
						result = 2;
						break;
					}else if(red.length + blue.length == 9){
						alert('平局');
						st.innerHTML = "平局";
						result = 3;
						break;
					}
				}
			}
		}
		
		
		
		
		//console.log(red.length);
		//console.log(blue);
	}
	
	
</script>
</body>
</html>

 

点赞
  1. shiyou说道:

    楼主可以做出类似https://www.shiyouhome.com这个网站的游戏吗?可以的话,咱们可以合作。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注