五子棋案例

最新推荐文章于 2021-10-31 00:29:38 发布
原创 最新推荐文章于 2021-10-31 00:29:38 发布 · 350 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了一款五子棋游戏的开发过程，包括HTML、CSS布局设计，JavaScript逻辑实现，以及如何判断游戏胜负的算法。通过具体代码示例，展示了如何创建棋盘，放置棋子，并检查水平、垂直和对角线上的连珠情况。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

五子棋案例

在这里插入图片描述

一，五子棋结构和样式：需要准备黑白棋子图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>象棋</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				overflow: hidden;
				height: 100%;
			}
			table,tbody{
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				height: 600px;
				width: 900px;
				box-sizing: border-box;
				border-collapse: collapse;
			}
			td{
				border: 1px solid red;
				width: 60px;
				height: 60px;
			}
			.chess{
				width: 40px;
				height: 40px;
				background-size: 40px 40px;
				position: absolute;
			}
		</style>
	</head>
	<body>
      <table>
      	<tr>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      	</tr>
      	<tr>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      	</tr>
      	<tr>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      	</tr>
      	<tr>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      	</tr>
      	<tr>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      	</tr>
      	<tr>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      	</tr>
      	<tr>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      	</tr>
      	<tr>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      	</tr>
      	<tr>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      	</tr>
      	<tr>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      		<td></td>
      	</tr>
      </table>
	</body>
</html>
<script src="js/fiveChess.js"></script>

二，五子棋脚本

/*
 五子棋规则
   水平一道
   下面三道规则一样
   竖直一道
   倾斜两道
 * 
 * */


var oWrap=document.querySelector("table");//获取当前表格
var fiveChess=new FiveChess();//五子棋实例
oWrap.onclick=function(ev){
	fiveChess.count++;
	var ev=ev||event;
	var disX=ev.x-this.offsetLeft;
	var disY=ev.y-this.offsetTop;
	//获取落下的格子索引
	var numX=Math.round(disX/60);
	var numY=Math.round(disY/60);
	fiveChess.dragChess(numX,numY)
}
function FiveChess(){
	this.count=0;//奇数是白子
	this.whiteChess=[];//盛放白色棋子
	this.blackChess=[];//盛放黑色棋子
	this.dragChess=function(numX,numY){//绘制棋子
		  if(this.count%2==0){//表示双数
		  	  this.createChess(numX,numY,"black")
		  }else{//表示单数
		  	  this.createChess(numX,numY,"white")
		  }
	}
	this.createChess=function(numX,numY,color){//创建棋子
		var oChess = document.createElement("span");
		var obj = {};
		obj.Xindex = numX
		obj.Yindex = numY
		oChess.classList.add("chess");
		oChess.style.left = numX * 60 - 20 + "px";
		oChess.style.top = numY * 60 - 20 + "px";
		if(color == "black") {
			oChess.index = "b";
			oChess.style.backgroundImage = "url(image/black.png)"
			this.blackChess.push(obj);
		} else {
			oChess.index = "w";
			oChess.style.backgroundImage = "url(image/white.png)"
			this.whiteChess.push(obj)
		}
		oWrap.appendChild(oChess);
		this.countCurrentChess(numX, numY, color);//
	}
    this.countCurrentChess=function(numX, numY, color){//棋子输赢规则
	    	//因为白棋子优先，所以最先达到5个
	    
	  	 if(this.whiteChess.length>=5){
	 
 	      if(this.horizontalSearch(numX, numY,color) || this.verticalSearch(numX, numY,color)|| this.LT_BR(numX, numY,color) || this.LB_RT(numX, numY,color)){
 	      	   alert("win")
 	      }

	  	 }
    }
    this.verticalSearch=function(numX,numY,color){ 	  //首先计算水平方向,找出同一排的棋子
		 var VArr = this[color+"Chess"].filter(function(item) { //处置坐标
		 	return item.Xindex == numX;
		 })
		 
//		 return this.countUtils(VArr,numX,numY,true);
	     var nowX = numX;
		 var nowY = numY;
		 var count = 1;
		 var YVArr = []; //盛放数值点
		 VArr.forEach(function(item) {
		 	YVArr.push(item.Yindex);
		 })
		 //当前坐标向上查找
		 for(var i = 0; i < YVArr.length; i++) {
		 	nowY -= 1;
		 	if(YVArr.indexOf(nowY) != -1) { //说明有
		 		count++;
		 	} else {
		 		nowY = numY
		 		break;
		 	}
		 }
		 //当前坐标向右查找
		 for(var j = 0; j < YVArr.length; j++) {
		 	nowY += 1;
		 	if(YVArr.indexOf(nowY) != -1) { //说明有
		 		count++;
		 	} else {
		 		break;
		 	}
		 }
	
		 if(count >= 5) {
		 	console.log("win");
		 	return true;
		 }
	
		 return false;
    }
    this.horizontalSearch=function(numX,numY,color){ 	  //首先计算水平方向,找出同一排的棋子
		var HArr = this[color + "Chess"].filter(function(item) {
			return item.Yindex == numY;
		})
		return this.countUtils(HArr, numX, numY, false);
    }
    this.LT_BR=function(numX,numY,color){//从左上到右下
		var Arr = this[color + "Chess"].filter(function(item) { //进来的都是
			return item.Xindex - item.Yindex == numX - numY;
		})
		return this.countUtils(Arr, numX, numY, false);
    }
    this.LB_RT=function(numX,numY,color){//从左上到右下
		var Arr = this[color + "Chess"].filter(function(item) { //进来的都是
			return item.Xindex + item.Yindex == numX + numY;
		})
		return this.countUtils(Arr, numX, numY, false)
    }
   this.countUtils=function(Arr,numX,numY,dir){
    	var nowX = numX;
		var nowY = numY;
		var count = 1;
		var XHArr = [];
		Arr.forEach(function(item) {
			if(dir) {
				XHArr.push(item.Yindex);
			} else {
		
				XHArr.push(item.Xindex);
			}
		})
		
		//当前坐标向左查找
		for(var i = 0; i < XHArr.length; i++) {
			nowX -= 1;
			if(XHArr.indexOf(nowX) != -1) { //说明有
				count++;
			} else {
				nowX = numX
				break;
			}
		}
		//当前坐标向右查找
		for(var j = 0; j < XHArr.length; j++) {
			nowX += 1;
			if(XHArr.indexOf(nowX) != -1) { //说明有
				count++;
			} else {
				break;
			}
		}
		if(count >= 5) {
			console.log("win");
			return true;
		}
		
		return false;
		}
}

