<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{ margin: 0; padding: 0;}
#box{
width: 1100px;
height: 600px;
border: 1px solid firebrick;
margin: 30px auto;
position: relative;
overflow: hidden;
}
#box span{
border-radius: 50%;
position: absolute;
display: block;
cursor: pointer;
}
#scord{
text-align: center;
font-size: 28px;
color: firebrick;
}
#btn{
position: absolute;
left: 50%;
width: 140px;
text-align: center;
border: 1px solid firebrick;
color: firebrick;
line-height: 60px;
top: 300px;
margin-left: -70px;
cursor: pointer;
transition: 0.3s;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBox = document.querySelector("#box");
var oSord = document.querySelector("#scord");
var oBtn = document.querySelector("#btn");
var aDiv = oBox.getElementsByTagName("span");
var num = 1;
var scord = 0;
var ON = false;
var cArr = [];
creatData();
bind();
//开始点击
oBtn.onclick = function(){
this.style.transform = 'scale(0)';
if(ON){
num++;
cArr = [];
creatData();
ceatNode();
}else{
ceatNode();
}
}
//创建随机位置
function creatData(){
for(var i = 0; i < num; i++){
var l = Math.floor(Math.random()*900)+100;
var t = -(Math.floor(Math.random()*20)+100);
var w = Math.floor(Math.random()*20)+50;
var c1 = Math.floor(Math.random()*255);
var c2 = Math.floor(Math.random()*255);
var c3 = Math.floor(Math.random()*255);
var speed = Math.floor(Math.random()*3)+1;
cArr.push({
l : l,
t : t,
w : w,
c1 : c1,
c2 : c2,
c3 : c3,
speed : speed
})
}
}
//创建节点
function ceatNode(){
for(var i = 0; i < cArr.length; i++){
var oDiv = document.createElement("span");
oDiv.style.width = cArr[i].w+'px';
oDiv.style.height = cArr[i].w+'px';
oDiv.style.background = 'rgba('+cArr[i].c1+','+cArr[i].c2+','+cArr[i].c3+',1)';
oDiv.style.left = cArr[i].l+'px';
oDiv.style.top = cArr[i].t+'px';
oBox.appendChild(oDiv);
move(aDiv[i], cArr[i].speed, i)
}
}
//掉下运动
function move(obj, s, Index){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
obj.style.top = obj.offsetTop + s + 'px';
if(obj.offsetTop>600){
oBox.removeChild(obj);
}
},30);
}
//事件绑定
function bind(){
oBox.onclick = function(e){
var e = e || window.event;
var Target = e.srcElement || e.target;
if( Target.tagName.toUpperCase() == "SPAN" ){
Target.style.transition = "0.15s";
Target.style.transform = 'scale(2)';
var t = Target;
Target.addEventListener('transitionend', function(ev){
var ev = ev || window.event;
oBox.removeChild(t);
scord++;
oSord.innerHTML = '分数:'+scord;
if(oBox.children.length==0){
oBtn.style.transform = 'scale(1)';
oBtn.innerHTML = "下一关"+" "+'('+(num+1)+')';
ON = true;
}
ev.stopPropagation();
})
};
}
}
}
</script>
</head>
<body>
<div id="box">
</div>
<div id="btn">开始</div>
<div id="scord">分数:0</div>
</body>
</html>
click小游戏demo
最新推荐文章于 2022-10-25 23:16:00 发布