您的位置：首页 > Web前端 > JavaScript

超详细利用原生 js实现别踩白块小游戏

2018-11-23 13:41 549 查看

超详细利用原生 js实现别踩白块小游戏

先上效果图

首先这是针对于初学者的js联系，大神可以路过。

开始界面：

游戏界面：

原理

实现这个小游戏的原理非常简单，以下用直接上图解释：

这里我们将wrap设置为400 x 600 ，main是装方块的容器，大小和wrap一样，分为四列四行。最开始我们利用绝对定位将它的top设置为-150px，也就是将最前面一行提前。
通过改变定时器改变main的top值使得main向下运动。如果第一行的位置已经到达了0px的位置，这时候，我们就要重新生成一行新的，并且每一行有四个div。我们利用for循环生成。在生成的同时我们也应该将整个main容器的位置回到原来-150px的位置。好了，这就是原理的大概。

html代码

html的结构比较简单。我们需要的一个标题，就是游戏名，一个div就可以了。
然后是容器wrap ，这里面有开始按钮go，方块容器main。
下方还有显示分数的countShow。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>别踩白块</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div id="gameName">不要踩到白块哦~</div>
<div class="wrap">
<div class="go">
<a href="###">开始 游戏</a>
</div>
<div class="main"></div>
</div>
<p class="count">当前分数:</p>
<p class="countShow"></p>
<script src="js/index.js"></script>
</body>

</html>

css代码

css最重要的就是设置定位的问题。我们需要的是包含方块的main相对于wrap的位置进行移动。所以我们将wrap设置为position：relative，main设置为position：absolute；
实现方块的时候，用到了css3的box-sizing，这样我们在设置边框就是不需要考虑内容区的大小。

* {
margin: 0;
padding: 0;
text-decoration: none;
}

body {
background: #777;
}

#gameName {
font-size: 40px;
margin-top: 60px;
text-align: center;
}

.wrap {
margin: 30px auto;
background: #fff;
width: 400px;
height: 600px;
border: 5px solid #000;
position: relative;
overflow: hidden;
border-radius: 4px;
cursor:pointer;
}

.go {
position: absolute;
z-index: 333;
font-size: 60px;
text-align: center;
line-height: 100px;
width: 100%;
height: 100px;
border-bottom: 2px dashed #333;
}

.go a {

color: red;
display: inline-block;
}

.main {
position: absolute;
width: 100%;
height: 600px;
position: absolute;
top: -150px;
}

.main .row {
width: 100%;
height: 150px;
}

.row div {
float: left;
background: #fff;
width: 100px;
height: 150px;
border: 1px solid #333;
box-sizing: border-box;
}

.count {
text-align: center;
font-size: 33px;
}

.countShow {
text-align: center;
font-size: 44px;
color: red;
}

js代码

以下的js代码，每一行我都加了详细的注释，根据我的说明一步一步看

首先是点击开始按钮

//获取元素
var go = document.querySelector('.go');  //开始按钮
var main = document.querySelector(".main"); // 方块的容器
var timer = null; //定时器
var speed = 5;  //设定的速度
var count = 0;  //积分器
var flag = true;  //加锁
var countShow = document.querySelector(".countShow");  //分数显示
var color = ["black", "black", "black", "black"];  //颜色数组

function goStart() {
//给开始按钮绑定事件
go.addEventListener("click", function() {
this.style.display = "none";
cDiv();//点击开始按钮立刻在第一行创建一行
move(); //容器移动
console.log(main.offsetTop)
})
}
goStart();

function move() {
clearInterval(timer); //移动前先清除已有定时器
timer = setInterval(function() {

//改变top值使得容器开始向下移动
main.style.top = parseInt(main.offsetTop) + speed + "px";
if (parseInt(main.offsetTop) >= 0) { //如果第一行的top值已经到达0的位置，则在第一行新创建一行，并且将容器重新拉回原来开始的位置
cDiv();
console.log(main.offsetTop)
main.style.top = "-150px";
}
var len = main.childNodes.length;
if (len == 6) { //如果容器有6个节点，说明最后一行已经超出了容器。第一行也已经生成
for (var i = 0; i < 4; i++) {
//判断每一行的每一个节点看是否它的类名列表里有"i";有的话清除定时器，弹出分数
if (main.childNodes[len - 1].childNodes[i].classList.contains("i")) {
clearInterval(timer);
flag = false;   //游戏结束，flag赋值为false
alert("你的分数是：" + count);
}
}
console.log("正在移出最后一个div");
//将超出容器的最后一行移除
main.removeChild(main.childNodes[len - 1]);
}
}, 30);
bindEvent();
}

//创建行和列
function cDiv() {

var oDiv = document.createElement("div");
oDiv.className = "row";//创建行，并且给行设定一个row类名
for (var i = 0; i < 4; i++) {
var iDiv = document.createElement("div");
oDiv.appendChild(iDiv); //for循环，创建4个div ，每创建一个div就塞进每行
}

if (main.childNodes.length == 0) { //如果当前main,没有div。那就直接插入
console.log("现在我是第一个div")
main.appendChild(oDiv);
} else {
console.log("正在在第一个位置插入")
main.insertBefore(oDiv, main.childNodes[0]);  //如果已经有了行，就在最前面的那一行插入  insertBefore(newNode,site);
}
var index = Math.floor(Math.random() * 4);  //随机生成0 1 2 3
var clickDiv = main.childNodes[0].childNodes[index];    //将要点击的方块随机生成
clickDiv.className = "i";  //点击的方块给一个类名 i
clickDiv.style.backgroundColor = color[index];    //给点击的方块添加随机的颜色
}

//给每一个div绑定事件，利用事件委托
function bindEvent() {
main.addEventListener('click', function(event) {
var tar = event.target;
if (flag == true) {  //这里加锁，游戏开启前flag 为true ，如果游戏结束了则赋值为false
if (tar.className == "i") {  //点击到类名为"i"的方块，背景颜色改变，并且将类名"i"移除
tar.style.backgroundColor = "#bbb";
tar.classList.remove("i");
count++;
console.log("分数正在加1")
countShow.innerHTML = count;  //分数显示
if (count % 10 == 0) {    //如果分数是10的倍数，速度+1
speed++;
}
} else if(!tar.classList.contains("main")){ //  如果你点击的不是容器，才让空白的方块颜色改变。并且清除定时器，弹出弹出框
console.log(this)
tar.style.backgroundColor = "red";
clearInterval(timer);
setTimeout(function() { //这里定时器解决执行先后的问题，让方块的颜色先变为red再弹出弹出框
alert("游戏结束，你的分数是：" + count);
}, 500)

flag = false;  //游戏结束赋值为false
}
}
console.log("你的分数是：" + count);

})
}

总结

以上案例，都是js最基本的内容。例如节点的增、删、改、查，还有对运动的理解。定时器的使用，条件判断语句等。还有一点非常重要，那就是代码的逻辑性。要先思考问题的存在，才用代码去解决问题。这点相当重要，希望以上内容对你的学习有帮助。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航