二十一天——打卡第三天

Posted 2021-11-22 空白407

        昨天写了一个简单的跑酷小游戏，主要用到了javascript的定时器，动态生成，删除元素，事件等知识点。

        今天继续写一个小游戏——别踩白块。

        首先有一个菜单栏（开始游戏和结束游戏界面）

 

 

 在就是游戏主体

 最后在弄一个计分栏

 html如下：

<div class="box box3">
				<div class="kuang"></div>  //游戏主题 居中
				<div class="count">0分</div>	//计分栏 右对齐
				<div class="menu">				//菜单栏  左对齐
					<div>开始游戏</div>
				</div>
			</div>

CSS如下：

.kuang {
				position: relative;
				margin: 2% auto;
				height: 90%;
				width: 30%;
				overflow: hidden;
				background-color: burlywood;
			}
			.count {
				position: absolute;
				right: 5%;
				top: 30%;
				width: 15%;
				height: 20%;
				color: red;
				text-align: center;
				font-size: 40px;
				line-height: 150px;
				background-color: aquamarine;
			}
			.menu {
				position: absolute;
				left: 5%;
				top: 30%;
				width: 15%;
				height: 20%;
				font-size: 40px;
				color: red;
			}
			.menu:hover {
				cursor: pointer;
			}
			.kuai {
				position: absolute;
				margin-left: 0;
				width: 25%;
				height: 20%;
				background-color: #000000;
			}

接着是js

思路：首先在主体（kuang）里动态生成一个盒子（类目叫kuai）通过kuai的left的值控制其位置，由于kuai的位置随机，可以用Math.random()函数随机生成0-3的随机数num1在将其left的值设置为其宽度*num1即控制kuai在第一，二，三或者四个位置。同时为了让颜色不单调可以定义一个数组color=[]，数组里面存放不同颜色的单词，再设置一个随机数控制数组下标就可以随机给kuai设置不同的颜色。

接着再用定时器控制所有的块不停的增加top值使其下落。

// 得到小方块
				function getkuai(){
					var kuang=document.querySelector('.kuang');
					var kuai=document.createElement('div');
					var num1=Math.floor(Math.random()*4);
					var kuai_color=['white','black','yellow','blue'];
					var num2=Math.floor(Math.random()*4);
					kuang.appendChild(kuai);
					kuai.className="kuai";
					kuai.style.backgroundColor=kuai_color[num2];
					kuai.style.left=kuai.offsetWidth*num1 + 'px';
					kuai.style.top= -kuai.offsetHeight + 1 + 'px';
				}
// 小方块下落
				
				
				function kuai_down() {
					//getkuai();
					var count_time=0;
					var time_down=setInterval(function(){
					var kuaiAll=document.querySelectorAll('.kuai');
					else ++count_time;
					for(var i=0;i<kuaiAll.length;i++) {
						kuaiAll[i].style.top=kuaiAll[i].offsetTop + 1 + 'px';  //没1毫秒top值加1
					}
					if(kuaiAll.length==0) getkuai();
					if(kuaiAll[kuaiAll.length-1].offsetTop>=0) getkuai();
					},1)
				}

 在kuai下落的时候点击块使其消失即删除点击的kuai这个元素。

function clickkuai(kuaiAll) {
					kuaiAll[0].onclick=function(e) {
						e.stopPropagation();  //阻止冒泡 点击kuang时游戏结束，因为kuai是kuang                                的子元素所以如果不阻止冒泡的话点击kuai时游戏也会结束
						var kuang=document.querySelector('.kuang');
						var count_grade=document.querySelector('.count').innerHTML;
						kuang.removeChild(kuaiAll[0]);
					}
					for(var i=1;i<kuaiAll.length-1;i++) {  //只有第一个kuai消失后才能去除其他的kuai同时也要阻止冒泡
						kuaiAll[i].onclick=function(e){
							e.stopPropagation();
						}
					}
				}

 大体完成，接着就是完成游戏开始和结束的控制和计分

游戏开始的控制：点击        游戏开始        游戏才进行  点击kuai外面或者kuai掉下去后游戏结束弹出重新开始和游戏结束画面。

计分：每完成点击加一分

这些功能明天完善。