别踩白块 复盘笔记
别踩白块 复盘笔记
-
-
- index.html
- index.css
- index.js
-
index.html
<html>
<head>
<meta charset="UTF-8">
<title>别踩白块title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
head>
<body>
<h2>scoreh2>
<h2 id="score">0h2>
<div id="main">
<div id="content">div>
div>
<div class="btn">
<button class="start" onclick="start()">
开始游戏
button>
div>
body>
<script type="text/javascript" src="js/index.js">
script>
html>
index.css
*{
margin: 0;padding: 0;}
h2{
text-align: center;
}
#main{
width: 408px;
height: 408px;
margin: 0 auto;
border: 2px solid gray;
background: white;
position: relative;
overflow: hidden;
}
#content{
width: 100%;
height: 100%;
position: absolute;
top: -408px;
border-collapse: collapse;
}
.row{
width: 100%;
height: 100px;
}
.cell{
width: 100px;height: 100px;
background-color: white;
float: left;
border: 1px solid blue;
}
.black{
background-color: black;
}
.btn{
width: 100%;height: 100px;
text-align: center;
}
.start{
width: 150px;
height: 50px;
font-size: 20px;
line-height: 50px;
color: white;
background: greenyellow;
margin: 20px auto;
}
index.js
下面的代码标记的顺序，是思考的过程，一步一步实现代码。
/*1.产生随机黑块白块类的数组的函数*/
function create_cells(){
var temp = ['cell','cell','cell','cell'];
var i = Math.floor(Math.random()*4);
temp[i] = 'cell black';
return temp;
}
//2.创建一个类名为'className'的div
function create_div(className){
var div = document.createElement('div');
div.className = className;
return div;
}
//3.获取页面中的元素的函数
function $(id){
return document.getElementById(id);
}
/*4.生成一行，四列*/
function create_row(){
var content = $('content');
var row = create_div('row');
var arr = create_cells();
for(var i=0;i < 4;i++){
var cell = create_div(arr[i]);
row.appendChild(cell);
}
if(content.firstChild == null){
content.appendChild(row);
}
else {
content.insertBefore(row,content.firstChild);
}
}
var clock = null; //全局的时钟，可以任意时候关掉游戏
var flag = 0; //0表示游戏还没有开始
var speed = 2;
//5.黑块运动，后编写删除末尾行函数以及判断游戏是否结束函数
function move(){
var content = $('content');
var top = parseInt(window.getComputedStyle(content,null)['top']);
top += speed;
content.style.top = top + 'px';
IsGameOver(); //每下落一次，就判断是否游戏结束（最后一行的黑块是否被点击）
if(top >= 0){
create_row();
top = -102;
content.style.top = top + 'px';
if(content.childNodes.length == 6){
delete_row();
}
}
}
//6.删除末尾元素
function delete_row(){
var content = $('content');
content.removeChild(content.lastChild);
}
//7.判断游戏是否结束
function IsGameOver(){
//判断用户是否失败
var rows = $('content').childNodes; //获取所有的行
//1.用户点击了白块,判断每行的pass1（白块）是否被点击
for(let i=0;i < rows.length;i++){
if(rows[i].pass1 == 1) fail(); //只要点击了白块，就游戏失败
}
//2.判断到达底端的黑块是否被点击，当行数为6时，说明还为删除已经点击过的黑行
//若行数为5，说明已经删除了点击过的黑行，并且最上面一行，
//要么是刚要下落，要么就是还没下落结束
//每次底部都是有一行的，每次只要判断底部的那一行黑块是否被点击
if(rows.length == 5 && rows[rows.length-1].pass2 != 1)
fail();
}
//8.游戏结束后执行的函数
function fail(){
clearInterval(clock);
confirm('你的最终得分为' + parseInt($('score').innerHTML));
$('score').innerHTML = 0;
var content = $('content');
content.innerHTML=null;
content.style.top = '-408px';
speed = 2;
flag = 0;
}
//9.点击游戏开始后，开始初始化.用时钟每30ms调用move函数
function start(){
if(flag == 0){
init();
flag = 1;
}else {
alert("游戏已经开始了，不要再点击");
}
}
//10.init函数，来驱动move函数。然后给main绑定onclick函数，写judge函数
function init(){
var content = $('content');
for(var i=0; i < 4;i++){
create_row();
}
$('main').onclick = function(ev){
var ev = event || ev; //获取事件对象.也就是点击事件
judge(ev);
}
clock = window.setInterval(move,30);
}
//11.判断用户点击的块并标记
function judge(ev){
//只标记用户点击的是哪一行的什么颜色块
if(ev.target.className.indexOf('cell') != -1 &&
ev.target.className.indexOf('black') == -1
){
ev.target.parentNode.pass1 = 1; //定义属性pass1，标记白块
}
if(ev.target.className.indexOf('cell') != -1 &&
ev.target.className.indexOf('black') != -1
){
ev.target.className = 'cell'; //黑块变成白块
ev.target.parentNode.pass2 = 1; //定义属性pass2，标记黑块
score();//分数加1
}
}
//12.判断用户点击后，计算分数
function score(){
var score = $('score');
var newscore = parseInt(score.innerHTML) + 1;
score.innerHTML = newscore;
if(newscore % 10 == 0){
speed_up();
}
}
//13.加速函数
function speed_up(){
speed += 1;
}