用JS写井字棋小游戏，带机器人

最新推荐文章于 2022-06-07 18:12:59 发布
最新推荐文章于 2022-06-07 18:12:59 发布
阅读量713 收藏 9
点赞数 1
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35875470/article/details/100828470
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>井字棋</title>
	</head>
	<body>
		<style>
			.jian{
				width: 302px;
				margin: 0 auto;
				margin-top:10px;
			}
			.jian .start{
				margin-bottom: 20px;
				display: block;
			}
			.jian .s{
				width:100px;
				height: 100px;
				background: #f2f2f2;
				font-size: 80px;
				color: #666;
				text-align: center;
				line-height: 100px;
			}
			.f-l{
				float:left;
			}
			.f-r{
				float: right;
			}
		</style>
		<div class="jian">
			<a class="start" href="javascript:game_start();">开始</a>
			<div class="kuai">
				<div class="s f-l" onclick="game_click(0,0)" id='0-0'>
					
				</div>
				<div class="s f-l" onclick="game_click(0,1)" id='0-1' style="border-left: 1px solid #666666;border-right: 1px solid #666666;">
					
				</div>
				<div class="s f-l" onclick="game_click(0,2)" id='0-2'>
					
				</div>
				
				
				<div class="s f-l" onclick="game_click(1,0)" id='1-0' style="border-top: 1px solid #666666;border-bottom: 1px solid #666666;">
					
				</div>
				<div class="s f-l" onclick="game_click(1,1)" id='1-1' style="border: 1px solid #666666;">
					
				</div>
				<div class="s f-l" onclick="game_click(1,2)" id='1-2' style="border-top: 1px solid #666666;border-bottom: 1px solid #666666;">
					
				</div>
				
				
				<div class="s f-l" onclick="game_click(2,0)" id='2-0'>
					
				</div>
				<div class="s f-l" onclick="game_click(2,1)" id='2-1' style="border-left: 1px solid #666666;border-right: 1px solid #666666;">
					
				</div>
				<div class="s f-l" onclick="game_click(2,2)" id='2-2'>
					
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var qi_data = [[0,0,0],[0,0,0],[0,0,0]];
		var quan_data = [[0,0,0],[0,0,0],[0,0,0]];
		var quan_type = 1;
		var is_end = false;
		var msg = '';
		//开始游戏
		var game_start = function(){
			//1.重置参数
			qi_data = [[0,0,0],[0,0,0],[0,0,0]];
			quan_data = [[0,0,0],[0,0,0],[0,0,0]];
			quan_type = 1;
			is_end = false;
			msg = '';
			//2.渲染棋盘
			game_rendering();
		}
		//走棋
		var game_action,T = function(y,x,type){
			//1.判断棋是否对规则
			if(!game_action_pan(x,y,type)){
				return alert('错误：'+msg);
			}
			//2.应用下棋
			qi_data[y][x] = quan_type;
			//3.渲染棋盘
			game_rendering();
			//4.是否出现赢家
			var gameenddata = game_end(type);
			if(gameenddata==0){
				is_end = true;
				return alert('恭喜【'+type+'号】玩家胜利！');
			}else if(gameenddata==1){
				is_end = true;
				return alert('【平局】，要和平相处哦~');
			}
			//5.AI下棋
			if(quan_type==1){quan_type=2;quan_pan_list();}else{quan_type=1}//切换下棋人
		}
		//权值
		var quan_pan_list=function(){
			//1.一级权值,可以赢的走棋
			for(var i=0;i<=2;i++){
				if((qi_data[0][i]==2&&qi_data[1][i]==2)&&qi_data[2][i]==0){
					return T(2,i,2);
				}
				if((qi_data[0][i]==2&&qi_data[2][i]==2)&&qi_data[1][i]==0){
					return T(1,i,2);
				}
				if((qi_data[1][i]==2&&qi_data[2][i]==2)&&qi_data[0][i]==0){
					return T(0,i,2);
				}
				if((qi_data[i][0]==2&&qi_data[i][1]==2)&&qi_data[i][2]==0){
					return T(i,2,2);
				}
				if((qi_data[i][0]==2&&qi_data[i][2]==2)&&qi_data[i][1]==0){
					return T(i,1,2);
				}
				if((qi_data[i][1]==2&&qi_data[i][2]==2)&&qi_data[i][0]==0){
					return T(i,0,2);
				}
			}
			if((qi_data[0][0]==2&&qi_data[1][1]==2)&&qi_data[2][2]==0){
				return T(2,2,2);
			}
			if((qi_data[0][0]==2&&qi_data[2][2]==2)&&qi_data[1][1]==0){
				return T(1,1,2);
			}
			if((qi_data[1][1]==2&&qi_data[2][2]==2)&&qi_data[0][0]==0){
				return T(0,0,2);
			}
			if((qi_data[0][2]==2&&qi_data[1][1]==2)&&qi_data[2][0]==0){
				return T(2,0,2);
			}
			if((qi_data[0][2]==2&&qi_data[2][0]==2)&&qi_data[1][1]==0){
				return T(1,1,2);
			}
			if((qi_data[1][1]==2&&qi_data[2][0]==2)&&qi_data[0][2]==0){
				return T(0,2,2);
			}
			//2.二级权值,阻止敌方获胜
			for(var i=0;i<=2;i++){
				if((qi_data[0][i]==1&&qi_data[1][i]==1)&&qi_data[2][i]==0){
					return T(2,i,2);
				}
				if((qi_data[0][i]==1&&qi_data[2][i]==1)&&qi_data[1][i]==0){
					return T(1,i,2);
				}
				if((qi_data[1][i]==1&&qi_data[2][i]==1)&&qi_data[0][i]==0){
					return T(0,i,2);
				}
				if((qi_data[i][0]==1&&qi_data[i][1]==1)&&qi_data[i][2]==0){
					return T(i,2,2);
				}
				if((qi_data[i][0]==1&&qi_data[i][2]==1)&&qi_data[i][1]==0){
					return T(i,1,2);
				}
				if((qi_data[i][1]==1&&qi_data[i][2]==1)&&qi_data[i][0]==0){
					return T(i,0,2);
				}
			}
			if((qi_data[0][0]==1&&qi_data[1][1]==1)&&qi_data[2][2]==0){
				return T(2,2,2);
			}
			if((qi_data[0][0]==1&&qi_data[2][2]==1)&&qi_data[1][1]==0){
				return T(1,1,2);
			}
			if((qi_data[1][1]==1&&qi_data[2][2]==1)&&qi_data[0][0]==0){
				return T(0,0,2);
			}
			if((qi_data[0][2]==1&&qi_data[1][1]==1)&&qi_data[2][0]==0){
				return T(2,0,2);
			}
			if((qi_data[0][2]==1&&qi_data[2][0]==1)&&qi_data[1][1]==0){
				return T(1,1,2);
			}
			if((qi_data[1][1]==1&&qi_data[2][0]==1)&&qi_data[0][2]==0){
				return T(0,2,2);
			}
			//3.随意下棋
			var suiqi =[];
			for (var i = 0; i < qi_data.length; i++) {
				for(var t=0; t<qi_data.length;t++){
					if(qi_data[i][t]==0){
						suiqi.push([i,t]);
					}
				}
			}
			var xia = suiqi[suiji_num(suiqi.length)];
			return T(xia[0],xia[1],2);
		}
		
		
		//随机数生成
		var suiji_num = function(num){
			return parseInt(Math.random() * (num), (num));
		}
		//棋盘中是否出现赢家 或 平局
		var game_end = function(type){
			var list = [];
			var num = 0;
			//横纵斜向
			for(var i=0;i<=2;i++){
				var zong = [];
				for(var t=0;t<=2;t++){
					zong[t]=qi_data[t][i];
				}
				list.push(qi_data[i]);
				list.push(zong);
			}
			list.push([qi_data[0][0],qi_data[1][1],qi_data[2][2]]);
			list.push([qi_data[0][2],qi_data[1][1],qi_data[2][0]]);
			//判断
			var is_ping = true;
			var list_ping = [];
			for(var i=0;i<=list.length-1;i++){
				if(list[i][0]==type&&list[i][1]==type&&list[i][2]==type){
					return 0;
				}
				var isx = false;
				var isy = false;
				for(var t=0;t<=2;t++){
					if(list[i][t]==1){
						isx =true;
					}
					if(list[i][t]==2){
						isy =true;
					}
				}
				if(!(isx&&isy)){
					list_ping.push([0]);
				}else{
					list_ping.push([1]);
				}
			}
			//平局
			for(var i=0;i<=list_ping.length-1;i++){
				if(list_ping[i]==0){
					is_ping = false;
				}
			}
			if(is_ping){
				return 1;
			}

			return 404;
		}
		//判断棋是否对规则
		var game_action_pan = function(x,y,type){
			//1.下棋人是否正确
			if(type!=quan_type){
				msg='下棋人不正确';
				return false;
			}
			//2.下棋位置是否为空
			if(qi_data[y][x]!=0){
				msg='下棋位置已占用';
				return false;
			}
			//3.游戏是否已经结束
			if(is_end){
				msg='游戏已经结束！请重新开始';
				return false;
			}
			return true;
		}
		//渲染棋盘
		var game_rendering = function(){
			var list = '';
			for(var i=0;i<=2;i++){
				var jian=[' ',' ',' '];
				for(var t=0;t<=2;t++){
					if(qi_data[i][t]==1){
						jian[t]='X';
					}else if(qi_data[i][t]==2){
						jian[t]='O';
					}
				}
				list+='|'+jian[0]+'|'+jian[1]+'|'+jian[2]+'|\n';
				for(var t=0;t<=2;t++){
					document.getElementById(i+'-'+t).innerHTML=jian[t];
				}
			}
			console.log(list);
		}
		//点击下棋
		var game_click = function(y,x){
			T(y,x,quan_type);
		}
		
	</script>
