js写别踩白块游戏

最新推荐文章于 2024-07-23 11:32:13 发布
最新推荐文章于 2024-07-23 11:32:13 发布
阅读量144 收藏
点赞数
文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48727085/article/details/107971045
版权 
<!DOCTYPE HTML>
<html lang = 'en'>
	<head>
		<meta charset = 'UTF-8'/>
		<title>Document</title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			.boundary{
				position:relative;
				overflow:hidden;
				width:500px;
				height:800px;
				border:10px solid black;
				margin:0 auto;
				margin-top:50px;
			}
			button{
				position:absolute;
				width:500px;
				height:150px;
				font-size:50px;
				background-color:#FFC0CB;
				z-index:2;
			}
			.box{
				position:absolute;
				width:500px;
				height:200px;
				z-index:1;
			}
		</style>
	</head>
	<body>
		<div class = 'boundary'>
			<button>Let's Go</button>
			<div class = 'box'></div>
			<div class = 'box'></div>
			<div class = 'box'></div>
			<div class = 'box'></div>
			<div class = 'box'></div>
		</div>
		<script>
			var num = 0;
			var num1 = 1;
			var num2 = 1;
			var num3 = 1;
			var num4 = 1;
			var num5 = 1;
			var numNew = 1;
			var divBox = document.getElementsByClassName("box")[0];
			var divBox2 = document.getElementsByClassName("box")[1];
			var divBox3 = document.getElementsByClassName("box")[2];
			var divBox4 = document.getElementsByClassName("box")[3];
			var divBox5 = document.getElementsByClassName("box")[4];
			var button = document.getElementsByTagName('button')[0];
			var arrDivNew = [];
			var arrDivNew2 = [];
			var arrDivNew3 = [];
			var arrDivNew4 = [];
			var arrDivNew5 = [];
			button.onclick = function(){
				//当按钮点击后消失
				button.style.display = "none";
				//往页面中的class = 'box'的div插入5个小div
				for(var i = 0; i < 5; i++){
					arrDivNew[i] = document.createElement('div');
					arrDivNew[i].style.width = 100 + 'px';
					arrDivNew[i].style.height = 200 + 'px';
					arrDivNew[i].style.border = '1px solid black';
					arrDivNew[i].style.float = 'left';
					arrDivNew[i].style.boxSizing = 'border-box';
					divBox.appendChild(arrDivNew[i]);
				}
				//往页面中的class = 'box'的div插入5个小div
				for(var i = 0; i < 5; i++){
					arrDivNew2[i] = document.createElement('div');
					arrDivNew2[i].style.width = 100 + 'px';
					arrDivNew2[i].style.height = 200 + 'px';
					arrDivNew2[i].style.border = '1px solid black';
					arrDivNew2[i].style.float = 'left';
					arrDivNew2[i].style.boxSizing = 'border-box';
					divBox2.appendChild(arrDivNew2[i]);
				}
				//往页面中的class = 'box'的div插入5个小div
				for(var i = 0; i < 5; i++){
					arrDivNew3[i] = document.createElement('div');
					arrDivNew3[i].style.width = 100 + 'px';
					arrDivNew3[i].style.height = 200 + 'px';
					arrDivNew3[i].style.border = '1px solid black';
					arrDivNew3[i].style.float = 'left';
					arrDivNew3[i].style.boxSizing = 'border-box';
					divBox3.appendChild(arrDivNew3[i]);
				}
				//往页面中的class = 'box'的div插入5个小div
				for(var i = 0; i < 5; i++){
					arrDivNew4[i] = document.createElement('div');
					arrDivNew4[i].style.width = 100 + 'px';
					arrDivNew4[i].style.height = 200 + 'px';
					arrDivNew4[i].style.border = '1px solid black';
					arrDivNew4[i].style.float = 'left';
					arrDivNew4[i].style.boxSizing = 'border-box';
					divBox4.appendChild(arrDivNew4[i]);
				}
				//往页面中的class = 'box'的div插入5个小div
				for(var i = 0; i < 5; i++){
					arrDivNew5[i] = document.createElement('div');
					arrDivNew5[i].style.width = 100 + 'px';
					arrDivNew5[i].style.height = 200 + 'px';
					arrDivNew5[i].style.border = '1px solid black';
					arrDivNew5[i].style.float = 'left';
					arrDivNew5[i].style.boxSizing = 'border-box';
					divBox5.appendChild(arrDivNew5[i]);
				}
			//让5行小div动起来
			divBox5.style.bottom = 800 + 'px';
			divBox.style.bottom = 600 + 'px';
			divBox2.style.bottom = 400 + 'px';
			divBox3.style.bottom = 200 + 'px';
			divBox4.style.bottom = 0 + 'px';
			var timer = setInterval(function(){
			
				if(num >= 0 && num <= 10){
					numNew = 1;
				}else if(num > 10 && num <= 15){
					numNew = 2;
				}else if(num > 15 && num <= 23){
					numNew = 3;
				}else if(num > 23 && num <= 40){
					numNew = 4;
				}else if(num > 50 && num <= 60){
					numNew = 4.2;
				}else if(num > 60 && num <= 70){
					numNew = 4.4;
				}else if(num > 70 && num <= 80){
					numNew = 4.6;
				}else if(num > 80 && num <= 90){
					numNew = 4.8;
				}else{
					numNew = 5;
				}




				var back5 = Math.floor(Math.random()*5);
				if(parseInt(divBox5.style.bottom) <= -200){
					divBox5.style.bottom = 801 + 'px';
					num5 = 0;
				}
				if(parseInt(divBox5.style.bottom) === 801){
					for(var i = 0; i < 5; i++){
						if(i != back5){
							arrDivNew5[i].style.backgroundColor = 'transparent';
							arrDivNew5[i].onclick = function(){
								this.style.backgroundColor = 'gray';	
								alert('积分数量：' + num + ' 继续加油!');
								num = 0;
								clearInterval(timer);
							}
						}else{
							arrDivNew5[i].style.backgroundColor = '#FFC0CB';
							arrDivNew5[i].onclick = function(){
								this.style.backgroundColor = 'gray';	
								num++;
								num5 = 1;
							}
						}
					}
				}
				 divBox5.style.bottom = parseInt(divBox5.style.bottom) - numNew + 'px';
				if(parseInt(divBox5.style.bottom) < 0&&num5 === 0){
						alert('积分数量：' + num + ' 继续加油!');
						num = 0;
						clearInterval(timer);
				}
				var back = Math.floor(Math.random()*5);
				if(parseInt(divBox.style.bottom) <= -200){
					divBox.style.bottom = 801 + 'px';
					num1 = 0;
				}
				if(parseInt(divBox.style.bottom) === 801){
					for(var i = 0; i < 5; i++){
						if(i != back){
							arrDivNew[i].style.backgroundColor = 'transparent';
							arrDivNew[i].onclick = function(){
								this.style.backgroundColor = 'gray';	
								alert('积分数量：' + num + ' 继续加油!');
								num = 0;
								clearInterval(timer);
							}
						}else{
							arrDivNew[i].style.backgroundColor = '#FFC0CB';
							arrDivNew[i].onclick = function(){
								this.style.backgroundColor = 'gray';	
								num++;
								num1 = 1;
							}
						}
					}
				}
				divBox.style.bottom = parseInt(divBox.style.bottom) - numNew + 'px';
				if(parseInt(divBox.style.bottom) < 0&&num1 === 0){
						alert('积分数量：' + num + ' 继续加油!');
						num = 0;
						clearInterval(timer);
				}
				var back2 = Math.floor(Math.random()*5);
				if(parseInt(divBox2.style.bottom) <= -200){
					divBox2.style.bottom = 801 + 'px';
					num2 = 0;
				}
				if(parseInt(divBox2.style.bottom) === 801){
					for(var i = 0; i < 5; i++){
						if(i != back2){
							arrDivNew2[i].style.backgroundColor = 'transparent';
							arrDivNew2[i].onclick = function(){
								this.style.backgroundColor = 'gray';	
								alert('积分数量：' + num + ' 继续加油!');
								num = 0;
								clearInterval(timer);
							}

						}else{
							arrDivNew2[i].style.backgroundColor = '#FFC0CB';
							arrDivNew2[i].onclick = function(){
								this.style.backgroundColor = 'gray';	
								num++;
								num2 = 1;
							}
						}
					}
				}
				 divBox2.style.bottom = parseInt(divBox2.style.bottom) - numNew + 'px';
				if(parseInt(divBox2.style.bottom) < 0&&num2 === 0){
						alert('积分数量：' + num + ' 继续加油!');
						num = 0;
						clearInterval(timer);
				}
				var back3 = Math.floor(Math.random()*5);
				if(parseInt(divBox3.style.bottom) <= -200){
					divBox3.style.bottom = 801 + 'px';
					num3 = 0;
				}
				if(parseInt(divBox3.style.bottom) === 801){
					for(var i = 0; i < 5; i++){
						if(i != back3){
							arrDivNew3[i].style.backgroundColor = 'transparent';
							arrDivNew3[i].onclick = function(){
								this.style.backgroundColor = 'gray';	
								alert('积分数量：' + num + ' 继续加油!');
								num = 0;
								clearInterval(timer);
							}
						}else{
							arrDivNew3[i].style.backgroundColor = '#FFC0CB';
							arrDivNew3[i].onclick = function(){
								this.style.backgroundColor = 'gray';	
								num++;
								num3 = 1;
							}
						}
					}
				}
				 divBox3.style.bottom = parseInt(divBox3.style.bottom) - numNew + 'px';
				if(parseInt(divBox3.style.bottom) < 0&&num3 === 0){
						alert('积分数量：' + num + ' 继续加油!');
						num = 0;
						clearInterval(timer);
				}
				var back4 = Math.floor(Math.random() * 5);
				if(parseInt(divBox4.style.bottom) <= -200){
					divBox4.style.bottom = 801 + 'px';
					num4 = 0;
				}
				if(parseInt(divBox4.style.bottom) === 801){
					for(var i = 0; i < 5; i++){
						if(i != back4){
							arrDivNew4[i].style.backgroundColor = 'transparent';
							arrDivNew4[i].onclick = function(){
								this.style.backgroundColor = 'gray';	
								alert('积分数量：' + num + ' 继续加油!');
								num = 0;
								clearInterval(timer);
							}
						}else{
							arrDivNew4[i].style.backgroundColor = '#FFC0CB';
							arrDivNew4[i].onclick = function(){
								this.style.backgroundColor = 'gray';	
								num++;
								num4 = 1;
							}
						}
					}
				}
				 divBox4.style.bottom = parseInt(divBox4.style.bottom) - numNew + 'px';
				if(parseInt(divBox4.style.bottom) < 0&&num4 === 0){
						alert('积分数量：' + num + ' 继续加油!');
						num = 0;
						clearInterval(timer);
				}
			}, 10);











			





			}
		</script>
	</body>
