别踩白块小游戏

最新推荐文章于 2023-05-11 13:43:25 发布

风叶翩翩

最新推荐文章于 2023-05-11 13:43:25 发布

阅读量661

点赞数 2

分类专栏： H5 JavaScript

本文链接：https://blog.csdn.net/weixin_45743799/article/details/103134934

版权

JavaScript 同时被 2 个专栏收录

54 篇文章 3 订阅

订阅专栏

32 篇文章 2 订阅

订阅专栏

用H5新特性实现别踩白块小游戏。

功能分析：
1.游戏开始按钮
2.每点中一个记一分
3.分数达到二十弹出鼓励弹框
4.点击错误则游戏结束

效果演示
在这里插入图片描述
看了效果有没有急迫的心情呢？

代码演示

body内容

<body>

		<h2>本次得分</h2>

		<h2 id="score">0</h2>

		<div id="main">

			<div id="con">

				<div class="row">

					<div class="fang"></div>

					<div class="fang one"></div>

					<div class="fang"></div>

					<div class="fang"></div>

				</div>

				<div class="row">

					<div class="fang"></div>

					<div class="fang one"></div>

					<div class="fang"></div>

					<div class="fang"></div>

				</div>

				<div class="row">

					<div class="fang"></div>

					<div class="fang"></div>

					<div class="fang one"></div>

					<div class="fang"></div>

				</div>

				<div class="row">

					<div class="fang one"></div>

					<div class="fang"></div>

					<div class="fang"></div>

					<div class="fang"></div>

				</div>

			</div>

		</div>

		<div class="start">开始游戏</div>



	</body>

CSS演示

<style type="text/css">
			#score {

				text-align: center;

			}

			h2 {

				text-align: center;

			}

			div {

				margin: 0 auto;

				width: 100px;

				height: 100px;

			}

			#main {

				width: 400px;

				height: 600px;

				background: blanchedalmond;

				border: 2px solid gray;

				margin: 0 auto;

				position: relative;

				overflow: hidden;

			}

			#con {

				width: 100%;

				height: 400px;

				position: relative;

				top: -100px;
				/*隐藏最上层一行*/

				border-collapse: collapse;

			}

			.row {

				height: 100px;

				width: 100%;


			}

			.fang {

				height: 100px;

				width: 100px;

				float: left;

			}

			.one {

				background: blueviolet;

			}

			.start {

				margin-top: 20px;

				width: 150px;

				height: 50px;

				border-radius: 10px;

				background: yellowgreen;

				line-height: 50px;

				text-align: center;

				color: #fff;

			}
		</style>

JavaScript内容

<script>
		//根据id获取元素

		function $(id) {

			return document.getElementById(id);

		}

		var clock = null;

		var state = 0;

		var speed = 4;

		/*
		
		* 初始化 init
		
		*/

		function init() {

			for (var i = 0; i < 4; i++) {

				createrow();

			}

			//添加onclick事件

			$('main').onclick = function(ev) {

				ev = ev || event

				judge(ev);

			}

			//定时器 每30毫秒调用一次move()

			clock = window.setInterval('move()', 50);

		}

		//判断是否点击紫块

		function judge(ev) {

			if (state == 3) {

				alert('请刷新此页面，重新开始游戏')

				return;

			}

			if (ev.target.className.indexOf('one') == -1) {

				fail();

			} else {

				//点击目标元素

				ev.target.className = 'fang';

				ev.target.parentNode.pass = 1;

				score();

			}

		}

		//游戏结束

		function fail() {

			clearInterval(clock);

			state = 3;

			confirm('你的最终得分为' + parseInt($('score').innerHTML));

		}

		//创建div

		function creatediv(className) {

			var div = document.createElement('div');

			div.className = className;

			return div;

		}

		function createrow() {

			var con = $('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 createcell() {

			var temp = ['fang', 'fang', 'fang', ];

			var i = Math.floor(Math.random() * 4);

			temp[i] = 'fang one';

			return temp;

		}

		//移动黑色块

		function move() {

			var con = $('con');

			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) {

				createrow();

				con.style.top = '-100px';

				delrow();

			} else if (top == (-100 + speed)) {

				var rows = con.childNodes;

				if ((rows.lenth == 5) && (rows[rows.length - 1].pass !== 1)) {

					fail();

				}

			}

		}

		//加快速度

		function speedup() {

			speed += 2;

			if (speed == 20) {

				alert('你真厉害，继续加油呦！');

			}

		}

		//删除行

		function delrow() {

			var con = $('con');

			if (con.childNodes.length == 6) {

				con.removeChild(con.lastChild);

			}

		}

		//计算得分

		function score() {

			var newscore = parseInt($('score').innerHTML) + 1;

			$('score').innerHTML = newscore;

			if (newscore % 10 == 0) {

				speedup();

			}

		}

		document.querySelector('.start').addEventListener('click', init)
	</script>