<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<style>
#container {
width: 1320px;
height: 689px;
background-image: url("bg0.png");
}
#rope0 {
position: absolute;
top: -5px;
left: -5px;
width: 18px;
}
#rope {
background: url("ropetile.png") repeat;
width: 90px;
height: 10px;
transform: rotate(20deg);
transform-origin: 0 50%;
position: fixed;
top: 167px;
left: 670px;
}
#pliers {
transform: rotate(-90deg);
position: absolute;
top: -20px;
right: -60px;
}
.gold {
position: absolute;
}
</style>
</head>
<body>
<div id="container">
<div id="rope">
<img src="ropehide-sheet0.png" id="rope0">
<img src="pliers.png" id="pliers"/>
</div>
</div>
<script>
var degree = 20;//初始角度是20度
var direction = 1;//正数代表向左，负数代表向右
var height = 450;//地面以下
var width = 600;//左右
var data = [[74, 66], [66, 57], [141, 120], [168, 148], [70, 58], [71, 71]];
var golds = new Array();//随机产生的金子和石头
var ropeLength = 90;//绳子长度
var timer;//定时器
//左右摇摆
function swing() {
degree += direction
if (degree >= 160 || degree <= 20) {
direction *= -1;
}
$("#rope").css("transform", "rotate(" + degree + "deg)")
}
//产生随机数
function randomNum(minNum, maxNum) {
return Math.floor(Math.random() * (maxNum - minNum + 1) + minNum)
}
//产生金子和石头
function createGold() {
for (var i = 0; i < data.length; i++) {
var left = randomNum(10, 2 * width - data[i][0])
var top = randomNum(280, 680 - data[i][1])
var img = $('<img src="' + i + '.png" class="gold">')
golds.push([left, top])
img.css({"top": top + "px", "left": left + "px"})
$("#container").append(img)
}
}
//加长绳子 r绳子的最大长度
function lengthen(r) {
ropeLength += 3;
if (ropeLength >= r) {//到了最大长度
clearInterval(timer)//停止加长
timer = setInterval("shorten()", 20)//开始缩短
return
}
$("#rope").css("width", ropeLength + "px")
var pliers = $("#pliers")
var left = pliers.offset().left + 35 * Math.sin(degree * Math.PI / 180)
var top = pliers.offset().top + 5
//有没有抓住东西
for (var i = 0; i < golds.length; i++) {
if (left > golds[i][0] && left < golds[i][0] + data[i][0] && top > golds[i][1] && top < golds[i][1] + data[i][1]) {
clearInterval(timer)//抓住停止加长
timer = setInterval("shorten(" + i + ")", 20)//开始缩短
return
}
}
}
//缩短绳子
function shorten(index) {
ropeLength -= 3;
if (ropeLength <= 90) {//最短
clearInterval(timer)
if (index >= 0) {//抓住东西
$(".gold:eq(" + index + ")").hide()//把抓住的东西隐藏
golds[index] = [9999, 9999]//把这个元素坐标移动到屏幕外，后面就不可能抓住它了
}
timer = setInterval("swing()", 20)//开始摇摆
return
}
if (index >= 0) {//抓住东西的时候，index是抓住了第几块金子
var pliers = $("#pliers");//钳子的位置
//让金子的位置跟着钳子动
var left = pliers.offset().left + (35 - data[index][0] / 2) * Math.sin(degree * Math.PI / 180)
var top = pliers.offset().top + 5
$(".gold:eq(" + index + ")").css({"top": top + "px", "left": left + "px"})
}
//绳子缩短
$("#rope").css("width", ropeLength + "px")
}
//放爪子
function catchGold() {
clearInterval(timer)
var arc = degree * Math.PI / 180
var r = height / Math.sin(arc)
var len = Math.abs(width / Math.cos(arc))
if (r > len) {
r = len;
}
timer = setInterval('lengthen(' + r + ')', 20)//放长绳子
}
$(function () {
$(document).keydown(function (e) {
switch (e.keyCode) {
case 32:
catchGold()
break;
}
})
createGold()
timer = setInterval("swing()", 20)
})
</script>
</body>
</html>
