学习笔记01(前端小项目)

从现在开始记录一下我学到的所有课外内容。
从一份前端小项目开始 。
项目来自实验楼中的小游戏别踩白块，同时借鉴了网站中一位朋友分享的实验报告。
https://www.shiyanlou.com/courses/306

下面展示CSS部分。
主要学习了一些属性的使用，
margin: 0 auto 可以用来居中
position 定位属性 其中有static(默认),relative,absolute,fixed
top属性 与顶部的距离
float布局也比较陌生
关于float可以看这个
https://blog.csdn.net/qq_36595013/article/details/81810219?ops_request_misc=&request_id=&biz_id=102&utm_term=css%20float&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-0-81810219

#score {
	text-align: center;
}

h2 {
	text-align: center;
}

.start {
	display: block;
	width: 100px;
	height: 40px;
	border: 1px solid white;
	margin: 0 auto; /*游戏界面居中*/
	margin-top: 10px;
	background-color: #bebebe;
    /*设置字体*/
	font-size: 30px;   
	font-weight: bold;
	text-align: center;
	color: white;
}

div {
	margin: 0 auto;
	width: 100px;
	height: 100px;
}

#main {
	width: 400px;
	height: 400px;
	background: white;
	border: 2px solid gray;
	margin: 0 auto; /*游戏界面居中*/
	overflow: hidden;
}

#con {
	width: 100%;
	height: 400px;
	position: relative;  /*定位  相对自己文档的位置来定位*/
	top: -100px; /*隐藏最上层那行*/
	border-collapse: collapse; /*单元格边框合并*/
}

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

.cell {
	height: 100px;
	width: 100px;
	float: left; /*让各生成的块按顺序在界面内排列*/ /*删除了之后，黑块只会在游戏界面的中间出现*/
}

.black {
	background-color: black;
}

接下来html部分，html相对简单,包含三个部分，分数，游戏界面，和开始按钮。
div默认为纵向布局，如果想用横向布局，可以设置属性为inline-block
下面是html代码。

	<h2>score</h2>
	<h2 id="score">0</h2>
	<div id="main">
		<div id="con"></div>
	</div>
	<button class='start' onclick='init()' onmouseover='mouseover(this)'
		onmouseout="mouseout(this)">start</button>
	<button class='pause' onclick='pause()' onmouseover='mouseover(this)'
		onmouseout="mouseout(this)">pause</button>

下面是js部分。

function mouseover(obj) {
		obj.style.backgroundColor = 'orange';
	}
	function mouseout(obj) {
		obj.style.backgroundColor = '#bebebe';
	}
	var clock = null;
	var speed = 4;
	var score = 0;

	function init() {
		var dt = 30;
		speed = 4;
		createrow();
		clock = window.setInterval('move()', dt); //按照指定的周期（以毫秒计）来调用函数或计算表达式 调用move()每30ms
		//获得点击的元素
		document.getElementById('con').onclick = function(event) {
			judge(event);
		}
	}
	function createrow() {
		var con = document.getElementById('con');
		var row = creatediv('row');
		var arr = createcell();

		con.appendChild(row);

		for (var i = 0; i < 4; i++) {
			row.appendChild(creatediv(arr[i]));
		}

		if (con.firstChild == null) {
			con.appendChild(row);
		} else {
			con.insertBefore(row, con.firstChild);
		}
	}

	//生成新的节点和类名
	function creatediv(className) {
		var div = document.createElement('div');
		div.className = className;
		return div;
	}

	//选出黑块的位置
	function createcell() {
		var temp = [ 'cell', 'cell', 'cell', 'cell' ];
		var i = Math.floor(Math.random() * 4);
		temp[i] = 'cell black';
		return temp;
	}
	function move() {
		var con = document.getElementById('con');
		var top = parseInt(window.getComputedStyle(con, null)['top']);

		if (top < 0) {
			top += speed;
		}
		if (top + speed >= 0) {
			createrow();
			top = -100;
		}
		con.style.top = top + 'px';

		var rows = con.childNodes;
		if (rows.length > 4) {
			if (rows.length == 6) {
				con.removeChild(con.lastChild);
			}
			if (rows[4].pass !== 1 && top == -100 + speed) {
				fail();
			} else {
				pass;
			}
		}
	}
	function fail() {
		clearInterval(clock);
		confirm('Game Over!' + '\n' + 'Final Score: ' + score);
		while (con.hasChildNodes()) {
			con.removeChild(con.firstChild);
		}
		score = 0;
		document.getElementById('score').innerHTML = score;
	}
	function judge(event) {
		if (event.target.className.indexOf('black') == -1) {
			fail();//点击到白块游戏结束
		} else {
			event.target.className = 'cell';//变为白色
			event.target.parentNode.pass = 1;//定义属性pass，表明该行黑块已经被点击
			score += 1;
			document.getElementById('score').innerHTML = score;
			speedup();
		}
	}
	
	
	//暂停
    function pause(event){
        clearInterval(clock)
        event.target.pass=1;
    }

	
	function speedup() {
		if (score >= 10 && score % 10 == 0) {
			speed += 1
		}
	}

关于js部分有很多地方可以练习。
主要是关于属性节点，和元素节点的一些操作。
先说一些函数
clock = window.setInterval(‘move()’, dt); 按照指定的周期（以毫秒计）来调用函数或计算表达式，其中 dt是一个ms级的时间单位，move()是调用的函数，
clearInterval(clock) 停止clock
这个函数的参数 必须是setInterval的返回值 起到结束/暂停的作用

createElement() 创建一个节点(传入参数是节点id)
appendChild() 在节点的子节点末尾添加节点
con.insertBefore(a,b) 将a插入b的前面
这3个函数一般配合使用

Math.floor()
Math.ceil()
上述两个函数参数都为一个数，floor表示向下取整，ceil表示向上取整，两个函数返回整数
var i = Math.floor(Math.random() * 4) 这条语句 i的取值即为0，1，2，3

window.getComputedStyle(a,b)
参数a是dom对象，b为指明要匹配的伪元素,对于普通元素必须指定为null(或省略)
函数返回值是a的css属性的计算值
con.lastChild 代表con的最后一个子节点

关于js的逻辑
给每一行节点只有一个黑块，点击且有一个属性pass为0。在点击属性时，将黑块变成白色，且pass属性设置为1. 当有行到达底部时，检测当前行的pass值，如果是0，则游戏失败。

总体来说项目不难，但对我来说还要再学习熟练。