我的第一次h5 五子棋游戏作品

最新推荐文章于 2023-07-04 08:25:15 发布

apzmqapzmqa

最新推荐文章于 2023-07-04 08:25:15 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/apzmqapzmqa/article/details/74231467

版权

在这个漫长的暑假，我开始了实训，在指导老师的带领下，我们学习了html5来做五子棋，对于我这个初学者来说，虽然课程困难，但是在我们的查阅资料和认真听讲下还是把问题挨着解决掉了。

五子棋的算法很高深，棋盘的设计就很不好做。下面贴上我的代码，虽然还不能进行游戏，但是现在已经可以下棋了，只差制定游戏规则。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>五子棋游戏</title>
	</head>
	<body>
		<canvas id="myCanvas" width="570" height="570" style="border: 2px solid #000000"></canvas>
		<!--
        	作者：apzmqapzmqa
        	时间：2017-07-03
        	描述：使用js来控制游戏逻辑
        -->
        <script type="text/javascript">
        	//获取canvas的标签
        	var ChessCanvas = document.getElementById("myCanvas");
        	//获取画布
        	var gameCanvas = ChessCanvas.getContext("2d");
        	//定义棋盘大小
        	var map = 25;
        	//棋子大小
        	var chessSize = 23;
        	//下棋的坐标
        	var x = y = 0;
        	//棋子的颜色
        	var isRed = true;//==true的该下红旗，否则下黑棋
        	var color = "#FF0000";
        	
        	//棋子数组 二维数组
        	//保存所下棋子 0：未下 1：下红棋 2：下黑棋
        	var chessData = new Array(23);
        	for(var i=0;i<23;i++)
        	{
        		chessData[i] = new Array(23);
        		for(var j=0;j<23;j++)
        		{
        			chessData[i][j] = 0;
        		}
        	}
        	//所下棋子的位置
        	
        	var i,j;
        	//绘制棋盘
        	for(var i=0;i<23;i++)
        	{
        		//画横线
        		gameCanvas.moveTo(10,i*map+10);
        		gameCanvas.lineTo(560,i*map+10);
        		gameCanvas.moveTo(10+i*map,10);
        		gameCanvas.lineTo(10+i*map,560);
        		gameCanvas.stroke();//画
        	}
        	//创建函数，完成下棋
        	function addChess(x,y)
        	{
        		//下棋 画小圆圈 角度转弧度 π/180*角度  弧度变角度180/π*弧度
        		gameCanvas.beginPath();
        		gameCanvas.arc(x,y,chessSize/2,0*Math.PI,2*Math.PI,true);
        		gameCanvas.fillStyle = color;
        		gameCanvas.fill();
        		gameCanvas.closePath();//结束
        		
        		if(color == "#000000")
        		{
        			color = "#FF0000";
        			//黑棋
        			chessData[i][j] = 2;
        			
        		}else{
        			color = "#000000";
        			//红棋
        			chessData[i][j] = 1;
        			
        		}
        	}
        	//重复调用 在做坦克大战之类的游戏 需要使用。。。
        	//window.setInterval(函数,时间);
        	
        	//游戏是否结束
        	//function isFameWin()
        	
        	//如果是人机对战版，则需要下棋的AI 如果不是人机对战则下完棋后提醒另一个玩家下棋
        	//function gameAI()
        	
        	//做鼠标监听 游戏逻辑
        	document.onmousedown = function(e)
        	{
        		window.onclick = function(){
        			
        			//获取下棋的坐标
        			i = Math.round((e.x-10)/25);
        			j = Math.round((e.y-10)/25);
        			
        			x = i*25+10;//math的四舍五入
        			y = j*25+10;
			  
					//判断该位置是否有棋
					if(chessData[i][j]==0)
					{
						//下棋
						addChess(x,y);
					}else{
						alert("不好意思！你来晚了，已经被 对方捷足先登了");
					}
        			
        			}
        	}
        	

        </script>
	</body>
</html>