2D版跳一跳

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/jump.css" rel="stylesheet" />
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
    <div class="title">
        <label>积分器：</label>
        <span class="score">0</span>
    </div>
    <div class="box">
        <div class="well-box">
            <div class="ball"></div>
            <div class="well" style="left: 0;"></div>
        </div>
    </div>

    <div class="dialog" style="display: none;">
        <!-- 放提示文字 -->
        <label>您的得分是：</label>
        <p class="end-score">0</p>
        <!-- 放按钮 -->
        <p class="dialog-btn">
            <a href="jump.html">再试一次</a>
        </p>
    </div>

    <div class="sort">
        <table width="100%">
            <thead>
            <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>分数</th>
            </tr>
            </thead>
        </table>
    </div>
    <script src="js/jump.js"></script>
</body>
</html>

/**
 * CSS文件
 * Time: 2018/8/28
 * Author: SanPhantom
 * Feature: 
 */
* {
    margin: 0;
    padding: 0;
}

.title {
    width: 100%;
    text-align: center;
    font-size: 18px;
}
.score {
    color: red;
}

.box {
    width: 800px;
    height: 400px;
    margin: 100px auto;
    padding: 12px;
    background-color: #666666;
    position: relative;
    overflow: hidden;
}

.ball {
    width: 30px;
    height: 30px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #feb367;
    position: absolute;
    left: 15px;
    bottom: 100px;
}

.well-box {
    width: 100%;
    height: 100px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #cccdcd;
}
.well {
    width: 60px;
    height: 100px;
    position: absolute;
    background-color: black;
}
.dialog{
    position:fixed;
    width:480px;
    left:50%;
    margin-left:-240px;
    top:250px;
    padding-bottom:25px;
    background:#3d3d3d;
    z-index:100;
    box-shadow:3px 3px 2px rgba(0,0,0,.5);
    text-align: center;
}
.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;
    text-decoration:none;
}

.sort {
    width: 300px;
    position: fixed;
    right: 10px;
    top: 100px;
}

/**
 * JavaScript文件
 * Time: 2018/8/28 16:54
 * Author: SanPhantom
 * Feature:
 */

$(function () {
    let colors = ["red", "yellow", "aqua", "orange", "blue", "pink", "green", "cornfloewrblue", "sienna"];
    let index = 0; //当前砖块的个数

    function getWell() {
        index ++;
        let well = $("<div class='well'></div>");
        well.width(Math.random()*20+30);
        well.height(100);
        well.css("left", Math.random()*100+5 + $(".well").eq(index-1).width() + parseInt($(".well").eq(index-1).css("left")));
        well.css("backgroundColor", colors[Math.floor(Math.random()*colors.length)]);
        well.appendTo($(".well-box"));
    }
    getWell(); //初始化第二块砖

    let startTime = 0;
    let endTime = 0;
    let time = 0;
    let locked = true;
    let timeout = null;
    //游戏盒子事件
    $(".box").mousedown(function () {
        if (locked) {
            startTime = new Date().getTime();
            clearTimeout(timeout);
            $(".ball").animate({"height": "15px"}, 2500)
        }
    }).mouseup(function () {
        if (locked) {
            endTime = new Date().getTime();
            time = endTime - startTime > 2500 ? 2500 : endTime - startTime;
            $(".ball").stop().animate({});
            locked = false;
            move();
        }
    });

    //小球跳动
    function move() {
        let left = parseFloat($(".ball").css("left"));
        let moveLeft = (time / 500 * 50);
        let moveTop = moveLeft-10 + parseInt($(".ball").css("bottom"));
        let cutHeight = 30 - $(".ball").height();
        console.log(moveLeft, moveTop);
        $(".ball").animate({left: left + moveLeft/2, bottom: moveTop, height: 30-cutHeight/2}, 500, function () {
            $(".ball").animate({left: left + moveLeft, bottom: 100, height: 30}, 500, function () {
                judge();
                timeout = setTimeout(addScore, 5000);
                if (index > 3) {
                    let width = $(".well-box").width() + parseInt($(".well").eq(index-1).css("left"));
                    $(".well-box").width(width);
                    $(".well-box").animate({left: 50-parseInt($(".well").eq(index-1).css("left"))}, 200)
                }
            });
        })
    }

    //判断生死
    function judge() {
        let ballLeft = parseFloat($(".ball").css("left")) + 15;
        let lastWell = parseFloat($(".well").eq(index-1).css("left"));
        let lastWidth = parseFloat($(".well").eq(index-1).width());
        let nowWell = parseFloat($(".well").eq(index).css("left"));
        let nowWidth = parseFloat($(".well").eq(index).width());
        if ((ballLeft > lastWell + lastWidth && ballLeft < nowWell) || (ballLeft > nowWell + nowWidth)) {
            fail();
        } else if (ballLeft < lastWell + lastWidth) {
            locked = true;
        } else {
            locked = true;
            getWell();
            if (ballLeft < nowWell + nowWidth/2 +1 && ballLeft > nowWell + nowWidth/2 - 1) {
                $(".score").text(Number($(".score").text()) + 5);
            } else {
                $(".score").text(Number($(".score").text()) + 1);
            }
        }
    }

    //失败函数
    function fail() {
        $(".end-score").text($(".score").text());
        $(".dialog").css("display", "block");

    }

    function addScore() {
        console.log("我进来了");
        console.log($(".well")[index - 1].style.backgroundColor);
        if ($(".well")[index - 1].style.backgroundColor === "red") {
            $(".score").text(Number($(".score").text()) + 5);
        } else if ($(".well")[index - 1].style.backgroundColor === "blue") {
            $(".score").text(Number($(".score").text()) + 3);
        } else if ($(".well")[index - 1].style.backgroundColor === "green") {
            $(".score").text(Number($(".score").text()) + 2);
        }

    }
});

2D版跳一跳

2D版跳一跳

猜你喜欢