英雄难过棍子关小游戏可以带大家熟悉jquery动画
看源码
index.js:
$(function(){
var newNode=$("<div class='shadow'></div><div class='dialog'><p>游戏说明：<br /> 1、该游戏为一款好玩的闯关挑战类游戏，可以锻炼玩家的判断力，提高玩家的敏捷思维能力。<br /> 2、可以选择闯关模式或者挑战模式开始游戏。进入闯关模式后点击上方按钮可选择已解锁的关卡。<br /> 3、闯关模式总共有十个关卡，每通过一个关卡，游戏难度会逐渐增大。如果玩家玩通关闯关模式，会获得W币奖励。 <br /> 4、挑战模式会计算积分，玩家可以在线存档，也可以提交自己的积分来查看自己的排行。<br /> 5、本游戏引入了金币机制，即W币，初始金币为3个，玩家可以通过每日签到(+1 W币，连续签到从第二天起+2 W币)和完成每日的挑战任务(随机+7或8或9W币)或玩通关闯关模式(随机+10或11或12 W币)来获得W币，W币可以用来购买道具。本游戏目前含有四种道具，分别是原地复活道具、水波特效道具、蝴蝶跟随鼠标特效道具和下雪特效道具。原地复活道具只可以在挑战模式使用，其它三种道具均为特效道具，每次购买后有七天使用期限，七天后需再次购买才可继续使用。</p><button class='back1'>返回</button></div> ");
$(".intro").click(function(){
$(".contain").after(newNode);
$(".shadow").css("height",$(window).height());
})
$(".dialog>button").live("click",function(){//live可以绑定动态添加元素，on在1.9版本之前不可以
$(".dialog").remove();
$(".shadow").remove();
})
})
index.css
*{
margin:0;padding:0;list-style: none;text-decoration:none;
}
body{
background: url('../img/3.jpg');
}
h3{
/*background: pink;*/display: block;text-align: center;margin-top:50px;font-size: 20px;
}
.contain{
width:500px;/*background: red;*/position: absolute;left:50%;margin-left:-200px;
}
.contain a{
width:130px;height:36px;text-align: center;line-height: 36px;display: block;
border:3px solid #67C330;margin-top:100px;color: black;border-radius:8px;background:
linear-gradient(180deg,white,#67C330);
}
.shadow{
width:100%;position: absolute;top:0;background: rgba(0,0,0,0.5);
}
.dialog{
width:500px;position: absolute;background: white;left:50%;margin-left: -240px;margin-top:20px;
}
.dialog p{
height:300px;overflow: scroll;padding:20px;
}
.dialog button{
width:130px;height:36px;border:2px solid #3D92B6;background: linear-gradient(180deg,white,#3D92B6);
margin:50px auto 20px;display: block;border-radius: 8px;box-shadow: 0 0 0 3px white inset;
cursor: pointer;
}
zhuye.css
*{
margin:0;padding:0;list-style: none;text-decoration: none;
}
body{
background:url('../img/19.jpg');
}
.nav1{
/*background: pink;*/text-align: center;margin:50px auto;
}
.gq{
width:150px;height:36px;background: white;display: inline-block;text-align: center;
line-height: 36px;border:1px solid black;border-radius: 8px;margin-left:100px;
}
.caidan{
background:linear-gradient(to right bottom,white,#EEB071);width:150px;height:36px;
display: inline-block;text-align: center;line-height: 36px;border:#EE7700 solid 1px;
box-shadow: 0 0 2px 3px #EE7700;margin-left:100px;border-radius:8px;color:black;
}
.btn{
display: block;width:100px;height: 100px;background: url('../img/btn-bg.png');margin-left:55%;
}
.contain{
/*background:pink;*/position: fixed;bottom:0;height:250px;width:100%;
}
.pillarbox>div{
width:100px;height:250px;background: yellow;position: absolute;bottom:0;
}
.man{
position: absolute;bottom:98%;left:50px;
}
.stick{
width:5px;height:0;background: green;position: absolute;bottom:250px;left:95px;
}
.success,.fail{
width:400px;background: rgba(0,0,0);color:white;padding:10px;position: absolute;
left:50%;margin-left:-200px;margin-top:50px;text-align:center;z-index: 2;
border-radius: 10px;box-shadow: 2px 2px 0px 2px rgba(0,0,0,0.5); display: none;
}
.success>p,.fail>p{
font-size: 18px;
}
.success>button,.fail>button{
margin-top:50px;font-size: 18px;padding:5px;width:130px;height:36px;background: white;
border-radius: 8px;
}
.shadow{
width:100%;background:red;opacity: 0.5;position: absolute;top:0;
}
.stickdown{
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform-origin:5px 100%;
transition:transform 0.35s linear;
}
下面是主要学习jquery知识点包括动画的知识：
zhuye.js
$(document).ready(function(){
var stop=true;//定义一个标签
var ind=0;
var min=60;
var max=$(".contain").offset().top-min//offset()获取对象left和top值 top是offset()的top属性
console.log(max)
// 排列柱子的函数
function play(){
var num=0;
for(var i=0;i<4;i++){
var par=parseInt(Math.random()*(max-min)+min);
if(i==0){
$(".pillarbox>div").eq(0).css("left",0);
}else{
num=num+par+100;
$(".pillarbox>div").eq(i).css("left",num);
}
}
}
play();//执行排列柱子的函数
// 鼠标点击按钮
$(".btn").mousedown(function(){
if(stop){
$(".btn").css("background","url(img/btn-bg-click.png)")//点击按钮 背景变成灰色
$(".stick").animate({"height":max},2500);//点击按钮 杆子增长
}
})
// 鼠标点击按钮
// 鼠标松开按钮
$(".btn").mouseup(function(){
if(stop){
stop=false;
$(".btn").css("background","url(img/btn-bg.png)")//松开按钮 恢复正常颜色
$(".stick").stop(false,false).addClass('stickdown');//松开按钮 杆子停止动画
setTimeout(function(){
$(".man>img").attr("src","img/stick.gif");
var stickleft=parseInt($(".stick").css("left"));//string 获取杆子的left值
console.log(typeof(stickleft))//num
var stickheight=$(".stick").height();//height()方法获得或设置对象的高度
console.log(typeof(stickheight))//num
var nextdivleft=parseInt($(".pillarbox>div").eq(ind+1).css("left"))
$(".man").animate({"left":stickleft+stickheight},1000,function(){//回调函数，是否掉下
if(stickleft+stickheight>nextdivleft&&stickleft+stickheight<nextdivleft+100){
$(".man").css("left",nextdivleft+50);//小人left值在下一根柱子的50px处
$(".man>img").attr("src","img/stick_stand.png");//小人变成静态
$(".stick").css({"left":nextdivleft+95,"height":0}).removeClass("stickdown");
$(".contain").animate({"left":-nextdivleft},1000);//柱子整体左移
stop=true;
ind++;
if(ind==3){
$(".success").show();
success();
}
}else{//否则小人掉下去
$(".man").animate({"bottom":-$(".man").height()},1000,fail)
$(".shadow").css("height",$(window).height());
}
});
},1000)
}
})
// 鼠标松开按钮
// replay按钮
$(".replay").click(function(){
replay();
})
function replay(){
play();
$(".success").hide();
$(".fail").hide();
$(".stick").css({"left":95,"height":0}).removeClass("stickdown");
$(".contain").css("left",0);
$(".man").css({"left":50,"bottom":'98%'});
$(".man>img").attr("src","img/stick_stand.png");
$(".shadow").css("height",0);
stop=true;
ind=0;
}
// 下一关 next
var leval=1;
$(".next").click(function(){
$(".gq").html("关卡"+(++leval));
replay();
})
// 成功名言
function success(){
var successarr=[
'勇敢坚毅真正之才智乃刚毅之志向。 —— 拿破仑',
'志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚',
'骏马是跑出来的，强兵是打出来的。',
'只有登上山顶，才能看到那边的风光。',
'如果惧怕前面跌宕的山岩，生命就永远只能是死水一潭。',
'平时没有跑发卫千米，占时就难以进行一百米的冲刺。',
'梯子的梯阶从来不是用来搁脚的，它只是让人们的脚放上一段时间，以便让别一只脚能够再往上登。',
'没有激流就称不上勇进，没有山峰则谈不上攀登。',
'真正的才智是刚毅的志向。 —— 拿破仑',
'山路曲折盘旋，但毕竟朝着顶峰延伸。',
'只有创造，才是真正的享受，只有拚搏，才是充实的生活。',
'敢于向黑暗宣战的人，心里必须充满光明。',
'种子牢记着雨滴献身的叮嘱，增强了冒尖的勇气。',
'自然界没有风风雨雨，大地就不会春华秋实。',
'只会幻想而不行动的人，永远也体会不到收获果实时的喜悦。',
'勤奋是你生命的密码，能译出你一部壮丽的史诗。',
'对于攀登者来说，失掉往昔的足迹并不可惜，迷失了继续前时的方向却很危险。',
'奋斗者在汗水汇集的江河里，将事业之舟驶到了理想的彼岸。',
'忙于采集的蜜蜂，无暇在人前高谈阔论。',
'勇士搏出惊涛骇流而不沉沦，懦夫在风平浪静也会溺水。'
];
var num2=parseInt(Math.random()*19);
$(".success>p").html(successarr[num2]);
$(".shadow").css("height",$(window).height());
}
// 失败名言
function fail(){
var failarr=[
'志在峰巅的攀登者，不会陶醉在沿途的某个脚印之中。',
'海浪为劈风斩浪的航船饯行，为随波逐流的轻舟送葬。',
'人生最重要的一点是，永远不要迷失自己。',
'一个人承受孤独的能力有多大，他的能力就有多大。',
'实力塑造性格，性格决定命运。',
'普通人成功并非靠天赋，而是靠把寻常的天资发挥到不寻常的高度。',
'对于强者，要关注他们的灵魂，对于弱者，他关注他们的生存。',
'积极的人在每一次忧患中都看到一个机会，而消极的人则在每个机会都看到某种忧患。',
'成功不是将来才有的，而是从决定去做的那一刻起，持续累积而成。',
'当你感到悲哀痛苦时，最好是去学些什么东西。学习会使你永远立于不败之地。',
'有的人一生默默无闻，有的人一生轰轰烈烈，甚至千古流芳，为什么会这样？因为默默无闻的人只是满足于现状，而不去想怎么轰轰烈烈过一生，不要求自己，去做，去行动，怎么能够成功？',
'人性最可怜的就是：我们总是梦想着天边的一座奇妙的玫瑰园，而不去欣赏今天就开在我们窗口的玫瑰。',
'在人生的道路上，即使一切都失去了，只要一息尚存，你就没有丝毫理由绝望。因为失去的一切，又可能在新的层次上复得。',
'没有一劳永逸的开始；也没有无法拯救的结束。人生中，你需要把握的是：该开始的，要义无反顾地开始；该结束的，就干净利落地结束。',
'生命的奖赏远在旅途终点，而非起点附近。我不知道要走多少步才能达到目标，踏上第一千步的时候，仍然可能遭到失败。但我不会因此放弃，我会坚持不懈，直至成功！',
'不要认为只要付出就一定会有回报，这是错误的。学会有效地工作，这是经营自己强项的重要课程。',
'苦心人天不负，卧薪尝胆，三千越甲可吞吴。有志者事竞成，破釜沉舟，百二秦川终属楚。',
'生命本身是一个过程，成功与失败只是人生过程中一些小小的片段，若果把生命与成功或失败联系在一起，生命将失去本身该有的意义。',
'我们不要哀叹生活的不幸，诅咒命运的不公。在命运面前，我们要做强者，掐住命运的咽喉，叩问命运，改变命运。',
'努力和效果之间，永远有这样一段距离。成功和失败的唯一区别是，你能不能坚持挺过这段无法估计的距离。'
];
var num3=parseInt(Math.random()*19);
$(".fail>p").html(failarr[num3]);
$(".fail").show();
}
})
完