效果图：
按钮触发开始
网页布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过关小游戏</title>
<link href="css/style.css" rel="stylesheet"/>
<link rel="stylesheet" href="js/jquery-ui.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/play.js"></script>
<script src="js/jquery-ui.js"></script>
</head>
<body class="bg2">
<!-- 放关卡和主菜单的盒子 -->
<div class="set-text">
<h2 class="play-title">关卡1</h2>
<a href="index.html">主菜单</a>
</div>
<!-- 中间的按钮 -->
<a href="javascript:void(0);" class="btnClick"></a>
<!-- 下半部分放棍子，英雄，柱子的盒子 -->
<div class="container">
<!-- 放棍子 -->
<div class="stick"></div>
<!-- 放英雄 -->
<div class="man">
<img src="img/stick_stand.png"/>
</div>
<!-- 放柱子 -->
<div class="well-box"></div>
</div>
<!-- 成功或失败时的弹框 -->
<div class="dialog" style="display:none">
<!-- 放提示文字 -->
<p class="name"></p>
<!-- 放按钮 -->
<p class="dialog-btn" style="cursor:pointer"></p>
</div>
<!--积分-->
<div class="score">积分为：<span>0</span>分</div>
<div class="loser">亲，你太菜了，无法使用积分系统</div>
<div class="shop">商店</div>
<div class="cart">
<h4 class="head">商店页面</h4>
<span class="close">❌</span>
<div>原地复活 x 1 <span class="s3">10积分</span><span id="buy1">购买</span></div>
<div>飞天挂 x 1 <span class="s3">100积分</span><span id="buy2">购买</span></div>
<span id="money">您的积分为：<span>0</span>分</span>
</div>
<div class="myThing">道具</div>
<div class="thing">
<p>原地复活：<span id="live">0</span>个<span class="s1">使用</span></p>
<p>浮空挂： <span id="fly">0</span>个<span class="s2">使用</span></p>
</div>
<div class="times">浮空挂计时40秒：<span>0</span>秒</div>
</body>
</html>
css样式：
*{padding:0;margin:0;}
body,html{font-family:"Microsoft YaHei",SimHei,"微软雅黑";background-size:cover !important; }
.bg1{background:url(../img/01.jpg) no-repeat;}
.bg2{background:url(../img/02.jpg) no-repeat;}
.bg3{background:url(../img/03.jpg) no-repeat;}
.bg4{background:url(../img/04.jpg) no-repeat;}
.bg5{background:url(../img/05.jpg) no-repeat;}
.bg6{background:url(../img/06.jpg) no-repeat;}
.bg7{background:url(../img/07.jpg) no-repeat;}
.bg8{background:url(../img/08.jpg) no-repeat;}
.bg9{background:url(../img/09.jpg) no-repeat;}
.bg10{background:url(../img/010.jpg) no-repeat;}
.bg11{background:url(../img/011.jpg) no-repeat;}
.bg12{background:url(../img/012.jpg) no-repeat;}
.bg13{background:url(../img/013.jpg) no-repeat;}
.bg14{background:url(../img/014.jpg) no-repeat;}
.bg15{background:url(../img/015.jpg) no-repeat;}
.bg16{background:url(../img/016.jpg) no-repeat;}
.bg17{background:url(../img/017.jpg) no-repeat;}
.bg18{background:url(../img/018.jpg) no-repeat;}
.bg19{background:url(../img/019.jpg) no-repeat;}
.bg20{background:url(../img/020.jpg) no-repeat;}
/**主页样式**/
.title{
font-size:32px;
text-align:center;
color:#000;
margin:50px 0 100px;
letter-spacing:5px;
}
.main{
width:500px;
margin:0 auto;
}
.main a,.gameDialog .close{
display:block;
width:150px;
height:40px;
line-height:40px;
text-align:center;
border:2px #75db31 solid;
text-decoration:none;
font-size:18px;
color:#000;
margin-top:11px;
border-radius:8px;
box-shadow:0 0 0 2px #fff inset;
background:linear-gradient(180deg,#eef8e8,#67c330);
}
.main a:hover{
border-color:#afeb85;
background:linear-gradient(180deg,#fff,#afeb85);
}
/**游戏说明弹框**/
.gameDialog{
position:absolute;
padding:20px;
width:480px;
height:447px;
line-height:1.6;
font-size:16px;
color:#000;
background:#fff;
z-index:9;
left:50%;
top:50%;
margin:-240px 0 0 -240px;
}
.
.gameDialog .info{
height:400px;
overflow:auto;
}
.info span{
color: red;
}
.gameDialog .close{
margin-left:150px;
border-color:#3d92b6;
background:linear-gradient(180deg,#ecf6f9,#59acd0);
}
.gameDialog .close:hover{
border-color:#6fb4d0;
background:linear-gradient(180deg,#fff,#97cbe1);
}
.shadow{
position:absolute;
background:#000;
left:0;
top:0;
/*filter:alpha(opacity="50");*/
-moz-opacity:0.5;
opacity:0.5;
z-index:8;
}
/**游戏界面**/
.set-text{
position:relative;
text-align:center;
margin-top:20px;
}
.play-title{
display:inline-block;
padding:6px 40px;
border-radius:8px;
font-size:20px;
margin-left:25px;
border:1px #666 solid;
background:rgba(255,255,255,0.8);
}
.set-text a{
position:absolute;
top:2px;
right:30%;
display:block;
width:100px;
height:36px;
line-height:36px;
font-size:16px;
color:#000;
border:1px #ee7700 solid;
text-decoration:none;
border-radius:18px;
box-shadow:0 0 0 3px #feb367;
background:linear-gradient(to bottom right,#fff,#feb367);
}
.btnClick{
display:block;
width:100px;
height:105px;
background:url(../img/btn-bg.png) no-repeat;
margin-left:60%;
margin-top:68px;
}
.btnDown{
background:url(../img/btn-bg-click.png) no-repeat;
}
.container{
position:fixed;
bottom:0;
left:0;
height:35%;
width:100%;
}
.stick{
position:absolute;
left:100px;
bottom:100%;
height:5px;
width:0;
background:#096;
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /*IE9*/
-moz-transform:rotate(-90deg); /*Firefox*/
-webkit-transform:rotate(-90deg); /*Ssfari and Chrome*/
-o-transform:rotate(-90deg); /*Opera*/
transform-origin:0 100%;
-ms-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-webkit-transform-origin:0 100%;
-o-transform-origin:0 100%;
transition:transform 0.35s linear;
-moz-transition:transform 0.35s linear;
-webkit-transition:transform 0.35s linear;
-o-transition:transform 0.35s linear;
}
.stickDown{
transform:rotate(0deg);
-ms-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
}
.man{
position:absolute;
left:50px;
bottom:98%;
width:65px;
height:97px;
}
.man img{
position:absolute;
left:0;
top:0;
transition:transform 0.35s linear;
-moz-transition:transform 0.35s linear;
-webkit-transition:transform 0.35s linear;
-o-transition:transform 0.35s linear;
}
.man img.rotate{
transform:translate(0px,300px);
-ms-transform:translate(0px,300px);
-moz-transform:translate(0px,300px);
-webkit-transform:translate(0px,400px);
-o-transform:translate(0px,300px);
transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
}
.well-box{
position:absolute;
height:100%;
width:100%;
}
.well{
position:absolute;
height:100%;
background:#000;
}
/**设置弹框样式**/
.dialog{
position:fixed;
width:480px;
left:50%;
margin-left:-240px;
top:250px;
padding-bottom:25px;
background:#3d3d3d;
z-index:5;
box-shadow:3px 3px 2px rgba(0,0,0,.5);
}
.dialog p{
padding:0 20px;
color:#fff;
font-size:24px;
margin-top:15px;
line-height:1.8;
}
.dialog p.dialog-btn{
text-align:center;
font-size:16px;
margin-top:60px;
}
.dialog-btn a{
display:inline-block;
width:130px;
height:35px;
line-height:35px;
color:#000;
background:#cccdcd;
border-radius:10px;
margin-right: 20px;
text-decoration:none;
}
.dialog-btn a.play-agin{
margin-right:20px;
}
.score{
width: 150px;
height: 100px;
color: #333333 !important;
font-size: 15px !important;
border-radius: 20px;
border: 1px solid darkred;
position: absolute;
right: 70px;
top: 80px;
background-color: #f0f0f0;
text-align: center;
display: none;
}
.score span{
width: 150px;
height: 100px;
line-height: 100px;
color: red;
font-size: 15px;
}
.loser{
width: 500px;
font-size: 30px;
color: hotpink;
position: absolute;
left: 130px;
top: 180px;
}
.shop{
width: 100px;
height: 35px;
line-height: 35px;
text-align: center;
background-color: #FFFFFF;
color: #333333;
font-size: 14px;
border-radius: 12px;
border: 1px solid #3e3e3e;
position: absolute;
right: 70px;
top: 20px;
cursor: pointer;
}
.shop:hover{
background-color: pink;
color: #FFFFFF;
}
.cart{
width: 350px;
height: 200px;
border: 1px solid #999999;
border-radius: 10px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -175px;
margin-top: -100px;
background-color: #FFFFFF;
display: none;
z-index: 10;
}
.cart .close{
display: block;
width: 25px;
height: 30px;
position: absolute;
right: 5px;
top: 5px;
cursor: pointer;
}
.cart h4{
text-align: center;
padding: 10px 0px;
}
.cart div #buy1,#buy2{
position: relative;
display: block;
width: 50px;
height: 25px;
line-height: 25px;
border-radius: 5px;
text-align: center;
background-color: white;
color: #DB192A;
font-size: 14px;
float: right;
cursor: pointer;
}
.cart div{
width: 330px;
height: 25px;
padding: 0px 10px;
line-height: 25px;
margin: 12px 0px;
color: #3e3e3e;
font-size: 15px;
}
.cart div #buy1:hover,#buy2:hover{
background-color: #DB192A;
color: #FFFFFF;
}
#money{
display: block;
width: 330px;
height: 25px;
line-height: 25px;
color: #3e3e3e;
font-size: 15px;
text-align: right;
position: absolute;
bottom: 10px;
}
#money span{
color: #DB192A;
}
.myThing{
width: 100px;
height: 35px;
line-height: 35px;
text-align: center;
background-color: #FFFFFF;
color: #333333;
font-size: 14px;
border-radius: 12px;
border: 1px solid #3e3e3e;
position: absolute;
left: 30px;
top: 20px;
cursor: pointer;
}
.myThing:hover{
background-color: pink;
color: #FFFFFF;
}
.thing{
width: 200px;
height: 80px;
background-color: #fff;
padding-top: 20px;
border: 1px solid #333333;
border-radius: 8px;
position: absolute;
left: -202px;
top: 57px;
}
#live,#fly{
color: cornflowerblue;
}
.thing p{
padding: 0px 15px;
color: #3e3e3e;
height: 25px;
line-height: 25px;
font-size: 14px;
margin-bottom: 5px;
}
.thing p .s1,.s2{
display: block;
width: 40px;
height: 25px;
line-height: 25px;
border-radius: 5px;
text-align: center;
background-color: white;
color: #DB192A;
font-size: 14px;
float: right;
cursor: pointer;
}
.s3{
color: orange !important;
}
.head{
cursor: move;
}
.thing p .s1:hover,.s2:hover{
background-color: #DB192A;
color: #FFFFFF;
}
.times{
width: 200px;
height: 30px;
line-height: 30px;
color: #DB192A;
font-size: 18px;
font-weight: bold;
position: absolute;
left: 160px;
top: 22px;
display: none;
}
js代码：
$(function () {
//一、生成柱子 思路：设置柱子的宽度，一次性的创建柱子并添加到盒子里
var wellWidth = 100;
var dvWidth = 0;//纪录传过来的宽度
//创建一个随机颜色数组
var arrColor = ["red","firebrick","blue","hotpink","SteelBlue","orangered","green","purple","Magenta","Sienna","gold","pink","LemonChiffon"];
//3.设置柱子之间的最大间隙和最小间隙
var min = 70;
// 最大间隙：放柱子的盒子离窗口顶部的距离
var max = $(".container").offset().top;
var score = 0;//纪录分数
var pass = 1;//纪录第几关
var open = true;//纪录什么时候生成
var maxDv = 0;//获取最后一个柱子得距离
var leftOffset = 0;//获取生成后一个柱子的距离
var time;
var moneys = false;//浮空挂
var finsh = true;
//封装柱子
function well(width) {
flag = true;
open = true;
dvWidth = width || wellWidth;
//随机颜色
var color1 = parseInt(Math.random()*13);
var color2 = parseInt(Math.random()*13);
var color3 = parseInt(Math.random()*13);
var color4 = parseInt(Math.random()*13);
setInterval(function () {
$(".loser").fadeOut(100);
},600);
setInterval(function () {
$(".loser").fadeIn(100);
},600)
//第二关显示
if (dvWidth < 100){
$(".loser").remove();
$(".score").show();
}
//1.随机换背景图片
var bgColor = Math.ceil(Math.random() * 19 + 1);
$("body").removeClass().addClass("bg"+bgColor);
//2.动态的创建第一个柱子
$("<div class='well' style='width:"+dvWidth+"px;background-color: "+arrColor[color3]+"'></div>").appendTo($(".well-box"));
//4.设置第二根柱子的left的值
var leftWell2 = dvWidth + parseInt(Math.random()*(max-min) + min);
//5.生成第二根柱子
$("<div class='well' style='width:"+dvWidth+"px;left: "+leftWell2+"px;background-color: "+arrColor[color1]+"'></div>").appendTo($(".well-box"));
//6.设置第三根柱子的left的值：第二根的left值+柱子的宽度+随机left值
var leftWell3 = leftWell2 + dvWidth + parseInt(Math.random()*(max-min) + min);
//7.生成第三根柱子
$("<div class='well' style='width:"+dvWidth+"px;left: "+leftWell3+"px;background-color: "+arrColor[color2]+"'></div>").appendTo($(".well-box"));
var leftWell4 = leftWell3 + dvWidth + parseInt(Math.random()*(max-min) + min);
//7.生成第四根柱子
$("<div class='well' style='width:"+dvWidth+"px;left: "+leftWell4+"px;background-color: "+arrColor[color3]+"'></div>").appendTo($(".well-box"));
if (pass >= 2){
for (var i = 0;i < 2;i++){
maxDv = $(".well:last").css("left");
leftOffset = parseInt(maxDv) + dvWidth + parseInt(Math.random()*(max-min) + min);
$("<div class='well' style='width:"+dvWidth+"px;left: "+leftOffset+"px;background-color: "+arrColor[color4]+"'></div>").appendTo($(".well-box"));
}
}
}
well();
//二、鼠标按下不动，棍子长出来，控制的就是棍子的宽度
//设置开关
var flag = true;
$(".btnClick").mousedown(function () {
if (flag){
clearTimeout(time)
maxDv = $(".well:last").css("left");
var max = $(".container").offset().top;
$(this).addClass("btnDown");
$(".thing").stop().animate({left:-202},1200);
$(".cart").fadeOut();
$(".stick").stop().animate({width:max},2000);
if (dvWidth < 100){
var color5 = parseInt(Math.random()*13);
leftOffset = parseInt(maxDv) + dvWidth + parseInt(Math.random()*(max-min) + min);
$("<div class='well' style='width:"+dvWidth+"px;left: "+leftOffset+"px;background-color: "+arrColor[color5]+"'></div>").appendTo($(".well-box"));
}
}
})
$(".btnClick").mouseup(function () {
if (finsh){
flag = false;
clearTimeout(time)
$(this).removeClass("btnDown");
$(".stick").stop();
$(".stick").addClass("stickDown");
//调用小人跑起来的函数
moveMan();
finsh = false;
}
})
//三、封装小人跑起来的函数
var index = 0;//纪录柱子的索引号
var letfMax = 0; //纪录每一次的左边的距离
function moveMan() {
//为了显示效果合理
time = setTimeout(function () {
//1.把站立的小人换成跑动的图片
$(".man img").attr("src","img/stick.gif");
//2.改变left值:获取棍子的宽度
var stickWidth = $(".stick").width();
$(".man img").stop().animate({left:stickWidth + letfMax},1500,function () {
//3.判断小人挑战成功还是失败
//挑战失败：棍子的宽度小于两个柱子之间的距离 或大于两个柱子之间的距离 + 柱子的宽度
//两个柱子之间的距离：后一个柱子的left的值 - 前一个柱子的宽度
var space = $(".well").eq(index+1).offset().left - dvWidth;
//判断开挂了没有
if (moneys){
noFun();
} else {
if (stickWidth < space || stickWidth > (space + dvWidth)){
//调用挑战失败的函数
fail();
}else {
noFun();
}
}
});
},600)
//四、封装挑战失败的函数
var arrTxt = [
"志在峰巅的攀登者，不会陶醉在沿途的某个脚印之中。",
"海浪为劈风斩浪的航船饯行，为随波逐流的轻舟送葬。",
"人生最重要的一点是，永远不要迷失自己。",
"一个人承受孤独的能力有多大，他的能力就有多大。",
"实力塑造性格，性格决定命运。",
"普通人成功并非靠天赋，而是靠把寻常的天资发挥到不寻常的高度。",
"对于强者，要关注他们的灵魂，对于弱者，他关注他们的生存。",
"积极的人在每一次忧患中都看到一个机会，而消极的人则在每个机会都看到某种忧患。",
"成功不是将来才有的，而是从决定去做的那一刻起，持续累积而成。",
"当你感到悲哀痛苦时，最好是去学些什么东西。学习会使你永远立于不败之地。",
"有的人一生默默无闻，有的人一生轰轰烈烈，甚至千古流芳，为什么会这样？因为默默无闻的人只是满足于现状，而不去想怎么轰轰烈烈过一生，不要求自己，去做，去行动，怎么能够成功？",
"人性最可怜的就是：我们总是梦想着天边的一座奇妙的玫瑰园，而不去欣赏今天就开在我们窗口的玫瑰。",
"在人生的道路上，即使一切都失去了，只要一息尚存，你就没有丝毫理由绝望。因为失去的一切，又可能在新的层次上复得。",
"没有一劳永逸的开始；也没有无法拯救的结束。人生中，你需要把握的是：该开始的，要义无反顾地开始；该结束的，就干净利落地结束。",
"生命的奖赏远在旅途终点，而非起点附近。我不知道要走多少步才能达到目标，踏上第一千步的时候，仍然可能遭到失败。但我不会因此放弃，我会坚持不懈，直至成功",
"不要认为只要付出就一定会有回报，这是错误的。学会有效地工作，这是经营自己强项的重要课程。",
"苦心人天不负，卧薪尝胆，三千越甲可吞吴。有志者事竞成，破釜沉舟，百二秦川终属楚。",
"生命本身是一个过程，成功与失败只是人生过程中一些小小的片段，若果把生命与成功或失败联系在一起，生命将失去本身该有的意义。",
"我们不要哀叹生活的不幸，诅咒命运的不公。在命运面前，我们要做强者，掐住命运的咽喉，叩问命运，改变命运。",
"努力和效果之间，永远有这样一段距离。成功和失败的唯一区别是，你能不能坚持挺过这段无法估计的距离。"
];
var txtIndex = parseInt(Math.random() * 20);
function fail() {
//1.小人跳下去，rotate的类选择器
$(".man img").addClass("rotate");
//2.棍子的宽度为0，移除stickDown样式
$(".stick").width(0).removeClass("stickDown");
setTimeout(function () {
//3.显示弹框
$(".man img").hide();
$(".dialog").fadeIn();
//4.给弹框添加失败的文本内容
$(".name").html(arrTxt[txtIndex]);
$(".dialog-btn").html("<a href='play.html' >再来一次</a>")
},500)
}
var arrTxt1 = [
'勇敢坚毅真正之才智乃刚毅之志向。 —— 拿破仑',
'志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚',
'骏马是跑出来的，强兵是打出来的。',
'只有登上山顶，才能看到那边的风光。',
'如果惧怕前面跌宕的山岩，生命就永远只能是死水一潭。',
'平时没有跑发卫千米，占时就难以进行一百米的冲刺。',
'梯子的梯阶从来不是用来搁脚的，它只是让人们的脚放上一段时间，以便让别一只脚能够再往上登。',
'没有激流就称不上勇进，没有山峰则谈不上攀登。',
'真正的才智是刚毅的志向。 —— 拿破仑',
'山路曲折盘旋，但毕竟朝着顶峰延伸。',
'只有创造，才是真正的享受，只有拚搏，才是充实的生活。',
'敢于向黑暗宣战的人，心里必须充满光明。',
'种子牢记着雨滴献身的叮嘱，增强了冒尖的勇气。',
'自然界没有风风雨雨，大地就不会春华秋实。',
'只会幻想而不行动的人，永远也体会不到收获果实时的喜悦。',
'勤奋是你生命的密码，能译出你一部壮丽的史诗。',
'对于攀登者来说，失掉往昔的足迹并不可惜，迷失了继续前时的方向却很危险。',
'奋斗者在汗水汇集的江河里，将事业之舟驶到了理想的彼岸。',
'忙于采集的蜜蜂，无暇在人前高谈阔论。',
'勇士搏出惊涛骇流而不沉沦，懦夫在风平浪静也会溺水。'
];
//五、封装小人成功的函数
function success() {
flag = false;
//把弹窗显示出来
$(".dialog").fadeIn();
//给弹窗添加文本内容
$(".name").html(arrTxt1[txtIndex]);
$(".dialog-btn").html("<a href='play.html' >再来一次</a><a class='play-agin' href='javascript:void(0);' >下一关</a>")
//调用下一关函数
nextGame();
}
//小人没掉下去时执行的函数
function noFun(){
finsh = true;
//挑战成功
//1.把小人换成站立的图片
$(".man img").attr("src","img/stick_stand.png");
//2.棍子初始化：棍子的宽度为0，移除stickDown样式
$(".stick").width(0).removeClass("stickDown");
//3.柱子盒子整体移动animate，移动完之后跑下一个柱子 index++
var leftAll = $(".well").eq(index + 1).offset().left;
letfMax += leftAll;
$(".container").stop().animate({left:"-"+letfMax},1200,function () {
flag = true;
// $(".man img").stop().animate({"left":letfMax},300);
//小人恢复初始位置
$(".man img").hide().delay(80).fadeIn(400).css("left",letfMax);
//棍子恢复初始位置
$(".stick").css("left",letfMax + dvWidth);
//添加分数:第二关后才纪录分数
//每一关能通关的分值
var scoreArr = [10,20,30,50,80,100,130,160,230];
// var scoreArr = [2,4,6,8,10,12,14,16,18];
if (dvWidth < 100){
var ss = parseInt(Math.random()*2 + 1);
score += ss;
$(".score span").html(score);
$("#money span").html(score);
}
index ++;
if (index == $(".well").length - 1 || score >= scoreArr[Math.abs(pass - 2)]){
success();
}
});
}
}
//六、封装下一关按钮函数
var x = 0;
function nextGame() {
x += 5;
$(".play-agin").click(function () {
pass ++;
if (pass > 10){
//把弹窗显示出来
$(".dialog").fadeIn();
//给弹窗添加文本内容
$(".name").html("恭喜您，您是世界上第二个通关了");
$(".dialog-btn").html("<a href='play.html' >再来一次</a>")
}else {
var ranWidth = dvWidth - 10;
$(".play-title").text("关卡"+pass);
//隐藏弹窗
$(".dialog").fadeOut();
//初始化小人
$(".man").css("left",(ranWidth/2) - x);
$(".man img").css({left:0,top:0})
//初始化棍子
$(".stick").css({"bottom":100+"%","left":ranWidth});
//打开开关
//把放柱子的盒子初始化
$(".container").css("left",0);
//把index值初始化
index = 0;
//储存的距离清空
letfMax = 0;
//清除原来的柱子
$(".well-box").empty();
//重新生成柱子
well(ranWidth);
}
})
}
//显示商店
$(".shop").click(function () {
$(".cart").fadeIn();
})
//关闭商店
$(".close").click(function () {
$(".cart").fadeOut();
})
//显示道具栏
$(".myThing").click(function () {
$(".thing").stop().animate({left:1},1000);
})
//买东西
var sum = $("#live").html();
var cun = $("#fly").html();
//购买原地复活
$("#buy1").click(function () {
score -= 10;
if (score >= 0){
sum ++;
$("#money span").html(score);
$(".score span").html(score);
$("#live").html(sum);
}else {
alert("积分不足！");
}
})
//购买浮空挂
$("#buy2").click(function () {
score -= 100;
if (score >= 0){
cun ++;
$("#money span").html(score);
$(".score span").html(score);
$("#fly").html(cun);
} else {
alert("积分不足！");
}
})
//使用道具
//原地复活
$(".s1").click(function () {
sum --;
if (sum >= 0) {
flag = true;
$("#live").html(sum);
//设置小人和棍子的位置
//隐藏弹窗
$(".dialog").fadeOut();
//设置小人的样式和位置
$(".man img").attr("src","img/stick_stand.png");
$(".man img").removeClass("rotate");
$(".man img").show().delay(80).fadeIn(400).css("left",letfMax);
//棍子恢复初始位置
$(".stick").show().css("left",letfMax + dvWidth);
}else {
alert("道具不足！");
}
})
//浮空挂
var timeSum = 0;
$(".s2").click(function () {
cun --;
if (cun >= 0){
$("#fly").html(cun);
moneys = true;
$(".times").fadeIn();
//开挂的时间
var time = setInterval(function () {
timeSum ++;
timeSum = timeSum < 10 ? "0"+timeSum : timeSum;
$(".times span").html(timeSum);
//时间到执行的函数
if (timeSum == 40){
clearInterval(time);
$(".times").fadeOut();
}
},1000)
setTimeout(function () {
moneys = false;
},40000)
} else {
alert("道具不足！");
}
})
//设置指定拖动的区域
$(".cart").draggable({
handle:".head",
containment:"window"
});
})
2995
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
