好资源导航 » 文章资讯 » js实现踩五彩块游戏

js实现踩五彩块游戏

2023-08-01 22:50:05 71

本文实例为大家分享了js实现踩五彩块游戏的具体代码，供大家参考，具体内容如下







Document




GameStart

CSS:

*{
margin:0;
padding:0;
}
.wrapper{
position:relative;
width:400px;
height:600px;
border:1pxsolidblack;
margin:160pxauto;
overflow:hidden;
}
#go{
position:absolute;
left:0;
top:0;
width:100%;
height:100px;
border-bottom:1pxsolid#000;
font-weight:bolder;
font-size:60px;
line-height:100px;
text-align:center;
cursor:pointer;
z-index:999;
}
#main{
position:relative;
width:400px;
height:600px;
/*border:1pxsolidred;*/
}
.row{
width:400px;
height:150px;
}
.rowdiv{
/*块级元素水平排列*/
float:left;
width:100px;
height:150px;
border:1pxsolid#000;
/*混杂模式盒模型*/
box-sizing:border-box;
/*最终显示宽度为设定宽度*/
}

js:

//bindEvent显示开始,清除creatDiv增加一行move运动判断胜负计分
vargo=document.getElementById('go');
//运动趋于
varmain=document.getElementById('main');
vartimer;
varspeed=5,num=0,flag=true;

functionbindEvent(){
go.addEventListener('click',function(){
go.style.display='none';
move();

});
main.addEventListener('click',function(e){
if(flag){
vartar=e.target;
if(tar.className=='tar'){
tar.style.backgroundColor='#bbb';
tar.classList.remove('tar');
num++;

}else{
clearInterval(timer);
alert('游戏结束吧得分'+num);
flag=false;
}
}

});

}
bindEvent();
functionmove(){
timer=setInterval(function(){
//初始位置+速度
varstep=parseInt(main.offsetTop)+speed;
//当前位置付给新的top
main.style.top=step+'px';
if(parseInt(main.offsetTop)>=0){
main.style.top='-150px';
cDiv();

}
//移除多余的div
varlen=main.childNodes.length;
if(len==6){
varlastRow=main.childNodes[len-1];
//是否结束
for(vari=0;i<4;i++){
if(lastRow.childNodes[i].classList.contains('tar')){
clearInterval(timer);
alert('游戏结束得分：'+num);
flag=false;

}}

main.removeChild(main.childNodes[len-1]);

}

}
,20);
}
//创建行和列
functioncDiv(){
//生成数组颜色
varcolor=['red','blue','green','pink'];
//创建一个行
varoDiv=document.createElement('div');
//生成一个随机数
varindex=Math.floor(Math.random()*4);
//创建四列
for(vari=0;i<4;i++){
//创建四个列块
variDiv=document.createElement('div');
//行里面插入列
oDiv.appendChild(iDiv);

}
//被点击的div
varclickDiv=oDiv.childNodes[index];
clickDiv.setAttribute('class','tar');
//颜色随机
clickDiv.style.backgroundColor=color[index];
oDiv.setAttribute('class','row');
//如果行为空则插入，如果不为空则向上插入；
if(main.childNodes.length==0){
main.appendChild(oDiv);
}else{
main.insertBefore(oDiv,main.childNodes[0]);
}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

js实现踩五彩块游戏

热门推荐

随机推荐