别踩白块复盘笔记

最新推荐文章于 2022-04-23 21:04:10 发布

苏米素

最新推荐文章于 2022-04-23 21:04:10 发布

阅读量182

点赞数

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/sumisu666/article/details/113576276

版权

前端学习笔记专栏收录该内容

20 篇文章 2 订阅

订阅专栏

别踩白块复盘笔记

在这里插入图片描述

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>别踩白块</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<!--表示分数的部分-->
		<h2>score</h2>
		<h2 id="score">0</h2>
		<!--布局四行四列的白黑块-->
		<div id="main">
			<!--用两个div框住四行的原因，为方便整个content进行绝对定位，
				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;
}

苏米素

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
别踩白块复盘笔记

别踩白块复盘笔记index.htmlindex.cssindex.jsindex.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>别踩白块</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <bo
复制链接

扫一扫