经典推箱子小游戏100关(原创)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,target-densitydpi=high-dpi,user-scalable=yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="keywords" content="jQuery推箱子小游戏（100关且可扩展）,休闲,对战,娱乐,小游戏,下载即用,代码注释全（附源码）" />
<meta name="description" content="jQuery推箱子小游戏（100关且可扩展）,休闲,对战,娱乐,小游戏,下载即用,代码注释全（附源码）" />
<meta name="author" content="百年蜜蜂" />
<meta name="Copyright" content="百年蜜蜂" />
<meta name="renderer" content="webkit">
<meta name="application-name" content="推箱子小游戏" />
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>推箱子小游戏</title>
<link rel="stylesheet" href="https://www.jq22.com/demo/sokoban202212042252/css/sokoban.css" />
</head>
<body>
<div id="main-layout" class="main-layout">
<div class="container">
<div class="content">
<div class="kk_level">
第
<span>0</span>
关
</div>
<div data-sokoban></div>
<div class="controll">
<div class="kk_time">
耗时:
<span>0</span>
秒
</div>
<div class="kk_step">
步数:
<span>0</span>
步
</div>
<button type="button" class="lv-btn" id="next">下一关</button>
<button type="button" class="lv-btn" id="prev">上一关</button>
<button type="button" class="lv-btn" id="start">开始游戏</button>
<button type="button" class="lv-btn" id="jump">选关卡</button>
</div>
</div>
<div class="opt-desc">
<br />
<fieldset class="layui-elem-field layui-field-title">
<legend>游戏说明</legend>
</fieldset>
<p>经典的推箱子是一个来自日本的古老游戏，目的是在训练你的逻辑思考能力。</p>
<p>在一个狭小的仓库中，要求把木箱放到指定的位置（如绿色点），稍不小心就会出现箱子无法移动或者通道被堵住的情况，所以需要巧妙的利用有限的空间和通道，合理安排移动的次序和位置，才能顺利的完成任务。</p>
<br />
<fieldset class="layui-elem-field layui-field-title">
<legend>玩法介绍</legend>
</fieldset>
<p>
<i class="layui-icon layui-icon-fire"></i>
轻按键盘的方向键（上下左右），控制熊猫方向推动箱子。
</p>
<p>
<i class="layui-icon layui-icon-fire"></i>
或者点击熊猫的上下左右行走，点击熊猫和箱子的下一个空间推动箱子。
</p>
<br />
<fieldset class="layui-elem-field layui-field-title">
<legend>源码下载</legend>
</fieldset>
<p>
©[原创]源码：
<a href="https://github.com/lvbee/Sokoban" target="_blank">Github仓库</a>
、
<a href="https://gitee.com/lvbee/Sokoban" target="_blank">Gitee仓库</a>
、
<a href="https://www.jq22.com/jquery-info24485" target="_blank">效果预览</a>
</p>
<br />
</div>
</div>
</div>
</body>
<script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="https://www.jq22.com/demo/sokoban202212042252/js/sokoban.level.js"></script>
<script type="text/javascript" src="https://www.jq22.com/demo/sokoban202212042252/js/sokoban.js"></script>
<script type="text/javascript">
function layui_main() {
var $btn = $('#start');
var mySokoban = new Sokoban('.content', $btn, true);
mySokoban.restart();
$btn.click(function() {
mySokoban.restart();
});
$('#prev').click(mySokoban.prev);
$('#next').click(mySokoban.next);
$('#jump').click(function() {
var level = prompt("请输入1-100的关卡数：");
if (isNaN(level) || level<1 || level>100)
return mySokoban.msg('输入错误！');
mySokoban.jump(parseInt(level));
});
}
$(layui_main);
</script>
</html>
页:
[1]