效果
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(95, 156, 236);
}
.bin {
position: absolute;
z-index: 10;
top: 500px;
left: 650px;
width: 160px;
height: 160px;
font-size: 20px;
color: tomato;
text-align: center;
line-height: 140px;
background-color: pink;
}
div.bin div {
width: 0;
height: 0;
border: 40px solid transparent;
border-bottom-color: rgb(95, 156, 236);
border-width: 80px 25px 80px 25px;
}
div.bin div:first-child {
float: left;
border-left-color: rgb(95, 156, 236);
}
div.bin div:last-child {
float: right;
border-right-color: rgb(95, 156, 236);
}
.trash {
display: none;
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 40px;
width: 63px;
font-size: 15px;
color: black;
line-height: 40px;
text-align: center;
border-radius: 4px;
background-color: pink;
}
.score {
position: absolute;
z-index: 10;
top: 50px;
right: 50px;
width: 100px;
height: 100px;
font-size: 20px;
color: red;
text-align: center;
line-height: 100px;
border-radius: 5px;
background-color: pink;
}
</style>
<script>
alert('捡垃圾游戏\n\n游戏规则为:a向左移动 d向右移动\n点击确认后游戏将在几秒后开始');
window.addEventListener("load", function () {
let score = 0;
let i=1;
let sorts = ['易拉罐', '罐头盒', '牙膏皮', '废电池', '旧衣物', '废玻璃', '硬塑料','报纸','节能灯','刀具','锅','牛奶盒','毛巾','书包','镜子','螺丝','剩饭剩菜','落叶','水果残余','化妆品','温度计','灯泡','烟头','尘土'];
let time = getRandomIntInclusive(2,5)*1000;
let bin = document.querySelector('.bin');
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值
}
function isDropIn(obj,bin){
let span = document.querySelector('.score').querySelector('span');
if(obj.offsetTop==460&&bin.offsetLeft<obj.offsetLeft&&bin.offsetLeft+100>obj.offsetLeft){
score+=2;
obj.style.display = 'none';
span.innerHTML = score;
}
}
function drop(obj){
let trash = sorts[getRandomIntInclusive(0,sorts.length-1)];
let x = getRandomIntInclusive(200,1100);
obj.style.display = 'block';
obj.innerHTML = trash;
obj.style.left = x+'px';
obj.style.top = '0';
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(obj.offsetTop<600){
obj.style.top = obj.offsetTop +2 +'px';
}
else{
obj.style.display = 'none'
}
isDropIn(obj,bin);
},25)
}
document.addEventListener('keydown', function (e) {
if (e.keyCode == 65 && bin.offsetLeft >= 100) {
bin.style.left = bin.offsetLeft - 14 + 'px';
}
if (e.keyCode == 68 && bin.offsetLeft <= 1200) {
bin.style.left = bin.offsetLeft + 14 + 'px';
}
})
let trashs = document.querySelectorAll('.trash');
setInterval(function(){
drop(trashs[i%5]);
i++;
},time)
})
</script>
</head>
<body>
<!-- 15:40开始 -->
<div class="bin">
垃圾桶
<div></div>
<div></div>
</div>
<div class="trash" ,data-index="1"></div>
<div class="trash" ,data-index="2"></div>
<div class="trash" ,data-index="3"></div>
<div class="trash" ,data-index="4"></div>
<div class="trash" ,data-index="5"></div>
<div class="score">
得分:<span>0</span>
</div>
</body>
</html>