目录 实现思路 核心代码 HTML代码 CSS代码 JS代码 实现思路 1、offsetTop，与style.top 2、我们看到的是白块在向下运动，其实不是，政治运动的是装着白块的盒子，白块只是被装在了盒子里面
目录
- 实现思路
- 核心代码
- HTML代码
- CSS代码
- JS代码
实现思路
1、offsetTop，与style.top
2、我们看到的是白块在向下运动，其实不是，政治运动的是装着白块的盒子，白块只是被装在了盒子里面被带着向下，而向下运动也只是改变top值。同事盒子total的高度也不是无限长的能一直向下运动，所以肯定是运动到某个地方他又回去了。
childNodes：由childNodes属性返回的数组中包含着所有类型的节点，所有的属性节点和文本节点也包含在其中。（不能乱用）
JS获取元素的left和top值：
核心代码
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="3.css" rel="external nofollow" >
</head>
<body>
<h2>
<span>分数：</span>
<span id="score">0</span>
</h2>
<!-- 游戏区 -->
<div id="main">
<div id="con">
</div>
</div>
<div class="btn"><button id="start">开始游戏</button></div>
<script src="3.js"></script>
</body>
</html>
CSS代码
* {
margin: 0;
padding: 0
}
#main {
width: 408px;
height: 408px;
margin: 0 auto;
background: white;
border: 2px solid gray;
overflow: hidden;
}
#con {
width: 100%;
height: 400px;
position: relative;
border-collapse: collapse;
top: -100px;
}
/* 行 */
.row {
height: 100px;
width: 100%;
}
/* 一个块 */
.cell {
height: 100px;
width: 100px;
float: left;
border: rgb(54, 74, 129) 1px solid;
}
/* 黑块 */
.black {
background: black;
}
.btn {
width: 100%;
text-align: center;
}
button {
width: 250px;
height: 60px;
border: 1px solid grey;
margin-top: 20px;
margin-bottom: 10px;
background-color: rgb(162, 223, 146);
font-size: 30px;
}
span {
display: inline-block;
width: 100%;
cursor: pointer;
background-color: #fff;
font-size: 20px;
text-align: center;
}
JS代码
window.onload = function() {
//1、首先是点击开始游戏，里面的开始运动
///1、动态生成每一行(createrow())，里面有4个小的div。需要点击，当总的行数大于5的时候，就删除最下面的哪一行
///2、点击黑色的div，就删除所在的这一行。并且score分数加一
///3、判断点击了白色盒子的话，游戏结束
///4、当有包含黑色的行超过范围区域时，游戏也结束fail()
var score = document.querySelector('#score')
var con = document.querySelector('#con')
var start = document.querySelector('#start')
start.innerHTML = '游戏开始'
//需要给按钮加一个节流阀
var flag = 0
var timer = null //将timer变为一个全局变量
start.addEventListener('click', function() {
if (start.innerHTML == '游戏开始' && flag == 0) {
//用一个定时器，每50毫秒调用move（）
timer = setInterval(move, [60])
timer
con.addEventListener('click', function(ec) {
// console.log(ec.target);
console.log(ec.target.parentNode);
if (ec.target.className == 'cell black') {
ec.target.className = 'cell'
addscore()
ec.target.parentNode.pass = 1 //表示我这一行的黑块元素已经被点击了
} else if (ec.target.className = 'cell') {
fail()
}
})
flag = 1
}
})
var speed = 3
var scorenumber = 0
function addscore() {
scorenumber += 1
score.innerHTML = scorenumber
if (scorenumber % 10 == 0) {
speed += 2
}
}
function move() {
//什么时候开始创建行呢？就是当con的top值等于0的时候就创建一行
var top = parseInt(window.getComputedStyle(con, null)['top']);
if (speed + top > 0) {
top = 0
} else {
top = top + speed
}
con.style.top = top + 'px'
if (top == 0) {
createrow()
con.style.top = '-100px'
} else {
top = top + speed
}
//最多只让row的数量等于5
if (con.children.length >= 6) {
con.removeChild(con.lastChild)
}
over()
//什么情况下游戏结束--点击了白色方块，或者黑色方块触底
}
//动态创建行
function createrow() {
length = parseInt(con.children.length)
var row = document.createElement('div')
row.className = 'row'
var nun = Math.floor(Math.random() * 4)
for (i = 0; i < 4; i++) {
var idiv = document.createElement('div')
if (i == nun) {
idiv.className = 'cell black'
} else {
idiv.className = 'cell'
}
row.appendChild(idiv)
}
if (length == 0) {
con.appendChild(row)
} else {
con.insertBefore(row, con.firstChild)
}
}
//黑色方块触底
function over() {
var rows = document.querySelectorAll('.row')
if ((rows.length == 5) && (rows[rows.length - 1].pass != 1)) //怎么忽略掉已经黑块被点击了的行
{ //因为如果点击和黑色块，就会将这一行删除，如果没有点击操作，就说明没有删除行，那么就会多一行，因此当长度等于6的时候就说明有黑色块触底
fail()
}
}
//黑色块的点击时间，其实是委托给row上面，倒不如直接再委托到con上面，用事件对象
function fail() {
clearInterval(timer)
score.innerHTML = 0
con.innerHTML = ''
flag = 0
speed = 3
start.innerHTML = '游戏结束，得分' + scorenumber
}
}
到此这篇关于JS实现别踩白块游戏的示例代码的文章就介绍到这了,更多相关JS别踩白块内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！