js+css实现数独游戏代码-html代码-BFW代码库

js+css实现数独游戏代码

代码语言：html

所属分类：游戏

代码描述：js+css实现数独游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
     <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,target-densitydpi=high-dpi,user-scalable=yes">
<style>
.layui-col-space1 {
	margin:-.5px
}
.layui-col-xs1 {
	float:left;
	position:relative;
	display:block;
	box-sizing:border-box
}
.box {
	width:300px;
	height:300px;
	margin:0 auto;
	border:8px solid #aa754f;
	position:relative;
	background:#421c0f;
	padding-bottom:3px;
	border-radius:4px;
	box-shadow:3px 3px 3px #7d4d14
}
.box .box-item.no-num div {
	background:#421c0f
}
.box .box-item div {
	border:1px solid #6d543a;
	box-sizing:border-box;
	text-align:center;
	height:100%;
	background:#e4b77c;
	box-shadow:1px 1px 1px 1px #673800;
	border-bottom:0;
	color:#8f532f;
	font-weight:bold;
	font-family:tahoma,arial,sans-serif;
	cursor:pointer
}
.start {
	width:200px;
	height:40px;
	background:#aa754f;
	box-shadow:0 3px 3px #7d4d14;
	margin:10px auto;
	display:block;
	transition:box-shadow .5s;
	color:#fff;
	border:1px solid #6d543a;
	cursor:pointer;
	font-size:17px;
	font-weight:bold;
	letter-spacing:2px
}
.start:hover {
	box-shadow:0 3px 3px #000
}
.opt-desc {
	width:320px;
	margin:20px auto;
	text-align:center
}
.opt-desc span {
	font-size:20px;
	margin-right:15px;
	color:#999
}
.opt-desc input {
	width:18px;
	height:18px;
	margin:0
}

</style>
</head>

<body>

    <div style="padding: 20px; text-align: center;">
        <div data-klotski></div>
        <div class="opt-desc"><span><input type="radio" name="radix" value="3" checked="checked" />3x3 </span><span><input type="radio" name="radix" value="4" />4x4 </span><span><input type="radio" name="radix" value="5" />5x5 </span><span><input type="radio" name="radix" value="6" />6x6 </span></div>
        <button
            type="button" class="start">开始游戏</button>
    </div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" >

function Klotski(i, d) {
    var o = this;
    var a = $(i),
        b = $(d);
    a.addClass("layui-row layui-col-space1 box");
    var p = "no-num",
        h = 3,
        m = true;
    o.init = function(r) {
        r = k(r);
        for (var q = 1; q < r * r; q++) {
            a.append('<div class="layui-col-xs1 box-item" ' + j(r) + "><div>" + q + "</div></div>")
        }
        a.append('<div class="layui-col-xs1 box-item no-num" ' + j(r) + "><div></div></div>");
        a.after('<audio src="./mp3/fall.mp3"></audio>');
        c(r)
    };
    o.restart = function(r) {
        r = k(r);
        var q = l(r);
        a.html("");
        $.each(q, function(s, t) {
            a.append('<div class="layui-col-xs1 box-item" ' + j(r) + "><div>" + t + "</div></div>")
        });
        a.append('<div class="layui-col-xs1 box-item no-num" ' + j(r) + "><div></div></div>");
        .........完整代码请登录后点击上方下载按钮下载查看