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>
* {
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;
}
$(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);
}
}
});