jQuery益智游戏-管道拼接【原创

来源:https://www.sucaihuo.com/js/2419.html 2017-07-14 23:38浏览(907) 收藏

一款超好玩的jQuery益智游戏-管道拼接,点击每个管道,旋转角度后完成拼接,全部拼接正确后进入下一道关卡,可点击最上面的开灯或关灯显示不同的页面效果,喜欢的童鞋请收下吧。
jQuery益智游戏-管道拼接
分类:游戏 > 益智 难易:初级
查看演示 下载资源 下载积分: 30 积分

页面的head部分,需引入两个CSS样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/reset.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分,设置好每一个关卡的内容和完成提示内容,代码如下:

<div id="toolbar"><span id="theme">关灯</span><span class="toggleCreateLevel"> 创建关卡</span> </div>
<div class="level1" data-code="1231243" data-set="e1.b.c2.c3.c1.s2.c4.e2" data-text="jQuery益智游戏-管道拼接 <br><span>点击每个管道,旋转角度后完成拼接。</span>"></div>
<div class="level2" data-code="2323114311231414" data-set="c1.c2.c4.c1.s2.c3.c1.e1.s1.e2.c1.c3.c4.c1.c2.c3"></div>
<div class="level3" data-code="42232324114122322243" data-set="e2.s1.s2.c2.c2.c1.c1.c1.s2.c2.c2.b.c2.s2.s2.c1.c1.s1.s1.c1.e2.b.b.b"></div>
<div class="level4" data-code="2222423124111111414" data-set="b.c1.s1.e1.c1.c1.c1.c2.s2.c2.c2.s2.s2.s1.e2.s1.c2.c1.c2.c2"></div>
<div class="level5" data-code="222314311113443" data-set="c2.s1.s2.c1.s2.e1.c1.s1.s1.b.s2.s2.e1.e1.c1.e1" data-text="多重管道"></div>
<div class="level6" data-code="112413123111111414" data-set="b.e1.e2.b.c2.c1.c1.c1.s1.c1.c1.s2.s1.s2.s2.s1.c2.c1.c1.c2"></div>
<div class="level7" data-code="2323141423231414" data-set="c4.c1.c3.c1.c2.c3.c4.c1.c2.c1.c3.c2.c1.c1.c2.c1" data-text="圆形"></div>
<div class="level8" data-code="222312242211314311143" data-set="c4.s1.s1.c1.c2.s2.s2.c1.b.c2.e3.e4.b.c2.c1.s2.e3.c2.s2.s1.b.c1.c2.e1"></div>
<div class="level9" data-code="222244312241123132414" data-set="b.c1.s1.e2.c2.c2.e1.c2.s1.c2.s2.c1.s1.c1.s1.c2.c1.c2.c2.c2.b.c2.c1.b"></div>
<div class="level10" data-code="122311241413422423311231223" data-set="e1.c2.s1.c4.s1.s2.c1.c3.c1.c3.c2.c4.e2.e4.c3.c2.c4.c2.e4.b.s1.c3.s2.c4.c1.s1.e2.e3"></div>
<div class="level11" data-code="432224131431121122331222" data-set="e1.c2.c1.e1.c1.c1.c1.c1.s1.e1.c2.s1.c1.e2.s2.s2.c1.e1.e1.e1.c2.s1.s2.e1"></div>
<div class="level12" data-code="42232224122311113441222" data-set="e2.s1.s2.c1.c2.s2.s1.c2.s2.c1.s2.c2.s1.s2.b.s2.s2.e2.e2.c1.c1.s2.s2.e1"></div>
<div class="level13" data-code="2221223144422231241424" data-set="c1.s1.e1.b.s2.c1.s2.c1.c1.c1.e2.c2.c1.e2.c1.c2.c2.s2.c2.s2.b.e1.s2.c1"></div>
<div class="level14" data-code="1231141442314314442333" data-set="e1.c2.c1.e2.c1.c2.c2.c2.e1.s2.c2.e1.e1.c1.c2.c1.e1.c2.c2.c2.b.b.e1.e2"></div>
<div class="level15" data-code="1223113112434323111111411224" data-set="e1.c2.s1.c2.s2.c1.c1.s2.c2.s2.c1.e1.e1.c1.c2.c1.e1.s1.s2.s2.s1.c1.c1.s2.c1.s2.s2.c1"></div>
<div class="level16" data-code="422122243123241112414224" data-set="e2.s1.e2.e1.c1.s1.s1.c2.e2.e2.c2.c1.c1.c2.s1.s2.c1.s1.c1.s2.e1.s1.s2.c1"></div>
<div id="win">
  <div class="text">第 <span>1</span> 关完成!</div>
</div>
<div id="finished">
  <div class="text">游戏完成!</div>
</div>
<div id="createLevel">
  <div class="newLevel"></div>
  <div class="stats"></div>
</div>

页面的底部,需引入jQuery库和一个JS文件,代码如下:

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/index.js"></script>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/2419.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2