三，五子棋备注

  1. 五子棋规律

    1. 水平方向：

      1. 根据当前棋子坐标索引先找到同一排的所有棋子放在一个数组中
      2. 把当前一排的棋子X索引放在另外一个数组中
      3. 使用一个变量统计相邻同色棋子出现的次数
      4. 先从当前棋子索引不断向一个方向查找，一旦找不到相邻的棋子则反方向查找，找打一次+1

    2. 竖直方向：

      1. 根据当前棋子坐标索引先找到同一排的所有棋子放在一个数组中
      2. 把当前一排的棋子Y索引放在另外一个数组中
      3. 使用一个变量统计相邻同色棋子出现的次数
      4. 先从当前棋子索引不断向一个方向查找，一旦找不到相邻的棋子则反方向查找，找打一次+1

    3. 倾斜方向：

      1. 左上到右下满足X索引-Y索引
        1. 根据当前棋子坐标索引先找到同一排的所有棋子放在一个数组中
        2. 把当前一排的棋子Y索引放在另外一个数组中
        3. 使用一个变量统计相邻同色棋子出现的次数
        4. 先从当前棋子索引不断向一个方向查找，一旦找不到相邻的棋子则反方向查找，找打一次+1
      2. 左下到右上满足X索引+Y索引
        1. 根据当前棋子坐标索引先找到同一排的所有棋子放在一个数组中
        2. 把当前一排的棋子Y索引放在另外一个数组中
        3. 使用一个变量统计相邻同色棋子出现的次数
        4. 先从当前棋子索引不断向一个方向查找，一旦找不到相邻的棋子则反方向查找，找打一次+1
