全网最简单的五子棋（H5）游戏

最新推荐文章于 2023-07-04 08:25:15 发布
最新推荐文章于 2023-07-04 08:25:15 发布
阅读量1.1k 收藏 3
点赞数
文章标签： 游戏 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44886972/article/details/127708277
版权

代码如下

复制到记事本后，更改后缀名为.html或者.htm，双击浏览器打开即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
			html,
			body,
			section,
			div,
			p {
				padding: 0;
				margin: 0;
				font-size: 12px;
			}

			body {
				width: 100%;
				height: 100%;
				position: fixed;
			}

			#chessboard {
				width: 90vmin;
				min-height: 89vmin;
				margin: calc(50vh - 46vmin + 2px) auto;
				background: #b17c01;
				border: 2px solid #000;
				border-radius: 7px;
				-webkit-box-shadow: .1rem .1rem .05rem rgba(0, 0, 0, .5),
					-.1rem -.1rem .05rem rgba(0, 0, 0, .5);
				box-shadow: .1rem .1rem .05rem rgba(0, 0, 0, .5),
					-.1rem -.1rem .05rem rgba(0, 0, 0, .5);
			}

			#chessboard::after {
				content: "";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}

			#chessboard div {
				width: calc(9vmin - 2px);
				height: calc(9vmin - 2px);
				float: left;
				border: 1px solid #000;
				border-radius: 5px;
			}

			#chessboard div p {
				width: 97%;
				height: 97%;
				margin: 1.5% auto;
				border-radius: 100%;
			}

			.white {
				background: -webkit-radial-gradient(at 35% 35%, #FFF, #CCC, #FFF);
				background: -o-radial-gradient(at 35% 35%, #FFF, #CCC, #FFF);
				background: -moz-radial-gradient(at 35% 35%, #FFF, #CCC, #FFF);
				background: radial-gradient(at 35% 35%, #FFF, #CCC, #FFF);
				box-shadow: .1rem .1rem .05rem rgba(0, 0, 0, .5);
			}

			.black {
				background: -webkit-radial-gradient(at 30% 30%, #999 -13%, #000 35%, #999 200%);
				background: -o-radial-gradient(at 30% 30%, #999 -13%, #000 35%, #999 200%);
				background: -moz-radial-gradient(at 30% 30%, #999 -13%, #000 35%, #999 200%);
				background: radial-gradient(at 30% 30%, #999 -13%, #000 35%, #999 200%);
				box-shadow: .1rem .1rem .05rem rgba(0, 0, 0, .5);
			}

			#mask {
				width: 100%;
				height: 100vh;
				position: fixed;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, .7);
			}

			.conBox {
				display: block;
				width: 300px;
				height: 200px;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				background-color: #fff;
				border-radius: 3px;
				box-shadow: .1rem .1rem .05rem rgba(0, 0, 0, .5);
			}

			.conBox h1 {
				width: 100%;
				float: left;
				margin: 0;
				line-height: 45px;
				text-align: center;
			}

			.conBox p {
				display: block;
				width: 40px;
				height: 40px;
				float: left;
				margin-top: 40px;
				font-size: 32px;
				text-align: center;
				line-height: 40px;
				cursor: pointer;
			}

			.conBox p:nth-child(2) {
				margin-left: 60px;
			}

			.conBox p:nth-child(3) {
				width: 100px;
				font-size: 20px;
				cursor: initial;
			}

			.conBox button {
				width: 80px;
				float: left;
				margin-top: 20px;
				margin-left: 110px;
				color: #fff;
				font-size: 14px;
				text-align: center;
				line-height: 28px;
				background-color: blue;
				border-radius: 10px;
				border: none;
				outline: none;
			}

			.clear::after {
				content: "";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}

			.border,
			.borderTop,
			.borderBot {
				position: relative;
			}

			.border:after {
				content: " ";
				width: 200%;
				height: 200%;
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 50px;
				border: 1px solid rgba(0, 0, 0, 0.2);
				-webkit-transform: scale(0.5);
				transform: scale(0.5);
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				box-sizing: border-box;
			}

			.borderBot:after {
				content: " ";
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				height: 1px;
				border-bottom: 1px solid rgba(0, 0, 0, 0.2);
				-webkit-transform-origin: 0 100%;
				transform-origin: 0 100%;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
			}

			.borderTop:before {
				content: " ";
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				height: 1px;
				border-top: 1px solid rgba(0, 0, 0, 0.2);
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
			}
</style>
</head>
<body>
    <section id="chessboard" class="clear">
	        <!-- 该区域为棋盘 -->
    </section>
    <section id="mask">
 					<!-- 刚进入页面时的北京遮罩层 -->
        <aside class="conBox">
					<!-- 刚进入页面时的配置弹框 -->
            <h1 class="borderBot">请选择棋盘规格大小！</h1>
            <p id="subBtn" class="border">-</p>
            <p id="gridNum" value="10" class="borderTop borderBot">10</p>
            <p id="addBtn" class="border">+</p>
            <button id="submitBtn">确认</button>
        </aside>
    </section>
    <script>
		window.onload = function() {
			var grid;
			var chessArr = [];
			var timer = 0;
			var lineNum = parseInt(gridNum.innerHTML);
			var box = document.getElementById('chessboard');
			var chessBox = box.getElementsByTagName('div');
			var submitBtn = document.getElementById('submitBtn');

			subBtn.onclick = function() {
				if (lineNum > 8) {
					lineNum--;
				}
				gridNum.innerHTML = lineNum;
			}
			addBtn.onclick = function() {
				if (lineNum < 14) {
					lineNum++;
				}
				gridNum.innerHTML = lineNum;
			}

			//棋盘初始化
			submitBtn.onclick = function() {
				var chessMaxNum = lineNum * lineNum;
				var chessWH = 90 / lineNum;
				for (var i = 0; i < chessMaxNum; i++) {
					grid = document.createElement('div');
					grid.style.width = 'calc(' + chessWH + 'vmin - 2px)';
					grid.style.height = 'calc(' + chessWH + 'vmin - 2px)';
					grid.id = i;
					box.appendChild(grid);
					chessArr[i] = 0;

					grid.onclick = function(x) {
						var index = x.target.id || x.target.parentNode.id;
						return playChess(index);
					};

				};
				mask.style.display = 'none';
			}

			//棋子对象
			function Chess() {
				this.color = 'white';
				this.site = 0;
				this.chessDom = function() {
					var dom = document.createElement('p');
					dom.setAttribute('class', this.color);
					return dom;
				}
				this.ligature = function(arr) {
					var whiteChess = arr.map(function(s) {
						return (s.color == 'white') ? parseInt(s.site) : 0;
					});
					var blackChess = arr.map(function(s) {
						return (s.color == 'black') ? parseInt(s.site) : 0;
					});

					judge(whiteChess, '白子');
					judge(blackChess, '黑子');

					function judge(che, color) {
						for (var i = 0; i < che.length; i++) {
							var x = che[i] % lineNum;
							var y = parseInt(che[i] / lineNum);
							if (x <= lineNum - 5 && y <= lineNum - 5 && che[i] != 0) {
								if (che[i + 1 * lineNum + 1] != 0 && che[i + 2 * lineNum + 2] != 0 && che[i + 3 * lineNum + 3] != 0 && che[i +
										4 * lineNum + 4] != 0) {
									alert(color + '获胜!');
									location.replace(location);
									return true;
								}
							};
							if (y <= lineNum - 5 && che[i] != 0) {
								if (che[i + 1 * lineNum] != 0 && che[i + 2 * lineNum] != 0 && che[i + 3 * lineNum] != 0 && che[i + 4 *
										lineNum] != 0) {
									alert(color + '获胜!');
									location.replace(location);
									return true;
								}
							};
							if (x >= 4 && y <= lineNum - 5 && che[i] != 0) {
								if (che[i + 1 * lineNum - 1] != 0 && che[i + 2 * lineNum - 2] != 0 && che[i + 3 * lineNum - 3] != 0 && che[i +
										4 * lineNum - 4] != 0) {
									alert(color + '获胜!');
									location.replace(location);
									return true;
								}
							};
							if (x <= lineNum - 5 && che[i] != 0) {
								if (che[i + 1] != 0 && che[i + 2] != 0 && che[i + 3] != 0 && che[i + 4] != 0) {
									alert(color + '获胜!');
									location.replace(location);
									return true;
								}
							};
						};
					}
				}
			}

			function playChess(i) {
				if (chessArr[i] == 0) {
					timer++;
					chessArr[i] = new Chess();
					timer % 2 == 0 ? chessArr[i].color = 'black' : chessArr[i].color = 'white';
					chessArr[i].site = i;
					chessBox[i].appendChild(chessArr[i].chessDom());
					chessArr[i].ligature(chessArr);
				} else {
					alert('此处有棋子!');
				}
			}

		};
</script>
</body>
</html>
好好学习0806
关注
H5 五子棋小游戏
weixin_45743799的博客
11-13 1657
用H5实现双人五子棋小游戏。 功能分解： 棋盘的大小自己设置 白色棋子和黑色棋子的点击事件 有棋子的地方不能再次放棋子 判断同色棋子是否够五个 够五个之后弹框显示胜利 效果演示 原始样式 选择之后开始游戏 有没有一种特别好玩的感觉呢？？？ 代码演示 body <body> <section id="chessboard" class="clear"> &l...
html5五子棋
03-21
NULL 博文链接：https://bj-zhouhantao-163-com.iteye.com/blog/897542
使用h5制作一个五子棋游戏
z3337603707的博客
05-18 1350
思路解析 1、制作棋盘 2、绘制棋子 3、判定胜负 4、继续/停止 知识点总结 canvas.moveTo(x,y) 决定从线条绘制开始的地方 canvas.ineTo(x,y) 决定线条结束的地方 canvas.beginPath() 开始绘制一条路径/重置一条路径 canvas.arc(x,y,直径,角度,起始点,是否为空心) 绘制圆的方法 canvas.fill()...
h5+css3简单实现网页端五子棋游戏1.0版
rufeike的博客
10-20 2753
H5+css3简单实现五子棋游戏 原理 主要使用H5的拖拽接口功能，通过拖拽移动棋子，目标位置通过接收拖拽棋子的拷贝元素，实现棋子摆放。 效果图如下 步骤 第一步：简单排版五子棋游戏页面，设定好棋盘排放区域，并把事先准备一张棋盘背景图片作为棋盘区域的背景图，使用background-size:contain平铺。并在棋盘上方画表格，让表格中的td内容位置刚好处于背景图片放置棋子的位置，红色虚...
html实现五子棋游戏
路在前方
10-31 5698
实现代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <style type='text/css'> canvas { display: block; margin: 50px
小游戏——js+h5[canvas]+cs3制作【五子棋】小游戏
weixin_34259232的博客
06-19 274
五子棋小游戏学习—— 有一个问题是，棋盘线的颜色，在canvas中，明明设置了灰色，但在我的预览中还是黑色的，很重的颜色。 以下是复刻的源码： 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8...
HTML5 游戏开发实战 ｜ 五子棋
不断学习，不断进步，提高自己
07-04 2504
五子棋是一种家喻户晓的棋类游戏，它的多变吸引了无数的玩家。本章首先实现单机五子棋游戏(两人轮流下)，而后改进为人机对战版。整个游戏棋盘格数为 15×15，单击鼠标落子，黑子先落。在每次下棋子前，程序先判断该处有无棋子，有则不能落子，超出边界不能落子。任何一方有横向、竖向、斜向、反斜向连到 5 个棋子则胜利。
H5构建简单五子棋和简单的五子棋AI
qq_21327945的博客
08-04 230
使用H5做了一个简单的五子棋 还做了一个简单的AI，不会成长，水平在五子棋初级的感觉 只会堵，然后找机会，不会简单的被打败，思考也比较单一 开源仓库链接
h5小游戏-五子棋.rar_H5游戏_h5五子棋_h5小游戏_五子棋_五子棋 h5
09-24
《五子棋——H5游戏开发详解》 五子棋是一种深受人们喜爱的传统棋类游戏，如今，随着HTML5技术的发展，我们可以在网页上轻松体验到这种乐趣。本篇文章将深入探讨如何使用HTML5来开发一款五子棋的小游戏。 一、...
python实现简单的五子棋游戏
12-17
本实例中，使用了Tkinter库来创建五子棋游戏的界面，这是一个内置的Python GUI库，适合开发简单的桌面应用。下面我们将详细探讨这个五子棋游戏的实现。 首先，我们导入了`tkinter`库和`math`库。`tkinter`库用于...
h5实现五子棋，包括悔棋，清空，保存，载入，人机对战等基本功能
09-03
h5实现五子棋，包括悔棋，清空，保存，载入，人机对战等基本功能
用HTML5写的五子棋游戏
10-11
比较简单地实现了五子棋游戏，两人轮流下，判断胜负。
HTML5网页版五子棋小游戏.zip
07-04
HTML5网页版五子棋小游戏通过原生js和canvas实现五子棋小游戏，可以试下左右手互搏。
H5五子棋游戏论文
10-30
本文档只是关于H5开发五子棋游戏的论文，文档详细讲解了如何实现的。
html五子棋游戏
01-17
用html+canvas+js写的五子棋游戏，黑白棋可以轮流落子。文件内包含双人版和人机版，人机版运用到了一些智能算法。可直接在chrome上运行。
html-五子棋小游戏-源码
最新发布
09-07
这个小游戏无需安装任何客户端，只需将压缩包解压后在浏览器中打开，就能立即体验到五子棋的乐趣。 首先，HTML在这里起到了页面结构的作用。HTML（HyperText Markup Language）是网页内容的基础框架，定义了页面的...
Linux系统下c语言实现简单五子棋游戏
04-07
解压缩后得到main.c和golang.c。 将main.c和golang.c移动到Linux目录下，然后使用 gcc main.c golang.c -o golang 即可编译成功， ./golang 即可运行程序。
wuziqi.rar_五子棋小游戏_简单五子棋
09-24
本篇文章将以一个名为“five”的Java项目为例，深入探讨如何利用Java语言编写一个简单的五子棋小游戏。 1. **项目结构与文件介绍** - `Main.java`: 作为程序的入口，启动游戏界面并控制游戏流程。 - `GameBoard....
我的第一次h5 五子棋游戏作品
apzmqapzmqa的博客
07-03 1174
在这个漫长的暑假，我开始了实训，在指导老师的带领下，我们学习了html5来做五子棋。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值