别踩白块儿js

最新推荐文章于 2021-02-16 09:27:13 发布

小王正在学习中

最新推荐文章于 2021-02-16 09:27:13 发布

阅读量441

点赞数

分类专栏：应用实践文章标签： javascript

应用实践专栏收录该内容

1 篇文章 0 订阅

订阅专栏

来源网易云课堂-燕十八老师小游戏

难点：无缝滚动、自动加速

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content = "width = device-width,initial-scale=1.0">
	<title>黑白棋小游戏</title>

	<style type="text/css">
	*{
		margin: 0;
		padding:0;
	}
	html,body{
		width: 100%;
		height: 100%;
	}
	#main,#container{
		position: relative;
		top: 0;
		margin: auto;
		width:400px;
		height: 400px; 
		box-sizing:content-box;
		background-color: orange;
	}
	#main{
		border: 5px solid black;
		overflow: hidden;
	}
	#container{
		top: -100px;
		background-color: white;
	}
	.row{
		width: 100%;
		height: 100px;
		box-sizing:border-box;

	}
	.cell{
		float: left;
		width: 100px;
		height: 100px;
		border: 1px solid black;
		box-sizing:border-box;
		background-color: white;
	}
	.black{
		background-color: black;
	}


	</style>

</head>
<body>
	<h1>得分：<i id="score">0</i></h1>
	<div id="main">
		<div id="container"></div>
	</div>

	<script type="text/javascript">
	// 定时器操作句柄
	var clock=null; 
	// 全局状态变量，0初始化，1进行中，2暂停，3失败
	var state=0;
	var speed = 3;

	init();
	start();

	function init(){
		for(var i=0;i<4;i++){
			crow();
		}

		$('main').onclick = function(ev){
			judge(ev);
		}
	}

	function start(){
		clock = setInterval('move()',100);
	}

	function $(id){
		return document.getElementById(id);
	}

	function judge(ev){
		if(state == 3){
			alert("game over~已经处于失败状态");
			return;
		}

		if(ev.target.className.indexOf('black') == -1){
			fail();
			}else {
				ev.target.className = "cell";
				ev.target.parentNode.pass = 1;
				console.log(ev.target.parentNode.pass)
				score();
			}
	}

	function score(){
		var newScore = parseInt($('score').innerHTML) + 5;
		$('score').innerHTML = newScore;
		if(newScore % 50 == 0){
			accelerate();
		}
		if(newScore == 5000){
			alert('打爆啦');
		}
	}

	function accelerate(){
		// if(speed == 4){
		// 	speed = 5;
		// }
		// if(speed == 5){
		// 	speed = 10;
		// }
		// if(speed == 10){
		// 	speed = 25;
		// }
		// if(speed ==25){
		// 	speed =50;
		// }
			speed += 1;
	}

	// 创建div.row
	function crow(){
		var con = $('container');
		var row = cdiv('row');
		var classes = createSn();
		for(var i = 0;i < 4;i++){
			row.appendChild(cdiv(classes[i]));
		}

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

	// 删最后一行
	function drow(){
		var con = $('container');
		if(con.length == 6){
			con.removeChild(con.lastChild);
		}
	}


	// 创建div,className类名
	function cdiv(className){
		var div = document.createElement('div');
		div.className = className;
		return div;
	}

	// 随机黑块
	function createSn(){
		var arr = ['cell','cell','cell','cell'];
		var i = Math.floor(Math.random()*4);
		arr[i] = 'cell black';

		return arr;
	}

	// 动画
	function move(){
		var con = $('container');
		var top = parseInt(window.getComputedStyle(con,null)['top']);

		if(speed + top >0){
			top = 0;
		}else{
			top += speed;
		}
		con.style.top = top + 'px';

		if(top == 0){
			crow();
			con.style.top = '-100px';
			drow();
		} else if(top == (-100+speed)) {
			var rows = con.childNodes;
			if((rows.length ==5) &&(rows[rows.length-1].pass !== 1)){
				fail();
			}
		}
	}

	function fail(){
		clearInterval(clock);
		state = 3;
		alert("game over~");
	}
	</script>
</body>
</html>

小王正在学习中

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
别踩白块儿js

来源网易云课堂-燕十八老师小游戏难点：无缝滚动、自动加速黑白棋小游戏 *{ margin: 0; padding:0; } html,body{ width: 100%; height: 100%; } #main,#container{ position: relative; top: 0; margin: auto; wi
复制链接

扫一扫