</html>
rock__rabbit
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
php井字游戏代码_JS实现井字棋游戏步骤详解
weixin_35962107的博客
12-23 473
这次给大家带来JS实现井字棋游戏步骤详解，JS实现井字棋游戏的注意事项有哪些，下面就是实战案例，一起来看一下。最近有一门课结束了，需要做一个井字棋的游戏，我用JavaScript写了一个。首先界面应该问题不大，用html稍微写一下就可以。主要是人机对弈时的ai算法，如何使电脑方聪明起来，是值得思考一下的。开始游戏后，由玩家先行。那么站在计算机的角度，可以对多种情况进行分析，并按照重要程度赋予权值。...
js 实现井字棋游戏
军火库
05-31 1771
井字棋 井字棋作为我们在上学时代必玩的一款连珠游戏，你知道如何做到先手必然不会输吗？今天我们就用HTML、css、js来实现一款井字棋游戏。 先看成品 游戏初始化界面： 玩家获胜 AI电脑获胜 思路 生成棋盘 通过表格生成一个3*3的表格 然后通过css属性隐藏部分边框实现井字棋盘 重新开始 清空文本数列删除属性 玩家落子 通过玩家点击获取id 通过id将点击的表格块设置为O 电脑落子 通过算法来实现电脑最适合的块id然后落子 代码 HTML <!DOCTYPE html>
js实现井字棋游戏
TGA麻辣香锅的博客
01-18 1453
好转！！！！ 转载自：https://blog.csdn.net/qq_36171287/article/details/104887248
JavaScript 进阶——井字棋游戏智能AI搭建
苦作舟的空城机
03-15 3371
目录 井字棋游戏 准备的HTML： 准备的CSS： 第一部分点击出现O的JS代码： 现阶段效果： 第二部分：判断胜利 现阶段结果： 第三部分：简单的智能AI 现阶段结果： 第四部分：之前我们很容易就能击败AI，所以现在要强化AI的难度 完整JavaScript代码： 结果：不多说了，还没赢过???? 学习来源：JavaScript井字棋游戏开发与AI算法 井字棋游戏 ...
【网页制作】原生JavaScript制作“井字棋”
user_from_future的博客
05-13 630
原生JavaScript制作“井字棋”
课程设计大作业基于java的Android Studio实现井字棋小游戏源码.zip
06-16
课程设计大作业基于java的Android Studio实现井字棋小游戏源码课程设计大作业基于java的Android Studio实现井字棋小游戏源码课程设计大作业基于java的Android Studio实现井字棋小游戏源码课程设计大作业基于java的...
python实现简单井字棋小游戏
12-20
【Python实现井字棋小游戏详解】 井字棋（Tic-Tac-Toe）是一种简单而受欢迎的双人游戏，通常在纸上或电子设备上玩。本文将介绍如何使用Python编程语言来实现一个简单的井字棋游戏。游戏的核心部分包括定义棋盘、...
Java实现简单井字棋小游戏代码实例
08-19
Java实现简单井字棋小游戏代码实例是使用Java语言编写的井字棋游戏代码实例。该游戏的主要逻辑是使用一个3x3的二维数组来存储棋盘信息，用户和机器人轮流下棋，游戏的目标是让用户或机器人先胜利。在游戏的开始，...
井字棋，小游戏井字棋，小游戏
01-30
井字棋，小游戏
井字棋js（vue）
11-13
js （vue）如何实现井字琪 游戏规则我想不用我多说了
JavaScript实现一个带AI的井字棋游戏
10-18
主要介绍了基于JavaScript实现一个带AI的井字棋游戏源码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue实现井字棋游戏
10-14
主要为大家详细介绍了vue实现井字棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
tictactoe.js
04-29
tictactoe.js 井字游戏的minimax算法在javascript演示中的实现： :
使用 JavaScript 进行井字游戏：创建棋盘类
allway2的博客
06-07 2309
Tic-Tac-Toe with JavaScript: Creating the Board Class | Ali Alaa - Front-end Web Developerhttps://alialaa.com/blog/tic-tac-toe-js本文由 3 个部分组成。在第一部分中，我们将开始构建井字棋游戏棋盘背后的逻辑。我们将学习如何创建一个代表棋盘的 Javascript 类。除了一些有助于我们获取有关棋盘信息的方法外，该类将保存棋盘的当前状态。让我们从创建项目的文件夹开始。文件夹的结构会很
Javascript井字棋-1
weixin_49138897的博客
05-27 410
首先我们来讲井字棋的思路 棋盘 下棋 判断输赢 这三步是最基本井字棋的逻辑 可以简单的实现玩家对战的功能 但在本篇文献中 我采取的是电脑跟玩家下 所以我们还需要撕开电脑的下法 什么地方可以下 下什么地方最好 垃圾步 基于上面的逻辑我们开始撰写我们的代码 棋盘 棋盘这里我才用了一个无序列表ul 以及九个li标签当作镜子棋的九个格子 并给他们都设置了样式 这里不多细讲 如图下 Li标签的value表示这个格子中的状态 为0的时候表示这里没有子 为1的时候表示这里是玩家下的子
JavaScript Canvas井字棋游戏
allway2的博客
08-20 332
index.html <!DOCTYPE html> <html> <head> <title>Tic Tac Toe</title> <style> * { padding: 0; margin: 0; } body, html, #game...
js井子棋
厚渡
11-13 5827
js （vue）如何实现井字琪 游戏规则我想不用我多说了， 本次dome仅仅是作者太无趣了， 写着玩的，不喜勿喷。 先给大家看看样子吧。 dome介绍： 这里实现了 井字棋的博弈与胜负。 可以一个人玩。 （自己是X 同时也是 O） 不过这样难免显得无趣。 我又加了个人机跟你下棋 这里面的人机比较笨， 我就不优化了。 （可不要欺负人家呀） 话不多说先上源代码。 <template> <div class="pages"> <h2>井字棋</h2>
简单井字棋(Java)
qq_40282585的博客
09-06 3580
井字棋: 判断其中是否存在某一方获胜，获胜的条件是存在整行或整列或整条对角线或整条反对角线上是相同的棋子。如果存在，则输出代表获胜一方字母：X或O（大写字母X或O）；如果没有任何一方获胜，则输出平局。 主要思路： 　　　　　将棋盘看做一个对象，将下棋的人，看做是两个属性，不论人怎么下，改变的是棋盘的状态，所以只需要维护好棋盘的状态就行，至于怎么判断是谁下，用一个静态常亮表示   //代码...
[JavaScript]陈年老代码：自带AI的井字棋游戏
身披白袍的博客
12-03 2347
翻硬盘的时候，翻出来一份不知道什么时候写的井字棋小游戏。自带简单AI，玩了一下，感觉还行。想了想，好像是以前上什么课时的时候偷偷在桌底下写的。
用labview写一个井字棋小游戏
最新发布
05-30
好的，下面是使用LabVIEW编写井字棋小游戏的简单步骤： 1. 打开LabVIEW，新建一个VI，将其命名为“Tic-Tac-Toe Game”。 2. 在VI中创建一个二维数组，大小为3x3，用于存储棋盘上的棋子状态。 3. 在Front Panel中添加一个3x3的网格，用于展示棋盘状态。将每个单元格与数组元素绑定，以便实时反映棋子的状态变化。 4. 添加一个按钮，用于开始或重新开始游戏。点击按钮后，将数组清空，并将所有单元格重置为初始状态。 5. 添加一个文本框，用于显示胜负结果。每当有一方获胜时，将其名称显示在文本框中。 6. 添加一个事件结构，用于处理玩家点击网格中某个单元格的事件。在事件结构中添加以下代码： - 检查玩家是否已经下过棋，如果是，则提示该玩家不能再下棋。 - 更新网格中被点击的单元格的状态，将其与相应的数组元素同步。 - 检查是否有一方获胜，如果是，则更新文本框中的内容，并禁用所有单元格，直到玩家点击重新开始按钮。 7. 编写胜负判断算法。判断是否有任意一行、一列或一条对角线上有三个相同的棋子，如果是，则返回该棋子的名称。 8. 运行VI，测试游戏功能。 以上是使用LabVIEW编写井字棋小游戏的简单步骤，具体实现细节还需要根据具体需求进行调整和完善。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

rock__rabbit

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值