web学习(3)--别踩白块儿(HTML版)(web入门)

最新推荐文章于 2024-11-14 05:20:33 发布

原创最新推荐文章于 2024-11-14 05:20:33 发布 · 3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #web #别踩白块儿

【web学习】专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍如何使用HTML创建别踩白块儿游戏。通过div标签表示每个方块，通过设置背景颜色和display属性来布局黑块，使它们每四个换行展示。读者需要注意JavaScript文件的引用和路径配置。

这次与上一篇的别踩白块儿原理不同，就是直接利用div标签，将每一个块以div标签的形式表现出来，然后黑块就是将background-color设置为黑色，然后利用display让块排成一行，每四个换行，效果图：

HTML:（注意js文件的名字和所放位置，如果和我命名的不一样，注意在第六行修改）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/index.js" ></script>  <!--注意引入的js的文件名字-->
		<style>
			.WhiteBlock{      /*定义白色砖块一类的样式*/
				width:100px;
				height:100px;
				display: inline-block;
				background-color: white;
				border:1px solid black;
				box-sizing: border-box;     /*令浏览器呈现出带有指定宽度和高度的框*/
			}
			.BlackBlock{
				width:100px;
				height:100px;
				display: inline-block;    /*应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性*/
				background-color: black;
				border:1px solid black;
				box-sizing: border-box;
			}
			.container{
				width:400px;
				height:600px;
			}
		</style>
	</head>
	<body>
		<div id = 'divTimer' style="font-size: 30px;color: red">0.0</div>
		<button style="font-size: 20pt" onclick="Game.startGame()">开始/重玩</button>
		<div class="container"></div>
		<script>
			var Game = new WhiteBlock(document.querySelector(".container"));
		</script>
	</body>
</html>

JavaScript :

(function(){
	var Model = function(container){
		var me = this;
		me.container = container;
		//待删行数
		me.toBeErased = 10;
		
		me.initBlock();
		
		me.container.addEventListener('click',function(e){
		var node = e.target;	
		var r = me.checkBlock(node);
		if(r===0)
		{
			clearInterval(me.interval);
			alert("踩到白块了，游戏结束");
		}
		else if(r===2)
		{
			me.blockArr.pop();
			
			if(++me.erased>me.toBeErased-6)
			{
				me.blockArr.unshift(-1);
			}
			else{
				me.blockArr.unshift(Math.random()*4|0);
			}
			me.updateblock();
			if(me.erased===me.toBeErased){
				
				alert('恭喜你，过关！');
				clearInterval(me.interval);   //停掉计时器
			}
		}
		});
	}
	    Model.prototype.startGame = function(){
	    	var me = this;
	    	me.erased = 0;
		//列索引初始化
	    	me.blockArr = [];
	    		me.startTime = new Date();
			me.interval = setInterval(function() {   //计时器
				var d = new Date;
				var d1 = d - me.startTime;
				document.querySelector('#divTimer').innerHTML = d1 / 1000;
			}, 100);
		for(var i=0;i<6;i++)
		{
			me.blockArr[i]=Math.random()*4|0;
		}
		me.updateblock();
	    }
	/**
	 * 初始化block
	 */
	Model.prototype.initBlock = function(){
		var me = this;
		for(var i=0;i<6;i++)
		{
			for(var j=0;j<4;j++)
			{
				var div = document.createElement("div");  //添加div标签
				div.setAttribute("class","WhiteBlock");    //为标签添加指定属性
				me.container.appendChild(div);            
			}
		}
	}
	/**
	 * 更新黑块
	 */
	Model.prototype.updateblock = function(){
		var me = this;
		var nodes = me.container.childNodes;
		//把所有块变成白块，再根据数组画黑块
		for(var i=0;i<24;i++)
		{
			nodes[i].setAttribute("class","WhiteBlock");//添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值
		}
		for(var i=0;i<6;i++)
		{
			var index = me.blockArr[i];
			if(index===-1)
			{
				continue;
			}
			nodes[i*4+index].setAttribute("class","BlackBlock");   //设置每一行的黑块
		}
	}
	/**
	 * 检查点击的块
	 * @param node：传入的块
	 * @return 0白块
	 *         1 非最后一行的黑块
	 *         2 最后一行的黑块
	 */
	Model.prototype.checkBlock = function(node){
		var me = this;
		var nodes = me.container.childNodes;
		for(var i=0;i<6;i++)
		{
			if(nodes[i*4+me.blockArr[i]]===node){
				if(i===5)
				return 2;
			return 1;
			}
		}
		return 0;
	}
	
	
	//暴露model
	window.WhiteBlock = Model;
}());