jquery实现小游戏

最新推荐文章于 2024-07-15 10:27:24 发布

一只前端小白

最新推荐文章于 2024-07-15 10:27:24 发布

阅读量2.9k

点赞数 1

分类专栏：日志文章标签： javascript

本文链接：https://blog.csdn.net/qq_38944959/article/details/87909619

版权

日志专栏收录该内容

51 篇文章 2 订阅

订阅专栏

基础知识：jq+c3的基本知识
由于有部分已知bug，就直接贴代码?

静态页面

<!doctype html>
<html >
 <head>
  	<meta charset="UTF-8">
  	<title>过关小游戏</title>
    <link href="css/style.css" rel="stylesheet"/>
    <script src="js/jquery-1.8.3.min.js"></script>
	 <script src="js/jquery-randomcolor.js"></script>
	<script src="js/play.js"></script>
 </head>
 <body class="bg2">
 	<!-- 放关卡和主菜单的盒子 -->
	<div class="set-text">
			<ul class="play-list">
			</ul>
		<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"></p>
	</div>
	<!--游戏音效-->
	<audio class="game-audio" src="#"></audio>
 </body>
</html>

js部分

$(function () {
    //生成柱子 思路：设置柱子的宽度，一次性的创建柱子，添加到盒子里
    //柱子宽度
    var wellWidth = 100;
    // 柱子个数
    var wellNum = 5;
    //柱子位置
    var randomLeftSum = 0;//记录随机位置
    //柱子间最小间隙
    var minSpace = 100;
    //柱子间最大宽度
    var maxSpace = $(".container").offset().top;
    //需要创建的柱子
    var pillar = $("<div class='well'></div>");
    (function () {
        //1、随机背景
        $("body").css({
            "background-image": "url(https://api.mlwei.com/img/api/)",
            "background-size": "cover",
        });
        //循环遍历创建关卡
        for (var i = 0; i <= (wellWidth - 30) / 10; i++) {
            if (i == 0) {
                $("<li></li>").text("关卡" + (i + 1)).appendTo($(".play-list")).show();
                continue;
            }
            $("<li></li>").text("关卡" + (i + 1)).appendTo($(".play-list")).hide();
        }
        // 选择关卡
        $(".play-list li").click(function () {
            $(this).siblings().fadeToggle(500);
            pass = $(this).index() + 1;
            wellWidth = 100;
            wellWidth -= $(this).index() * 10;
            $(".dialog").hide();
            well();
            initPersonStick(true);
        });
    })();

    //封装生成柱子的方法
    function well() {
        //清空装柱子的盒子
        $(".well-box").empty().css("left", 0);
        var randomLeft = 0;
        for (var i = 0; i < wellNum; i++) {
            randomLeft = i == 0 ? 0 : randomWell();
            pillar.clone().css({
                width: wellWidth,
                left: randomLeft + i * wellWidth,
            }).appendTo($(".well-box")).randomColor();
        }
        randomLeftSum = 0;
    }

    //柱子的随机位置
    function randomWell() {
        randomLeftSum += Math.floor(Math.random() * (maxSpace - minSpace) + minSpace);
        return randomLeftSum;
    }

    //初始化柱子
    well();
//二、鼠标按下不动，棍子宽度变宽
    var flag = true;
    $(".btnClick").mousedown(function () {
        if (flag) {
            $(this).css("background-image","url(img/btn-bg-click.png)");
            var max = $(".container").offset().top;
            $(".stick").animate({width: max}, 2000).randomColor();
            flag=false;
        }
    });
    $(".btnClick").mouseup(function () {
        if (!flag) {
            $(this).css("background-image","url(img/btn-bg.png)");
            //停止动画,让棍子倒下来
            $(".stick").stop().addClass("stickDown");
            //调用小人跑起来的函数
            setTimeout(moveMan, 350);
            flag = true;
        }
    });

//3、小人跑起来的函数
    var index = 0;//记录柱子的索引
    var pass = 1;//关卡
    function moveMan() {
        var stickWidth = $(".stick").width();
        $(".man img").attr("src", "img/stick.gif").animate({
            "left": stickWidth
        }, 1500, function () {
            //判断小人是否挑战成功
            //失败：棍子的宽度小于两个柱子之间的距离或者大于两个柱子之间的距离+柱子的宽度

            //两个柱子之间的距离=后一个柱子的left值-前一个柱子的宽度
            var space = $(".well").eq(index + 1).offset().left - wellWidth;
            if (stickWidth < space || stickWidth > (space + wellWidth)) {
                fail();
            } else {
                suc();
            }
        });
    }

//封装失败的函数
    function fail() {
        //失败音效
        $(".game-audio").attr("src", info.audio_fail)[0].play();
        //1、小人掉下去，rotate的类选择器，小人隐藏
        $(".man img").addClass("rotate");
        //2、棍子的宽度为0，移除stickDown的样式
        $(".stick").width(5).removeClass("stickDown").hide();
        //3、显示弹框
        //4、设置弹框文本
        $(".dialog").show().find("p.name").text(randomTxt("fail")).end().find("p.dialog-btn").html("<a class='no-pass' style='cursor: pointer'>再试一次</a>");
        //游戏结束
        $("a.no-pass").click(function () {
            location.reload();
        });
    }

//成功的方法
    function suc() {
        //成功音效
        $(".game-audio").attr("src", info.audio_suc)[0].play();
        flag = true;
        //成功
        initPersonStick(false);
        var leftSpace = Math.abs($(".well-box").offset().left);
        index++;
        //3、柱子盒子整体移动，移动完跑下一个柱子index++
        $(".well-box").animate({
            "left": -($(".well").eq(index).offset().left + leftSpace)
        }, 1000, function () {
            if (index == wellNum - 1) {
                checkPass();
            } else {
                initPersonStick(true);
            }
        });
    }

//判断是否选择下一关
    function checkPass() {
        if (wellWidth == 30) {
            $(".dialog").show().find("p.name").text("恭喜你通过所有关卡?").end().find("p.dialog-btn").html("");
            flag = false;
            return;
        }
        flag = false;
        $(".dialog").show().find("p.name").text(randomTxt("suc")).end().find("p.dialog-btn").html(
            "<a class='play-agin' style='cursor: pointer'>重玩一局</a><a class='next' style='cursor: pointer'>下个关卡</a>"
        );
        $("a.next").click(function () {
            passNext();
        });
        $("a.play-agin").click(function () {
            location.reload();
        });
    }

//进入下一关
    function passNext() {
        flag = true;
        wellWidth -= 10;
        index = 0;
        pass++;
        $(".play-title").text("关卡" + pass);
        $(".well-box").empty().css("left", 0);
        $(".play-list li").eq(pass-1).fadeIn(500).siblings().hide();
        well();
        $(".dialog").hide();
        initPersonStick(true);
    }

//初始化小人和棍子
    function initPersonStick(show) {
        if (show) {
            $(".man img").css("left", 0);
            $(".stick").css("left", 100);
            $(".man img").css("left", "-=" + (pass - 1) * 10).show(500);
            $(".stick").css("left", "-=" + (pass - 1) * 10).show();
        } else {
            //1、小人站立的图片
            $(".man img").attr("src", "img/stick_stand.png").css(
                "left", -$(".well").eq(index).offset().left
            ).hide();
            //2、棍子初始化：棍子的宽度为0
            $(".stick").width(5).removeClass("stickDown").hide();
        }
    }
    //键盘控制
    $(document).keydown(function (e) {
        var e=e||window.event;
        if(flag&&e.keyCode==32){
            $(".btnClick").mousedown();
            flag=false;
        }
    });
    $(document).keyup(function (e) {
        var e=e||window.event;
        if(!flag&&e.keyCode==32){
            $(".btnClick").mouseup();
            flag=true;
        }
    });
//随机提示语
    function randomTxt(type) {
        var txt = {
            suc: [
                '勇敢坚毅真正之才智乃刚毅之志向。 —— 拿破仑',
                '志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚',
                '骏马是跑出来的，强兵是打出来的。',
                '只有登上山顶，才能看到那边的风光。',
                '如果惧怕前面跌宕的山岩，生命就永远只能是死水一潭。',
                '平时没有跑发卫千米，占时就难以进行一百米的冲刺。',
                '梯子的梯阶从来不是用来搁脚的，它只是让人们的脚放上一段时间，以便让别一只脚能够再往上登。',
                '没有激流就称不上勇进，没有山峰则谈不上攀登。',
                '真正的才智是刚毅的志向。 —— 拿破仑',
                '山路曲折盘旋，但毕竟朝着顶峰延伸。',
                '只有创造，才是真正的享受，只有拚搏，才是充实的生活。',
                '敢于向黑暗宣战的人，心里必须充满光明。',
                '种子牢记着雨滴献身的叮嘱，增强了冒尖的勇气。',
                '自然界没有风风雨雨，大地就不会春华秋实。',
                '只会幻想而不行动的人，永远也体会不到收获果实时的喜悦。',
                '勤奋是你生命的密码，能译出你一部壮丽的史诗。',
                '对于攀登者来说，失掉往昔的足迹并不可惜，迷失了继续前时的方向却很危险。',
                '奋斗者在汗水汇集的江河里，将事业之舟驶到了理想的彼岸。',
                '忙于采集的蜜蜂，无暇在人前高谈阔论。',
                '勇士搏出惊涛骇流而不沉沦，懦夫在风平浪静也会溺水。'
            ],
            fail: [
                '志在峰巅的攀登者，不会陶醉在沿途的某个脚印之中。',
                '海浪为劈风斩浪的航船饯行，为随波逐流的轻舟送葬。',
                '人生最重要的一点是，永远不要迷失自己。',
                '一个人承受孤独的能力有多大，他的能力就有多大。',
                '实力塑造性格，性格决定命运。',
                '普通人成功并非靠天赋，而是靠把寻常的天资发挥到不寻常的高度。',
                '对于强者，要关注他们的灵魂，对于弱者，他关注他们的生存。',
                '积极的人在每一次忧患中都看到一个机会，而消极的人则在每个机会都看到某种忧患。',
                '成功不是将来才有的，而是从决定去做的那一刻起，持续累积而成。',
                '当你感到悲哀痛苦时，最好是去学些什么东西。学习会使你永远立于不败之地。',
                '有的人一生默默无闻，有的人一生轰轰烈烈，甚至千古流芳，为什么会这样？因为默默无闻的人只是满足于现状，而不去想怎么轰轰烈烈过一生，不要求自己，去做，去行动，怎么能够成功？',
                '人性最可怜的就是：我们总是梦想着天边的一座奇妙的玫瑰园，而不去欣赏今天就开在我们窗口的玫瑰。',
                '在人生的道路上，即使一切都失去了，只要一息尚存，你就没有丝毫理由绝望。因为失去的一切，又可能在新的层次上复得。',
                '没有一劳永逸的开始；也没有无法拯救的结束。人生中，你需要把握的是：该开始的，要义无反顾地开始；该结束的，就干净利落地结束。',
                '生命的奖赏远在旅途终点，而非起点附近。我不知道要走多少步才能达到目标，踏上第一千步的时候，仍然可能遭到失败。但我不会因此放弃，我会坚持不懈，直至成功！',
                '不要认为只要付出就一定会有回报，这是错误的。学会有效地工作，这是经营自己强项的重要课程。',
                '苦心人天不负，卧薪尝胆，三千越甲可吞吴。有志者事竞成，破釜沉舟，百二秦川终属楚。',
                '生命本身是一个过程，成功与失败只是人生过程中一些小小的片段，若果把生命与成功或失败联系在一起，生命将失去本身该有的意义。',
                '我们不要哀叹生活的不幸，诅咒命运的不公。在命运面前，我们要做强者，掐住命运的咽喉，叩问命运，改变命运。',
                '努力和效果之间，永远有这样一段距离。成功和失败的唯一区别是，你能不能坚持挺过这段无法估计的距离。'
            ]
        }
        return txt[type][Math.floor(Math.random() * txt[type].length)];
    }

    var info = {
        audio_suc: "http://s.aigei.com/pvaud/aud/mp3/a5/a593ea12a3ad481fa49b98483a3d0f01.mp3?e=1550854620&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:qoxNLNLW5gcfL9VyPWjOjgffKVE=",
        audio_fail: "http://s.aigei.com/pvaud/aud/mp3/7e/7e1505396c2043b6b18ec2d61c39a262.mp3?e=1550854980&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:T3QWSHxZx-fQeLfh-MKmXt2JDpo="
    }
})
;

最终效果图：
在这里插入图片描述