【网页制作】原生JavaScript制作“井字棋”

最新推荐文章于 2024-03-18 23:05:49 发布

user_from_future

最新推荐文章于 2024-03-18 23:05:49 发布

阅读量574

点赞数 1

分类专栏： Html+Css+JS / jQuery小型网页综合实战文章标签： html css javascript

本文链接：https://blog.csdn.net/user_from_future/article/details/124587110

版权

Html+Css+JS / jQuery小型网页综合实战专栏收录该内容

9 篇文章 3 订阅

订阅专栏

🌈据说，看我文章时 关注、点赞、收藏 的 帅哥美女们 心情都会不自觉的好起来。

前言：
🧡作者简介：大家好我是 user_from_future ，意思是 “ 来自未来的用户 ” ，寓意着未来的自己一定很棒~
✨个人主页：点我直达，在这里肯定能找到你想要的~
👍专栏介绍：Html+Css+JS / jQuery小型网页综合实战，一个专注于分享网页制作实例的专栏~

专栏文章直链：
【网页制作】jQuery制作动态指针钟表
 【网页制作】jQuery模拟提交表单生成卡片
 【网页制作】制作静态钟表
 【网页制作】jQuery控制页面侧边栏的收缩与展开
 【网页制作】制作百度网盘登录页
 【网页制作】注册表单页
 【网页制作】jQuery操作css实现设置箭头图片

人生苦短，我用python

制作要求

这是一个特殊的 “井字棋” ，相关内容的注释在函数中有，这是我看抖音上的一个案例仿造的，仅供娱乐！
抖音上的效果：
在这里插入图片描述

再看仍然仍不住还是想笑笑😂😂

制作效果图

在这里插入图片描述

参考源代码

目录结构

└──网页文件夹
	└── well.html

well.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>井字棋</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			h1 {
				margin-top: 100px;
			}

			#well {
				width: 306px;
				height: 306px;
				overflow: hidden;
				margin: 100px auto;
				position: relative;
				border: #000 3px solid;
			}

			.row {
				width: 612px;
				height: 102px;
				position: absolute;
			}

			.cell {
				float: left;
				width: 100px;
				height: 100px;
				font-size: 72px;
				text-align: center;
				line-height: 100px;
				border: #000 1px solid;
			}

			#row2 {
				top: 102px;
			}

			#row3 {
				top: 204px;
			}
		</style>
	</head>
	<body onload="init()">
		<center>
			<h1>井字棋</h1>
		</center>
		<div id="well">
			<div id="row1" class="row"></div>
			<div id="row2" class="row"></div>
			<div id="row3" class="row"></div>
		</div>
		<script type="text/javascript">
			var index = 0;

			function init() {
				["row1", "row2", "row3"].forEach(function(id_) {
					let element = document.getElementById(id_);
					// 清空子节点
					while (element.hasChildNodes()) {
						element.removeChild(element.firstChild);
					}
					Array.from(Array(6), (v, k) => k).forEach(() => change(-1)); // 自动滑到最左边
					// 创建格子
					Array.from(Array(6), (v, k) => k).forEach(function(item) {
						let temp = document.createElement("div");
						temp.className = "cell";
						temp.onclick = go;
						element.appendChild(temp);
					});
				});
				// 初始化时候随机位置下（针对先手下中间必赢局面，放开概率）
				document.getElementById(["row1", "row2", "row3"][parseInt(Math.random() * 3)]).childNodes[parseInt(Math.random() * 3)].innerHTML = "O";
			}

			function win(role) {
				alert(role + "赢了！"); init();
			}

			function check() {
				let board = [];
				["row1", "row2", "row3"].forEach(function(id_) {
					let temp = [];
					document.getElementById(id_).childNodes.forEach(function(item) {
						temp.push(item.innerText);
					});
					board.push(temp);
				});
				// 检测水平方向同列
				for (let row in board) {
					if (board[row].join("").indexOf("XXX") != -1) {
						return win("X");
					} else if (board[row].join("").indexOf("OOO") != -1) {
						return win("O");
					}
				}
				for (let col = 0; col < 6; col++) {
					// 检测y=x斜线方向
					if (col > 1 && board[0][col] && board[0][col] === board[1][col - 1] && board[1][col - 1] === board[2][col - 2]) {
						return win(document.getElementById("row1").childNodes[col].innerHTML);
					}
					// 检测y=x斜线方向
					else if (col < 4 && board[0][col] && board[0][col] === board[1][col + 1] && board[1][col + 1] === board[2][col + 2]) {
						return win(document.getElementById("row1").childNodes[col].innerHTML);
					}
					// 检测垂直方向同列
					if (board[2][col] && board[0][col] === board[1][col] && board[1][col] === board[2][col]) {
						return win(document.getElementById("row1").childNodes[col].innerHTML);
					}
				}
			}

			function go(element) {
				if (element.srcElement.innerHTML) {
					return alert("此处已有棋子~");
				} else if (index % 2) {
					element.srcElement.innerHTML = "O";
				} else {
					element.srcElement.innerHTML = "X";
				}
				index++;
				setTimeout(check, 100);
			}

			function change(delta) {
				// delta 为正，鼠标滚轮向下，井字棋向左移动，反之向右移动
				["row1", "row2", "row3"].forEach(function(item) {
					let temp = document.getElementById(item);
					let left = parseInt((temp.style.left || "0px").replace("px", ""));
					if (left === 0 && delta > 0) {
						temp.style.left = left - 102 * delta + "px";
					} else if (left === -306 && delta < 0) {
						temp.style.left = left - 102 * delta + "px";
					} else if (left > -306 && left < 0) {
						temp.style.left = (left - 102 * delta) + "px";
					}
				});
			}
			document.getElementById("well").addEventListener("mousewheel", function(event) {
				change(event.deltaY > 0 ? 1 : -1);  // 防止滑动过猛出现BUG
			});
		</script>
	</body>
</html>