html+css+js 实现简单的网页版别踩白块
作者：互联网
1.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">
<link rel="stylesheet" href="./index.css">
<title>别踩白块</title>
</head>
<body>
<h2>score</h2>
<h2 id="score">0</h2>
<div id="main">
<div id="con"></div>
</div>
<div class="btn">
<button class="start" onclick="start()">
开始游戏</button>
</div>
</body>
<script src="./index.js"></script>
</html>
2.css样式
*{
margin: 0;
padding: 0;
}
#main{
width: 408px;
height: 408px;
background: white;
border: 2px solid gray;
margin: 0 auto;
overflow: hidden;
}
h2{
text-align: center;
}
#con{
width: 100%;
height: 400px;
position: relative;
top: -408px;
/* 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性 */
border-collapse: collapse;
}
/* 一个块 */
.cell{
height: 100px;
width: 100px;
float: left;
border: rgb(54, 74, 129) 1px solid;
}
.black{
background-color: black;
}
.btn{
width: 100%;
text-align: center;
}
.start {
margin: 20px auto;
width: 150px;
height: 50px;
border-radius: 10px;
background: yellowgreen;
line-height: 50px;
color: #fff;
}
3、js 将每一个黑块和白块抽象成一个个的数据结构，黑块的消失和出现其实就是数据结构的创造和销毁
// 根据id来获取元素
function $(id) {
return document.getElementById(id);
}
// 创建div, className是其类名
function creatediv(className) {
var div = document.createElement('div');
div.className = className;
return div;
}
var clock = null;
var state = 0;
var speed = 6;
var flag = false;
//点击开始游戏按钮 开始游戏
function start() {
if (!flag) {
init();
} else {
alert('游戏已经开始，无须再次点击！');
}
}
/*
* 初始化 init
*/
function init() {
flag = true;
for (var i = 0; i < 4; i++) {
createrow();
}
// 添加onclick事件
$('main').onclick = function (ev) {
ev = ev || event;
judge(ev);
};
// 定时器 每30毫秒调用一次move()
clock = window.setInterval('move()', 30);
}
// 判断是否点击黑块、白块
function judge(ev) {
if (
ev.target.className.indexOf('black') == -1 &&
ev.target.className.indexOf('cell') !== -1
) {
ev.target.parentNode.pass1 = 1; //定义属性pass，表示此行row的白块已经被点击
}
if (ev.target.className.indexOf('black') !== -1) {
//点击目标元素 类名中包含 black 说明是黑块
ev.target.className = 'cell';
ev.target.parentNode.pass = 1; //定义属性pass，表明此行row的黑块已经被点击
score();
}
}
// 判断游戏是否结束
function over() {
var rows = con.childNodes;
if (rows.length == 5 && rows[rows.length - 1].pass !== 1) {
fail();
}
for (let i = 0; i < rows.length; i++) {
if (rows[i].pass1 == 1) {
fail();
}
}
}
// 游戏结束
function fail() {
clearInterval(clock);
flag = false;
confirm('你的最终得分为 ' + parseInt($('score').innerHTML));
var con = $('con');
con.innerHTML = '';
$('score').innerHTML = 0;
con.style.top = '-408px';
}
// 创造一个<div class="row">并且有四个子节点<div class="cell">
function createrow() {
var con = $('con');
var row = creatediv('row'); //创建div className=row
var arr = creatcell(); //定义div cell的类名,其中一个为cell black
con.appendChild(row); // 添加row为con的子节点
for (var i = 0; i < 4; i++) {
row.appendChild(creatediv(arr[i])); //添加row的子节点 cell
}
if (con.firstChild == null) {
con.appendChild(row);
} else {
con.insertBefore(row, con.firstChild);
}
}
// 创建一个类名的数组，其中一个为cell black, 其余为cell
function creatcell() {
var temp = ['cell', 'cell', 'cell', 'cell'];
var i = Math.floor(Math.random() * 4); //随机产生黑块的位置 Math.random()函数参数 0~1的随机数
temp[i] = 'cell black';
return temp;
}
//让黑块动起来
function move() {
var con = $('con');
var top = parseInt(window.getComputedStyle(con, null)['top']);
if (speed + top > 0) {
top = 0;
} else {
top += speed;
}
con.style.top = top + 'px'; //不断移动top值，使它动起来
over();
if (top == 0) {
createrow();
con.style.top = '-102px';
delrow();
}
}
// 加速函数
function speedup() {
speed += 2;
if (speed == 20) {
alert('你超神了');
}
}
//删除某行
function delrow() {
var con = $('con');
if (con.childNodes.length == 6) {
con.removeChild(con.lastChild);
}
}
// 记分
function score() {
var newscore = parseInt($('score').innerHTML) + 1; //分数加一
$('score').innerHTML = newscore; //修改分数
if (newscore % 10 == 0) {
//当分数是10 的倍数时使用加速函数，越来越快
speedup();
}
}
标签：function,白块,top,js,cell,版别,var,row,con 来源： https://www.cnblogs.com/Awwx/p/16592295.html