简单五子棋问题
自律即自由
06-24 1400
题目描述 在一个10行10列的棋盘上，有四颗棋子，需要你再增加一颗棋子，使得这五颗棋子连成一条连续的直线。 输入 输入包含一组测试数据，包括四行，每行是两个整数i和j（0<=i,j<=9），分别表示棋子的行和列。 输入保证再增加的棋子只有放在一个唯一的位置才能连成一条连续的直线 输出 输出包括一行，两个整数，表示增加的棋子的行和咧 样例输入 Copy 0 0 0 1 0 ...
五子棋小案例
xu_jin_ren_shuai的博客
07-10 398
#include&lt;graphics.h&gt; #include&lt;windows.h&gt; #include&lt;iostream&gt; #define MAX 20 using namespace std; bool flag=true; int temp=1; // 为了实现黑白棋子的交替，使用全局变量 void qizi(int array2[][MAX],int arr...
五子棋问题
qq_43609421的博客
06-12 517
NowCoder最近爱上了五子棋。 现在给你一个棋局，请你帮忙判断其中有没有五子连珠（超过五颗也算）。 输入描述： 输入有多组数据，每组数据为一张20x20的棋盘。 其中黑子用“*”表示，白子用“+”表示，空白位置用“.”表示。 输出描述： 如果棋盘上存在五子连珠（无论哪种颜色的棋子），输入“Yes”，否则输出“No”。 解题思路 结构设计：dir代表当前位置的8个方向，其中上下、左右、左上右下、右上左下为必须放在一起检测。 获取一个棋盘，按照行列检测棋盘中的每个位置，当拿到一个位置后，按照以下步骤进行操
linux五子棋程序,Android五子棋游戏程序完整实例分析
weixin_42502643的博客
05-02 241
最近学习了五子棋的课程，感觉挺不错。然后自己写了个关于五子棋的android程序，从中还是能够学习到很多东西的。现在我们开始今天五子棋程序的编写历程。好了，我们现在开始一步步的构建出项目来，首先是如下的项目结构图：运行的效果图：一些前期做准备的代码1、 主活动类MainActivity，在菜单中加入了再来一局的功能：public class MainActivity extends AppComp...
Python五子棋案例
最新发布
05-17
总结来说，这个Python五子棋案例涵盖了以下几个关键知识点： 1. 使用Python处理数据结构，如二维列表。 2. 用户输入与输出的处理，实现人机交互。 3. 游戏状态的判断，包括获胜条件和游戏结束条件。 4. 基于Minimax...
python五子棋案例
07-25
Python五子棋案例是一个基于Python编程语言开发的经典棋类游戏，旨在提供玩家一个对战和竞技的平台。 以下是Python五子棋案例可能包含的一些主要功能： 界面设计：使用Python的图形用户界面库（如Tkinter）或终端...
html网页五子棋案例
03-28
在这个五子棋案例中，CSS将用于设置棋盘的样式，如棋盘的边框、格子颜色、棋子的大小和位置等，以提供美观的游戏界面。 3. JavaScript核心概念：JavaScript代码将处理游戏逻辑，包括初始化棋盘、检测并处理玩家的...
Java实训五子棋案例，包括源码.doc
06-10
【Java实训五子棋案例】是一个使用Java编程语言开发的五子棋游戏，适用于学生进行信息系统认知实习。此项目旨在让学生熟悉五子棋的规则，同时研究基础的人工智能技术。游戏提供了人机对战和玩家间联网对战两种模式，...
java swing五子棋案例
08-02
Java Swing五子棋案例是一个非常适合Java初学者进行实践的项目，它主要利用了Java的Swing库来构建一个图形用户界面（GUI），实现一个基本的五子棋游戏。在这个项目中，你将学习到以下几个核心知识点： 1. **Java ...
C++课程设计之五子棋（基于Qt4）
09-27
基于Qt4的C++课程设计，主要是一个简单的五子棋游戏，具有玩家对战以及人机对战两种模式，有完整源码，需要的可以私聊
linux下QT4编写的五子棋（绝对是自己写的）
08-09
用了QT的界面 C++的思想 C语言写的一个小程序 对QT初学者 有很大帮助
labview 做的简单的机器学习的五子棋
11-27
用labview 做的简单的机器学习的五子棋，涉及到一点LVOOP技术
一个基于labview的五子棋算法
12-18
使用Labview编写，本人原创。采用的是一个比较简单的办法来进行权重，AI还是不厉害，入门而已
实战项目教你一步步写完五子棋
qq_45893999的博客
06-03 2401
文章目录开发工具效果展示逻辑关系源代码 开发工具 VS2013 easyx图形库 官网下载 效果展示 逻辑关系 easyx网图形库的介绍与使用 initgraph函数的简介 设定背景色和图展示 如何调用easyx图形库 使用循环语句结合判断语句实现五子棋效果 五子棋的判断流程逻辑图 分板块各个布局的实现 获取鼠标点击事件 计算鼠标点击的位置 设置棋盘数据 从玩家点击事件上确定点击的位置 从每次的点击位置进行判断 胜利后重新开始游戏 最小化 源代码 #include<stdio.h> #in
五子棋游戏需求分析
11-12
五子棋游戏软件需求分析 用例 用例图 类图
五子棋图片版（实现了简单的人机）
AimCorder的专栏
03-10 1296
最近纠结了一段时间，终于把一个简单的可以人机的五子棋写好了。   1.功能介绍：            该五子棋主要实现的功能有：下子，判输赢，人人对战，简单人机对战，悔棋。界面主要是模仿QQ五子棋的风格。   2.图片展示：     3.技术要点: 主要是用二维数组保存棋局，实现棋子的重绘和输赢的判定以及人机对战。其次就是人机对战中的的搜索局面和落子点优先级的判定，以及用随机算子实...
五子棋规则的实现及代码
ownclover的博客
10-31 3006
常识可得，一个玩家获胜肯定是当前的一颗棋子，和之前的棋子组成了连续的五个棋子。 所以如果只要从当前棋子出发，从四个方向分别找到最边界的棋子，然后往后数相同棋子个数即可判断。 ...
Android五子棋案例详解：人机对战算法分析
- **面向对象设计**：整个五子棋案例需要采用面向对象的编程方法，包括定义各种类（如棋盘类、棋子类、游戏逻辑类等）以及它们之间的关系。 - **封装、继承、多态**：案例的开发过程中，要体现面向对象的三大特性：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

如鹰展翅上腾

谢谢老板

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值