前端实现五子棋小游戏

最新推荐文章于 2025-04-23 18:24:17 发布

我爱吃朱肉

最新推荐文章于 2025-04-23 18:24:17 发布

阅读量433

点赞数 21

文章标签：前端 javascript html css

本文链接：https://blog.csdn.net/2401_88691693/article/details/147414676

版权

这段代码是一个基于 HTML、CSS 和 JavaScript 实现的简单五子棋游戏。以下是对代码的详细介绍：

整体结构

HTML：构建了游戏的页面结构，包含标题、画布和重新开始按钮。
CSS：为页面元素添加样式，如标题居中、画布样式和按钮样式等。
JavaScript：实现了游戏的核心逻辑，包括棋盘绘制、落子、判断胜负和计算机 AI 等功能。

完整代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>五子棋</title>
		<style>
			.title{
				text-align:center;
			}
			
			.chess{
				display: block;/*块级元素*/
				margin: 50px auto;
				box-shadow:5px 5px 5px #B9B9B9,-2px -2px 2px #EFEFEF;
				cursor: pointer;
			}
			div{
				text-align: center;
			}
			
			.restart{
				padding: 10px 20px;
				background-color: #EE82EE;
				border-radius: 5px;
				color: white;
				cursor: pointer;
			}
			
		</style>
	</head>
	<body>
		<h3 class="title">--五子棋--</h3>
		<canvas class="chess" width="450px" height="450px"></canvas>
		<div>
			<a class="restart" onclick="rst()">重新开始</a>
		</div>	
	</body>
	
	<script>
		var chess = document.getElementsByClassName("chess")[0];
		var title = document.getElementsByClassName("title")[0];
		var context = chess.getContext("2d");
		context.strokeStyle="#B9B9B9"
		
		window.onload=function(){
			drawChessBoard();
		}
		
		
		function drawChessBoard(){
			
			for(var i=0;i<15;i++){
				//设置横线起始点的坐标
				context.moveTo(15,15+i*30);
				//设置横线结束点的坐标
				context.lineTo(435,15+i*30);
				//连接2点
				context.stroke();
				
				//设置竖线的起始点坐标
				context.moveTo(15+i*30,15);
				//设置竖线的结束点坐标
				context.lineTo(15+i*30,435);
				//连接2点
				context.stroke();
				
			}
			
		}
		
		
		//设置赢法数组
		
		/**
		 * 0,0,0
		 * 1,0,0
		 * 2,0,0
		 * 3,0,0
		 * 4,0,0
		 * 
		 * 0,0,1
		 * 1,1,1
		 * 2,2,1
		 * 3,3,1
		 * 4,4,1
		 * 
		 * 1,0,1
		 * 2,0,1
		 * 3,0,1
		 * 4,0,1
		 * 5,0,1
		 */
		
		var wins=[];
		for(var i=0;i<15;i++){
			wins[i]=[];
			for(var j=0;j<15;j++){
				wins[i][j]=[]
			}		
		}
		
		//赢法的编号
		var count=0;
		//统计横线赢法
		for(var i=0;i<15;i++){
			for(var j=0;j<11;j++){
				for(var k=0;k<5;k++){
					wins[j+k][i][count]=true;
				}
				
				count++;
			}
			
		}
		
		//统计竖线赢法		
		for(var i=0;i<15;i++){
			for(var j=0;j<11;j++){
				for(var k=0;k<5;k++){
					wins[i][j+k][count]=true;		
				}				
				count++;
			}			
		}
		
		//统计正斜线
		for(var i=0;i<11;i++){
			for(var j=0;j<11;j++){
				for(var k=0;k<5;k++){
					wins[i+k][j+k][count]=true;
				}
				count++;
			}
		}
				
		//统计反斜线	
		for(var i=0;i<11;i++){
			for(var j=14;j>3;j--){
				for(var k=0;k<5;k++){
					wins[i+k][j-k][count]=true;
				}
				count++;
			}
		}
		
		//定义二维数组标记棋盘上的每个坐标是否已经下了棋子
		var chessboard=[];
		for(var i=0;i<15;i++){
			chessboard[i]=[];
			for(var j=0;j<15;j++){
				chessboard[i][j]=0;
			}
		}
		
		//下棋
		var me=true;//标记人是否可以下棋
		var over=false;//标记游戏是否结束
		
		var myWin=[];//记录用户在赢法上的分值
		var computerWin=[];//记录计算机在赢法上的分值
		for(var i=0;i<count;i++){
			myWin[i]=0;
			computerWin[i]=0;
		}
		
		chess.onclick=function(e){
			//如果游戏结束不可以下棋
			if(over){
				return;
			}

			//判断人是否可以下棋
			if(!me){
				return;	
			}
			
			//获取x轴坐标
			var x=e.offsetX;
			
			//获取Y轴坐标
			var y=e.offsetY;
			
			var i = Math.floor(x/30);
			var j = Math.floor(y/30);
			
			if(chessboard[i][j]==0){
				
				//下一个子
				oneStep(i,j,me);
				//标记已经落子
				chessboard[i][j]=1;
				
				for(var k=0;k<count;k++){
					if(wins[i][j][k]){
						
						myWin[k]++;

						if(myWin[k]==5){
							title.innerHTML="恭喜你获胜了！！！~~~"
							over=true;
						}
					}
					
				}
				
			}
			
			if(!over){
				me=!me;
				//计算机落子
				computerAI()
			}
			
		}
		
		function computerAI(){
			
			//空白子在用户所占用赢法上的分值
			var myScore=[];
			//空白子在计算机所占用赢法上的分值
			var computerScore=[];
			
			for(var i=0;i<15;i++){
				
				myScore[i]=[];
				computerScore[i]=[];
				
				for(var j=0;j<15;j++){
					myScore[i][j]=0
					computerScore[i][j]=0;
				}
				
			}
			
			//空白字的最大分值
			var max=0;
			//最大分值空白字所在的坐标
			var x=0,y=0;
			
			for(var i=0;i<15;i++){
				for(var j=0;j<15;j++){
					//判断是否是空白子				
					if(chessboard[i][j]==0){
						
						for(var k=0;k<count;k++){
							if(wins[i][j][k]){
								
								if(myWin[k]==1){
									myScore[i][j]+=200;
								}else if(myWin[k]==2){
									myScore[i][j]+=400;
								}else if(myWin[k]==3){
									myScore[i][j]+=2000;
								}else if(myWin[k]==4){
									myScore[i][j]+=10000;
								}
								
								if(computerWin[k]==1){
									computerScore[i][j]+=220;
								}else if(computerWin[k]==2){
									computerScore[i][j]+=420;
								}else if(computerWin[k]==3){
									computerScore[i][j]+=2200;
								}else if(computerWin[k]==4){
									computerScore[i][j]+=20000;
								}
								
							}
							
						}
						
						if(myScore[i][j]>max){
							max=myScore[i][j];
							x=i;
							y=j;
						}else if(myScore[i][j]==max){
							if(computerScore[i][j]>max){
								max=computerScore[i][j];
								x=i;
								y=j;
							}						
						}
						
						if(computerScore[i][j]>max){
							max=computerScore[i][j];
							x=i;
							y=j;
						}else if(computerScore[i][j]==max){
							if(myScore[i][j]>max){
								max=myScore[i][j];
								x=i;
								y=j;
							}
						}
						
						
					}
					
				}
				
			}
			
			
			oneStep(x,y,me);
			chessboard[x][y]=1;
			
			for(var k=0;k<count;k++){
				if(wins[x][y][k]){
					computerWin[k]+=1;
					if(computerWin[k]==5){
						title.innerHTML="o(╯□╰)o抱歉计算机获胜了！！~~~"
						over=true;
					}
				}
			}
			
			if(!over){
				me=!me;
			}
			
			
			
		}
		
		
		
		//落子的方法
		function oneStep(i,j,me){
			
			context.beginPath();
			
			context.arc(15+i*30,15+j*30,13,0,2*Math.PI);//画圆
			
			context.closePath();
			
			var color;
			if(me){
				color="#000000";
			}else{
				color="red";
			}
			context.fillStyle=color;
			context.fill();
			
		}
		
		function rst(){
			window.location.reload();
		}
		
		
	</script>
</html>

效果如图