还记得是笔者上大学的时候，挺流行的一款单击游戏《别踩白块儿》，不知道你有没有玩过，突来兴致，就觉得尝试着自己写一个，因为笔者初学，总感觉思路上有一些缺陷，拿出来大家讨论，高手们可以告诉我如果修改，能做的更完美。谢过~
别踩白块.jpg
思路
1.在界面外搭建两个与游戏界面相同的游戏场景，然后不停切换
2.当界面在屏幕之外时，变换黑块的位置
3.当点击黑块的时候，随机播放音符
4.当点击白块时，结束游戏
搭建页面
<div id="score">您的得分是<span></span></div>
<div id="interFace">
<div id="loop1">
<ul class="btn">
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
</ul>
<ul class="btn">
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
</ul>
<ul class="btn">
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
</ul>
<ul class="btn">
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
</ul>
<ul class="btn">
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
</ul>
</div>
<div id="loop2">
<ul class="btn">
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
</ul>
<ul class="btn">
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
</ul>
<ul class="btn">
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
</ul>
<ul class="btn">
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
</ul>
<ul class="btn">
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
<li><audio></audio></li>
</ul>
</div>
</div>
css样式
<style type="text/css">
.btn{
margin: 0px;
padding: 0px;
list-style: none;
}
.btn:after{
content: "";
clear: both;
display: block;
}
.btn li{
width: 78px;
height: 98px;
/*background-color: red;*/
float: left;
border: 1px solid #ccc;
}
#interFace{
height: 500px;
width: 320px;
background-color: #ffffff;
margin: 0px auto;
position: relative;
overflow: hidden;
border: 3px solid pink;
}
#loop1{
position: absolute;
top: 0px;
left: 0px;
}
#loop2{
position: absolute;
top: -500px;
left: 0px;
}
#score{
height: 50px;
width: 150px;
background-color: skyblue;
margin-left: auto;
margin-right: auto;
}
#score span{
font-weight: bold;
font-size: 30px;
color: red;
}
</style>
准备工作
获取我们需要的DOM节点
var loop1 = document.querySelector("#loop1");//背景1
var loop2 = document.querySelector("#loop2");//背景2
var jsLi = document.querySelectorAll("li");//js节点页面中所有li
var lis = $("li");//jq节点
var uls1 = $("#loop1 .btn");
var uls2 = $("#loop2 .btn");
//将音乐文件编入数组
var musicArr = ["1.ogg","2.ogg","3.ogg","4.ogg","5.ogg","6.ogg","7.ogg","8.ogg","9.ogg"]
设计游戏
在界面外搭建两个与游戏界面相同的游戏场景，然后不停切换，设置定时器，让我们的页面动起来。
为了方便大家观看，把loop1的背景设置成红色，loop2的背景设置成蓝色
alert("开始游戏");
// 让loop动起来
var date = new Date().getTime();
var timer = setInterval(func,5);
function func(){
loop1.style.top = loop1.offsetTop+1+"px";
loop2.style.top = loop2.offsetTop+1+"px";
if(loop2.offsetTop >= 500){
loop2.style.top = "-500px";
}else{
if(loop1.offsetTop >= 500){
loop1.style.top = "-500px";
}
}
}
效果如下
GIF.gif
当界面在屏幕之外时，随机变换黑块的位置，具体请看注释
//默认给初始化的背景排序。
random(uls1);
random(uls2);
//检测背景loop的位置，当背景的位置在窗口以外的时候，随机改变黑块的位置；
var timer1 = setInterval(sport,1);
function sport(){
if (loop2.offsetTop == -500) {
random(uls2);
}
if(loop1.offsetTop == -500){
random(uls1);
}
}
//随机生成黑块位置的图片
function random(obj){
for(var j = 0; j<obj.length; j++){
//生成一个随机数，用来随机li
var num1 = parseInt(Math.random() * (4 - 0) + 0);
//当前进入页面的li全部变成白色
obj.eq(j).find("li").css("background-color","#ffffff");
//每行随机一个li变成黑色
obj.eq(j).find("li").eq(num1).css("background-color","#000000");
}
}
GIF.gif
给页面中所有的li添加点击事件，当我们点击的时候，先判断我们点击的小方块的颜色
如果是黑色，那么随机音乐音符播放。积分加1；
如果点击的白色，那么清楚定时器，游戏结束
// 找的得分的DOM节点
var score = document.querySelector("#score span");
// 计算得分的变量
var number = 0;
//当点击页面中的小方块时，页面颜色变化，并且随机出现音乐
$("li").on("click",function(){
//当点击的时候，检测我们点击的小方块的颜色
//如果是黑色，那么随机出现音乐
//如果是白色，清除定时器，那么结束游戏
if ($(this).css("backgroundColor")=="rgb(0, 0, 0)") {
$(this).find("audio").src="";
// 随机取出音符
var num2 = parseInt(Math.random() * (9 - 0) + 0);
//创建一个audio标签，并随机取出音符
var music = $(this).find("audio");
music[0].src = "music/"+musicArr[num2];
//黑块改变背景颜色
this.style.backgroundColor="pink";
//播放音乐
music[0].play();
//得分++;
number++;
//得分放入积分器中
score.innerHTML = number;
}else if(this.style.backgroundColor=="rgb(255, 255, 255)"){
this.style.backgroundColor="red";
clearInterval(timer);
alert("游戏失败");
window.location.reload();
}else{
console.log("程序出错");
}
})
})
GIF.gif
**因为这里获取节点的时候如果单用js会有点麻烦，笔者偷个懒，用了jQuery **
。
先写到这，总觉得思路和流程上会有问题，还有幸看到这篇文章的高手们指点一二，小女子这厢给您行礼咯~
喜欢就点赞咯~
