效果图如下所示:
html
& lt; div类=癰igbox”比;
& lt; !——显示游戏的区域——比;
& lt; div类=癵amequyu”比;
& lt; !——上面显示一个游戏开始的按钮——比;
& lt; div类="开始"祝辞游戏开始& lt;/div>
& lt; !——再显示一个游戏的主体部分——比;
& lt; div类=" zhuti "祝辞& lt;/div>
& lt; div类=" zhezhaoceng "祝辞& lt;/div>
& lt;/div>
& lt; !——下面再显示一个计分的盒子——比;
& lt; div类=" jifen "祝辞当前分数:0 & lt;/div>
& lt;/div>
js
& lt; script>//先找到主体内容的盒子,添加到这个盒子中去
var zhuti=document.getElementsByClassName (zhuti) [0];//找到计分,每点击一次,就让分数+ +;
var jifen=document.getElementsByClassName (jifen) [0];//找到游戏开始按钮,点击让它影藏,结束时显示并把里面的文字改变为“游戏结束的
var=document.getElementsByClassName开始(“开始”)[0];//找到遮罩层,结束游戏的时候显示
var zhezhaoceng=document.getElementsByClassName (zhezhaoceng) [0];//addbox(“行”)//动态创建盒子的函数
函数addbox(名称){//思路://1:先封装一个函数动态的创建盒子;//2:一个盒子里装了四个小盒子;//3:随机一个数,让这四个小盒子的某一个的颜色改为黑色;//4:给这个小盒子添加类名,设置样式;//5:随机数作为下标,给这个随机数的下标的小盒子添加一个类名;//6:添加到“zhuti”里面去,显示在页面上(如果zhuti里面有内容了,就要添加到所有内容的最前面,如果没有,接直接添加)//生成随机数作为四个盒子的下标
var指数=Math.floor (math . random () * 4)//console.log(指数);//创建一个盒子;
var bigdiv=document.createElement (div);
bigdiv。className=名称;//再依次创建四个小盒子;添加到刚刚创建的大盒子中;
(var=0;我& lt;4;我+ +){
var smallbox=document.createElement (div)
bigdiv.appendChild (smallbox)
}//判断主体里面有没有盒子;//如果已经存在盒子,就要添加到它们的最前面//如果没有,就可以直接添加到页面上
如果(zhuti.children。长度==0){
zhuti.appendChild (bigdiv)
其他}{
zhuti。方法(bigdiv zhuti.children [0])
}//给随机下标的盒子添加样式的背景色为黑色;
bigdiv.children .style(指数)。写成backgroundColor='黑色';//再给这个随机的盒子添加一点东西,可以用来做判断
bigdiv.children(指数)。className=皉andom_box”;
}//计分与控制速度的函数
函数移动(obj) {//封装一个计时器移动的方法,让主体内的内容动起来;//思路://1:先获取元素的最终样式,距离顶部的顶值;//2:声明两个变量;一个用来改变元素距离顶部的顶值;一个用来计分数;
var num=0;
var sudu=5;//创建一个计时器让它缓动显示到页面//在样式里面就设置了前值为-150 px;//通过计时器让它的顶值缓动到页面,当它的顶值等于0的时候,又让它的顶值变为-150 px;//就调用创建元素的方法再创建一个盒子,让它插在这个显示在页面上的盒子的前面
obj。timeID=setInterval(函数(){
var nowtop=方法(getComputedStyle (obj)['高级'])+ sudu;//console.log (nowtop);
obj.style。顶级=nowtop +“px”;
如果(方法(getComputedStyle (obj)['高级'])在=0){
addbox(“行”)
obj.style。顶级=-150 +“px”
}//判断条件:在移动的时候,如果用户没有点击到带有颜色的盒子,让盒子超过了界限;就结束游戏;
如果(obj.children。长度==6){
(var=0;我& lt;4;我+ +){
如果(obj.children [obj.children。长度- 1]定格[我]。className==random_box) {
jifen。innerHTML='当前最高得分:' + num;
start.style。显示='块'
开始。innerHTML='小朋友,游戏结束”;
start.style。显示=翱椤?
start.style。写成backgroundColor=奥躺?
start.style。身高=60 +“px”;
start.style。字形大?30 +“px”;
zhezhaoceng.style。显示=翱椤?
clearInterval (obj.timeID)
}
}//让主体的内容的长度永远等于6日如果不等于6日就会出现按下第一个带“random_box”类名的小盒子,之后就不会再回到以上的判断里面了;
obj.removeChild (obj.children [obj.children。长度- 1)
}//console.log (obj.children.length);//判断用户点击的时候:条件:如果没有点中指定的盒子(类名为“random_box”)的盒子,就结束游戏,不然就计分num + +;
obj。onmousedown=函数(事件){//根据事件对象里面的事件源来进行判断;//当它的事件源的名字等于“random_box”的时候;
如果(event.target。className==random_box) {//让这个事件源的的背景色变为红色;
event.target.style。写成backgroundColor=昂焐?//当用户点击了事件源时,把他的类名清空,不然只变了颜色,到了第6个,判断类名还是“random_box”时,就会结束游戏;
event.target。className=";//计分
num + +;//显示在当前得分的盒子里
jifen。innerHTML='当前得分' + num;
其他}{//结束游戏
clearInterval (obj.timeID)
start.style。显示=翱椤?
start.style。写成backgroundColor=奥躺?
start.style。身高=60 +“px”;
start.style。字形大?30 +“px”;
开始。innerHTML='游戏结束!再来一局”;
jifen。innerHTML='最终得分' + num;//让遮罩层显示
zhezhaoceng.style。显示=翱椤?
}//加速(判断分数到了多少时,让主体下降的顶值变大)
如果(num % 5==0) {
sudu + +;
}
}
},20)
}//当它点击开始按钮的时候,再调用函数;运行起来;
开始。onclick=function () {//如果事重新来一局,那就先把页面上已经创建的盒子先清除;
如果(zhuti.children。长度!=0){
zhuti。innerHTML="
}//让遮罩层隐藏
zhezhaoceng.style。显示='没有';//让开始的按钮影藏
this.style。显示='没有';
jifen。innerHTML='当前得分:0
移动(zhuti)
}
& lt;/script>
