html编写华容道,index.html
华容道(Klotski Puzzle)
* {
padding: 0;
}
body {
width: 360px;
background: #458588;
text-align: center;
font-family: "droid sans fallback";
font-size: 14px;
margin: auto;
}
.headline {
margin: 10px;
color: #fff;
font-size: 16px;
font-weight: bold;
}
.bar {
background: #073642;
padding: 8px 0;
}
.info {
text-align: left;
background: #eee8d5;
line-height: 30px;
margin-top: 2px;
padding: 15px;
}
.bar span,
.bar a {
color: #fff;
display: inline-block;
padding: 10px;
text-decoration: none;
}
.bar .button {
background: #93a1a1;
margin: 1px;
cursor: pointer;
}
span.strong {
font-weight: bold;
}
华容道 Klotski开始游戏
我的记录
自定义
解法管理
2019年2月底的一天，想起了小时玩的华容道，于是编写了一个华容道小游戏介绍给孩子。在编写过程中，从
href="https://en.wikipedia.org/wiki/Klotski">维基百科
查阅了很多关于华容道游戏的资料，越发感觉这个简单设计背后的神奇之处，难怪被称为“世界三大益智玩具”。加上看到国内也有一些玩家在贴吧讨论华容道。苦于华容道布局太多，无法统一命名，玩家不好描述布局及解法，因此我扩展了一些功能，便于大家分享解法，并能导入演示，而且支持自定义布局。功能说明：
1)支持键盘控制。支持方向键或“ASDW”移动块，“[，]”选择上一关、下一关。
2)我的记录，保存各关最少步数记录，并可以动画重现解法(需浏览器支持)。
3)自定义布局。布局描述：0：空白；1：小卒；2：竖将；3：横将；4：曹操。
从左到右，从上到下，依次用20个数字表示各个位置放置的类型。
例如：第1关横刀立马的布局依照如上规则表示为：
24422442233221121001
4)解法管理，记录本人的解法并支持外部解法数据导入及演示。
Flood it
一键复制
编辑
Web IDE
原始数据
按行查看
历史
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！