html实现数独(附源码)

xcLeigh

已于 2022-11-15 17:21:17 修改

阅读量3.1k

点赞数 23

分类专栏： HTML5实战案例 HTML5小游戏源码文章标签： html 前端数独

于 2022-11-15 17:13:14 首次发布

BY xcSharp@126.com

本文链接：https://blog.csdn.net/weixin_43151418/article/details/127869325

版权

HTML5实战案例同时被 2 个专栏收录

135 篇文章 108 订阅

订阅专栏

HTML5小游戏源码

14 篇文章 8 订阅

订阅专栏

文章目录

1.数独设计
2.效果和源码
- 2.1 动态效果图
- 2.2 源码
源码下载

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/127869325

html实现数独(附源码)，数独，是源自18世纪瑞士发明，流传到美国，再由日本发扬光大的一种数学游戏。是一种运用纸、笔进行演算的逻辑游戏。玩家需要根据9×9盘面上的已知数字，推理出所有剩余空格的数字，并满足每一行、每一列、每一个粗线宫内的数字均含1-9，不重复。
数独盘面是个九宫，每一宫又分为九个小格。在这八十一格中给出一定的已知数字和解题条件，利用逻辑和推理，在其他的空格上填入1-9的数字。使1-9每个数字在每一行、每一列和每一宫中都只出现一次，所以又称“九宫格”。

1.数独设计

1.1 游戏系列

已实现html小游戏系列：

1.1 主界面

html实现数独主界面，以中间为数独棋盘模式，体现数独格局。四边角落为其他游戏跳转。

请添加图片描述

1.2 等级选择界面

html实现数独，难度等级分为1-40级，如果输入其他值默认为一级。

请添加图片描述

2.效果和源码

2.1 动态效果图

满足每一行、每一列、每一个粗线宫内的数字均含1-9，不重复。视为挑战成功。
在这里插入图片描述

2.2 源码

这是主界面的代码，其他图片、js、css等代码，见下面的 源码下载，里面有所有代码和介绍。


<!-- /**
*title:html实现数独
* code url:https://blog.csdn.net/weixin_43151418
*/ -->
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="images/favicon.ico" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
	<title>xcLeigh - 数独游戏</title>
	<link rel="Stylesheet" type="text/css" href="./css/soduku.css" />
</head>
<body>
	<div class="loveFont loveTitle">
		数独小游戏
	</div>
	<div class = "btn-group">
		<span class="spanBtn" onclick = "sd.checkRes();">填写提交</span>
		<span class="spanBtn" onclick = "sd.reset();">重新开局</span>
		<span class="spanBtn" onclick = "sd.again();">清除重玩</span>
	</div>
	<div style="position:absolute;left:0;top:0; width:80px;height:80px;">
		<div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:#0F85F4;z-index:999;">
		<a href="https://blog.csdn.net/weixin_43151418/article/details/127635252" target="_blank" style="text-decoration:none; font-weight:bold">打飞机</a>
		</div>
		  <div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
		  <div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
	  </div>
	  <div style="position:absolute;right:0;top:0; width:80px;height:80px;">
		<div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:#0BABC4;z-index:999;">
			<a href="https://blog.csdn.net/weixin_43151418/article/details/127631871" target="_blank" style="text-decoration:none; font-weight:bold">贪吃蛇</a>
		</div>
		  <div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
		  <div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
	  </div>
	  <div style="position:absolute;right:0;bottom:0; width:80px;height:80px;">
		<div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:red;z-index:999;">
			<a href="https://blog.csdn.net/weixin_43151418/article/details/127619801" target="_blank" style="text-decoration:none; font-weight:bold">五子棋</a>
		</div>
		  <div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
		  <div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
	  </div>
	  <div style="position:absolute;left:0;bottom:0; width:80px;height:80px;">
		<div  style="position:absolute;left:0;bottom:0; width:80px;height:80px;text-align:center;line-height:80px;color:orange;z-index:999;">
			<a href="https://blog.csdn.net/weixin_43151418/article/details/126465393" target="_blank" style="text-decoration:none; font-weight:bold;">吃月饼</a>
		</div>
		  <div class='classScale' style='display:flex; justify-content: center; align-items: center; width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
		  <div class='classScale1' style='position:relative; top: -80px;width:80px;height:80px;border-radius:50%; opacity: 0.5;'>
		  </div>
	  </div>
	  <div  style="position:absolute;left:0;bottom:0; width:100%;height:80px; line-height:80px; text-align:center; z-index:99;">
	  <a href="https://blog.csdn.net/weixin_43151418" target="_blank" style="text-decoration:none; font-weight:bold;color:white;">xcLeigh | 星空 | 数独小游戏</a>
	  </div>
	<script src="./js/jquery.min.js"></script>
	<script src="./js/soduku.js"></script>
	<script>
		var sd = new SD;
		sd.init(30);
	</script>
</body>
</html>

源码下载

html实现数独(源码) 点击下载

💞 关注博主带你实现畅游前后端

🏰 加入社区带你体验马航不孤单

💯 神秘个人简介带你体验不一样得介绍

🎀 酷炫邀请函带你体验高大上得邀请

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌

原文地址：https://blog.csdn.net/weixin_43151418/article/details/127869325（防止抄袭，原文地址不可删除）