</html>
源@
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯js 别踩白块游戏解析与源码
d1105260363的博客
08-23 4611
（一）别踩白块 1、考虑游戏中有哪些对象，属性和方法？    别踩白块游戏仔细想想如果非要对象的话，游戏显示界面可以算是一个对象，下滑的区域算一个对象（每个小方格算对象的属性对象吧） 2、这里主要要思考怎样在每一行产生一个随机位置的小黑块，并能标识它，以备游戏当中被正确点到或者未被点到时做记录，还要思考怎样做才能让滑动块不间断？    滑动块的不间断首先想到的肯定是定位，给游戏显示界面一个
JavaScript+html+css实现别踩白块游戏
AC_greener的博客
12-05 3635
游戏思路 先创建一个正方形，将其分成16块 部分代码如下： div{ margin: 0 auto; width: 100px; height: 100px; } #main { width: 400px; height: 400p
js实现-别踩白块儿(es6版)
07-06
使用js完成的别踩白块儿。包含了es6中类的的知识。内附所有源码。
原生js实现一个简易的别踩白块游戏
非常白的小白
09-21 2778
最近偶然在网上看到一个用js做一个别踩白块的练手项目，顿时看来了兴趣，花了两天时间，写好了一个实现了基本功能的别踩白块，当然，由于只是来练手，其中诸多bug,以及兼容性问题，楼主表示并不想解决，如果有感兴趣的同行，可以复制下面源码来补充 1.项目部分 界面样式部分不是很多，一个简单的两列布局（一行两个div分别显示黑白），加一些基本的样式，主要还是功能部分这一块，功能部分为三个部分，刚开始进...
原生js写简易别踩白块儿
我的博客
08-26 573
简易别踩白块儿 注意事项：① 在一个元素未生成前不可对其添加事件 ② 当数组中有元素为空时：即""，将其转换成字符串时，该字符串中只有不为空的元素。 效果图 步骤： ① 分别为最初始的九个瓷片添加点击事件。若用户点击非黑色瓷片，则点击瓷片的背景变为红色，清除计时器，提示用户游戏结束，用户可选择重新开始游戏（该提示内容在未清除计时器前透明度为0，且z-index较低。当计时器被清除时，该提示...
原生js实现（别踩白块小游戏）
小柒的前端之旅
03-26 2140
原生js实现简单的小游戏，巩固原生js基础知识 js部分有详细注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1....
使用js实现“别踩白块儿”游戏
梦空间
01-29 5681
界面如下：         点击”开始游戏“，”白格“将开始向下移动，此后再每一行上开始出现一个“黑格”，对应列上按下对应的键即可消除黑格，但不可跨行消除（即必须先消除”最近“一行上的”黑格“）（如第1列对应“D”键，第2列对应"F“键，第3列对应”J“键，第4列对应”K“键）。当然，除了可以使用键盘按键消除”黑格“外，可以使用鼠标点击除去“黑格”，这时可以跨行。当按错”键“或点击到”白
原生JS实现别踩白块
08-31
"原生JS实现别踩白块"是一款基于JavaScript、HTML和CSS构建的纯网页游戏，其核心在于通过JavaScript实现游戏逻辑，HTML布局游戏界面，以及CSS美化视觉效果。接下来，我们将详细探讨这些关键技术点。 首先，...
原生JS实现别踩白块小游戏.zip
05-15
在这个名为"原生JS实现别踩白块小游戏.zip"的压缩包中，包含了三份关键文件，用于构建一个基于原生JavaScript的“别踩白块”小游戏。这个游戏旨在帮助学习者掌握JavaScript的基础语法、事件处理、DOM操作以及游戏...
javascript实现别踩白块儿小游戏程序
10-23
我们先看到的未开始的页面黑色和白色方块是随机生成的，完了这么多把没有发现时固定不变的。...如果是黑色的，当然程序也是实现了一次自减，在动画中是实现一次下移的，下移的时候点击的方块到黄颜色的区域会变成灰色
Javascript别踩白块儿（钢琴块儿）小游戏实现代码
10-19
游戏唯一的一个规则，我们只需要不断踩着黑色方块前进即可，这里根据方向键来踩白块，在规定的时间内，每走一次分数加100.下面通过本文给大家分享Javascript别踩白块儿（钢琴块儿）小游戏实现代码，一起看看吧
别踩白块儿HTML5微信游戏特效代码
03-20
总的来说，"别踩白块儿HTML5微信游戏特效代码"是一个基于HTML5和JavaScript开发的轻量级游戏项目，展示了HTML5在移动端游戏开发中的强大功能和广泛应用。通过研究这个游戏的源代码，开发者可以学习到如何利用HTML5和...
JS 实现别踩白块功能
XiaoDong的博客
11-16 2277
此处模仿燕十八老师做的别踩白块功能。自己尚未完成。后序会继续完成的。该项目地址http://study.163.com/course/courseMain.htm?courseId=652005  教程地址：http://study.163.com/course/courseMain.htm?courseId=652005 别踩白块 #main { widt
Js实现别踩白块
qq_45387575的博客
05-15 887
1、offsetTop，与style.top
别踩白块JS代码实现
code changes world!
03-02 4600
1.思路： 1.创建DIV容器；例如：400*400 2.创建4行DIV 3.4行DIV中，再放4列DIV，float left 4.写一个方法，创建4列子DIV，创建一行DIV，把一行四列，插入到容器中 5.定时器，没30毫秒增加TOP值 6.没往下滑100px时，再创建一行四列，插入在窗口的最前面。 别踩白块 #main { width: 400px; height
基于JS的别踩白块游戏
qq_43690370的博客
06-13 261
该小游戏的所以小方块都是基于盒子来实现的，打开时的界面比较简单，用了定位，隐藏了盒子，点击”开始游戏“，”白格“将开始向下移动，此后再每一行上开始出现一个“黑格”，对应列上按下对应的键即可消除黑格。 界面如下： 运行时界面如下： 代码： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid
js实现-别踩白块儿-类
hairy377的博客
07-06 1017
在js类的学习的时候，做的一款js小游戏。难度不高。具体实现看代码，写了注释游戏
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 331
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
从业计算机毕业设计10年，打算用一年时间分享10年毕设经验！
07-23 324
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
最新发布
Gusha_的博客
07-23 606
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值