俄罗斯方块(原生js 面向过程)

已于 2023-03-26 21:56:25 修改
阅读量110 收藏
点赞数
文章标签： javascript
于 2023-03-26 21:47:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73480156/article/details/129785337
版权

废话不多说直接上源码复制过去就能用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>俄罗斯升级</title>
		<style type="text/css">
			#zong{
				border: 0px solid red;
				width: 550px;
				height: 651px;
				overflow: hidden;
				margin-left: auto;
				margin-right: auto;
			}
			#qt{
				width: 300px;
				height: 600px;
				border: 3px solid darkgray;
				float: left;
				margin-left: 10px;
			}
			#borde{
				width: 300px;
				height: 600px;
				overflow: hidden;
			}
			.tab1{
				width: 300px;
				height: 590px;
				margin-top: -87px;
			}
			.tr1{
				width: 200px;
				height: 25px;
				border: 1px;
			}
			.td1{
				width: 18px;
				height: 23px;
				border: 1px solid darkgray;
				background-color: #FFFFFF;
			}
			.tab2{
				width: 200px;
				height: 200px;
			}
			.tr2{
				width: 200px;
				height: 25px;
			}
			.td2{
				width: 22px;
				height: 22px;
				border: 1px solid darkgray;
				background-color: #FFFFFF;
			}
			.bor{
				border-top: 0px solid red;
			}
			#xiaoditu{
				width: 200px;
				height: 222px;
				border: 3px solid darkgray;
			}
				
		</style>
	</head>
	<body>
		<div id="zong">
			<div style="width: 200px; height: 600px;float: left;">
				<div id="xiaoditu"></div>
				<p id="tex" style="width: 200px; height:50px;line-height: 50px; font-size: 20px; text-align: center;"></p>
				<p id="text1" style="width: 200px; height:50px; font-size: 15px; text-align: center;"></p>
				<p style="width: 200px; height:100px; font-size: 15px; text-align: center;">空格快速落下<br />←向左移动<br />↑切换形状<br />→向右移动<br />↓暂停移动</p>
			</div>
			<div id="qt">
				<div id="borde">
					
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var yundong =[
				[
					[[3,0],[4,0],[4,1],[5,1]],
					[[4,1],[4,2],[5,0],[5,1]],
					[[3,0],[4,0],[4,1],[5,1]],
					[[4,1],[4,2],[5,0],[5,1]]
				],
				
				[
					[[3,0],[4,0],[5,0],[4,1]],
					[[4,0],[4,1],[4,2],[5,1]],
					[[3,1],[4,0],[4,1],[5,1]],
					[[4,1],[5,0],[5,1],[5,2]]
				],
				
				[
					[[3,1],[4,0],[4,1],[5,0]],
					[[4,0],[4,1],[5,1],[5,2]],
					[[3,1],[4,0],[4,1],[5,0]],
					[[4,0],[4,1],[5,1],[5,2]]
				],
				[
					[[4,0],[4,1],[5,0],[5,1]],
					[[4,0],[4,1],[5,0],[5,1]],
					[[4,0],[4,1],[5,0],[5,1]],
					[[4,0],[4,1],[5,0],[5,1]]
				],
				
				[
					[[3,1],[4,1],[5,1],[5,0]],
					[[4,0],[4,1],[4,2],[5,2]],
					[[3,0],[3,1],[4,0],[5,0]],
					[[4,0],[5,0],[5,1],[5,2]]
				],
				
				[
					[[3,0],[4,0],[5,0],[5,1]],
					[[4,2],[5,0],[5,1],[5,2]],
					[[3,0],[3,1],[4,1],[5,1]],
					[[4,0],[4,1],[4,2],[5,0]]
				],
				[
					[[3,0],[4,0],[5,0],[6,0]],
					[[4,0],[4,1],[4,2],[4,3]],
					[[3,0],[4,0],[5,0],[6,0]],
					[[4,0],[4,1],[4,2],[4,3]]
				]
			]
			var xarr =[
				[
					[[3,0],[4,0],[4,1],[5,1]],
					[[4,1],[4,2],[5,0],[5,1]],
					[[3,0],[4,0],[4,1],[5,1]],
					[[4,1],[4,2],[5,0],[5,1]]
				],
				
				[
					[[3,0],[4,0],[5,0],[4,1]],
					[[4,0],[4,1],[4,2],[5,1]],
					[[3,1],[4,0],[4,1],[5,1]],
					[[4,1],[5,0],[5,1],[5,2]]
				],
				
				[
					[[3,1],[4,0],[4,1],[5,0]],
					[[4,0],[4,1],[5,1],[5,2]],
					[[3,1],[4,0],[4,1],[5,0]],
					[[4,0],[4,1],[5,1],[5,2]]
				],
				[
					[[4,0],[4,1],[5,0],[5,1]],
					[[4,0],[4,1],[5,0],[5,1]],
					[[4,0],[4,1],[5,0],[5,1]],
					[[4,0],[4,1],[5,0],[5,1]]
				],
				
				[
					[[3,1],[4,1],[5,1],[5,0]],
					[[4,0],[4,1],[4,2],[5,2]],
					[[3,0],[3,1],[4,0],[5,0]],
					[[4,0],[5,0],[5,1],[5,2]]
				],
				
				[
					[[3,0],[4,0],[5,0],[5,1]],
					[[4,2],[5,0],[5,1],[5,2]],
					[[3,0],[3,1],[4,1],[5,1]],
					[[4,0],[4,1],[4,2],[5,0]]
				],
				[
					[[3,0],[4,0],[5,0],[6,0]],
					[[4,0],[4,1],[4,2],[4,3]],
					[[3,0],[4,0],[5,0],[6,0]],
					[[4,0],[4,1],[4,2],[4,3]]
				]
			]
			//小图预告数组
			var xiaoarr =[
				[
					[[3,3],[4,3],[4,4],[5,4]],
					[[4,4],[4,5],[5,3],[5,4]],
					[[3,3],[4,3],[4,4],[5,4]],
					[[4,4],[4,5],[5,3],[5,4]]
				],
				
				[
					[[3,3],[4,3],[5,3],[4,4]],
					[[4,3],[4,4],[4,5],[5,4]],
					[[3,4],[4,3],[4,4],[5,4]],
					[[4,4],[5,3],[5,4],[5,5]]
				],
				
				[
					[[3,4],[4,3],[4,4],[5,3]],
					[[4,3],[4,4],[5,4],[5,5]],
					[[3,4],[4,3],[4,4],[5,3]],
					[[4,3],[4,4],[5,4],[5,5]]
				],
				[
					[[4,3],[4,4],[5,3],[5,4]],
					[[4,3],[4,4],[5,3],[5,4]],
					[[4,3],[4,4],[5,3],[5,4]],
					[[4,3],[4,4],[5,3],[5,4]]
				],
				
				[
					[[3,4],[4,4],[5,4],[5,3]],
					[[4,3],[4,4],[4,5],[5,5]],
					[[3,3],[3,4],[4,3],[5,3]],
					[[4,3],[5,3],[5,4],[5,5]]
				],
				//[[3,0],[3,1],[4,1],[5,1]],
				[
					[[3,3],[4,3],[5,3],[5,4]],
					[[4,5],[5,3],[5,4],[5,5]],
					[[3,3],[3,4],[4,4],[5,4]],
					[[4,3],[4,4],[4,5],[5,3]]
				],
				[
					[[3,3],[4,3],[5,3],[6,3]],
					[[4,3],[4,4],[4,5],[4,6]],
					[[3,3],[4,3],[5,3],[6,3]],
					[[4,3],[4,4],[4,5],[4,6]]
				]
			]
			var zong = document.getElementById("borde");
			var fu = document.getElementById("xiaoditu");
			var data = [
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0]
			]
			//七种颜色
			var sevenColor=["darkgreen ","limegreen","goldenrod","purple","darkblue","orangered","red"];
			//旋转代数
			var rotate = 0;
			//当前方块是什么形状
			var fkng=0;
			createTabl(data[0].length,data.length,zong,"tab1","tr1","td1");
			createTabl(8,8,fu,"tab2","tr2","td2");
			// createTabl(8,8,fu);
			function createTabl(wid,hei,fatherNode,attribute1,attribute2,attribute3){
				var tabl = document.createElement("table");
				tabl.setAttribute("class",attribute1);
				fatherNode.appendChild(tabl);
				for (var i = 0; i < hei; i++) {
					var tr = document.createElement("tr");
					tr.setAttribute("class",attribute2);
					for (var x = 0; x < wid; x++) {
						var td = document.createElement("td");
						td.setAttribute("class",attribute3);
						tr.appendChild(td);
					}
					tabl.appendChild(tr);
				}
			}
			var tdNode=document.getElementsByClassName("td1");
			var tdNodeTwo=document.getElementsByClassName("td2");
			//提升性能局部渲染
			function Rendering(arr,pd){
				for (var i = 0; i < arr.length; i++) {
					if (pd=="bai") {
						tdNode[arr[i][1]*10+arr[i][0]].style.backgroundColor="#FFFFFF";
					} else{
						if (pd=="hui") {
							tdNode[arr[i][1]*10+arr[i][0]].style.backgroundColor="black";
						} else{
							tdNode[arr[i][1]*10+arr[i][0]].style.backgroundColor=sevenColor[fkng];
						}
					}
				}
			}
			function RenderingFu(arr,num){
				for (var i = 0; i < arr.length; i++) {
					tdNodeTwo[arr[i][1]*8+arr[i][0]].style.backgroundColor=sevenColor[num];
				}
			}
			function RenderingFuTwo(arr){
				for (var i = 0; i < arr.length; i++) {
					tdNodeTwo[arr[i][1]*8+arr[i][0]].style.backgroundColor="#FFFFFF";
				}
			}
			//data=1下落状态 data=2落下后的状态 data=0空白部分
			//左右下移动
			function lrdong(pd,arr){
				var leftM=0;
				pd=="l"? leftM=-1 : leftM=1;
				for (var i = 0; i < arr.length; i++) {
					for (var x = 0; x < arr[i].length; x++) {
						pd=="t"? arr[i][x][1]+=1 : arr[i][x][0]+=leftM;
					}
				}
			}
			//方块旋转是否能转换
			function blockRotate(arr){
				var nei = rotate+1;	
				if (nei>3) {
					nei=0;
				}
				//普通边框边界
				for (var i = 0; i < arr[nei].length; i++) {
					if (arr[nei][i][0]>data[0].length-1||arr[nei][i][0]<0||arr[nei][i][1]>data.length-1) {
						return false;
					}
				}
				for (var i = 0; i < arr[nei].length; i++) {
					if (data[arr[nei][i][1]][arr[nei][i][0]]==2){
						return false;
					}	
				}
				return true;
			}
			//游戏结束
			function GameOver(){
				var t=false;
				for (var x = 0; x < data[3].length; x++) {
					if(data[3][x]==2){
						t=true;
						break;
					}
				}	
				return t;
			}
			//是否得结束游戏
			var gameTF;
			//得分总数
			var TotalScore=0;
			var texNode = document.getElementById("tex");
			texNode.innerHTML="总得<span style='color:red; font-size:25px;'>"+TotalScore+"</span>分";
			//方块落下满行删除
			function Fall(){
				//是否得结束游戏
				gameTF=true;
				for (var i = 0; i < data.length; i++) {
					for (var x = 0; x < data[i].length; x++) {
						if(data[i][x]==0){
							break;
						}
						if(x==data[i].length-1){
							TotalScore+=10;
							//一行一行消除
							for (var y = 0; y <data[i].length ; y++) {
								data[i][y]=0;
								tdNode[i*10+y].style.backgroundColor="#FFFFFF";
							}
							for (var  z= i-1; z >0; z--) {
								for (var r = 0; r <data[i].length ; r++) {
									if (data[z][r]>1) {
										data[z][r]=0;
										data[z+1][r]=2;
										tdNode[(z+1)*10+r].style.backgroundColor=tdNode[z*10+r].style.backgroundColor;
										tdNode[z*10+r].style.backgroundColor="#FFFFFF";
									}
								}
							}
							gameTF=false;
						}
					}
				}
				texNode.innerHTML="总得<span style='color:red; font-size:25px;'>"+TotalScore+"</span>分";
			}
			//左右是否能移动
			function LRmoveCollision(arr,pd){
				//普通边框边界
				for (var i = 0; i < arr.length; i++) {
					if (arr[i][0]+1>data[0].length-1&&pd=="r"||arr[i][0]-1<0&&pd=="l") {
						return false;
					}
				}
				//撞上别的固定方块
				for (var i = 0; i < arr.length; i++) {
					if (pd=="l") {
						if (data[arr[i][1]][arr[i][0]-1]==2){
							return false;
						}
					} else{
						if (data[arr[i][1]][arr[i][0]+1]==2){
							return false;
						}
					}
				}
				return true;
			}
			//初始化数据
			function initializationData(){
				for (var i = 0; i < yundong[fkng].length; i++) {
					for (var x = 0; x < yundong[fkng][i].length; x++) {
						yundong[fkng][i][x][0]=xarr[fkng][i][x][0];
						yundong[fkng][i][x][1]=xarr[fkng][i][x][1];
					}
				}
			}
			//碰撞检测
			function collision(arr){
				//普通边框边界
				for (var i = 0; i < arr.length; i++) {
					if (arr[i][1]+1>data.length-1) {
						stateChange(arr,2);
						return false;
					}
				}
				//撞上别的固定方块
				for (var i = 0; i < arr.length; i++) {
					if (data[arr[i][1]+1][arr[i][0]]==2){
						stateChange(arr,2);
						return false;
					}
				}
				return true;
			}
			//状态改变1或2
			function stateChange(arr,pd){
				for (var i = 0; i < arr.length; i++) {
					pd==1 ? data[arr[i][1]][arr[i][0]]=1 : pd==0 ? data[arr[i][1]][arr[i][0]]=0 : data[arr[i][1]][arr[i][0]]=2;
				}
			}
			//不同等级
			var state = 0;
			//定时器不同速度
			var speeds =[300,200,120,90];
			//定时器
			var timer =null;
			//开关
			var suspendSwitch=true;
			//键盘事件 
			//在document对象中注册keydown时间处理函数
			document.onkeydown = keyDown;
			//游戏结束禁止操纵键盘事件
			var jinzhi=true;
			function keyDown(event){
				//标准化事件对象
				var event = event || window.event;
				if (jinzhi) {
					switch(event.keyCode){
						case 37://摁下左箭头键
							if(LRmoveCollision(yundong[fkng][rotate],"l")){
								stateChange(yundong[fkng][rotate],0);
								Rendering(yundong[fkng][rotate],"bai")
								lrdong("l",yundong[fkng]);
								stateChange(yundong[fkng][rotate],1);
								Rendering(yundong[fkng][rotate],"b")
							}
							break;
						case 39://摁下右箭头键
							if(LRmoveCollision(yundong[fkng][rotate],"r")){
								stateChange(yundong[fkng][rotate],0);
								Rendering(yundong[fkng][rotate],"bai")
								lrdong("r",yundong[fkng]);
								stateChange(yundong[fkng][rotate],1);
								Rendering(yundong[fkng][rotate],"b")
							}
							break;
						case 38://摁下上箭头键
							if(blockRotate(yundong[fkng])){
								stateChange(yundong[fkng][rotate],0);
								Rendering(yundong[fkng][rotate],"bai")
								if(rotate==3){
									rotate=0;
								}else{
									rotate+=1;
								}
								stateChange(yundong[fkng][rotate],1);
								Rendering(yundong[fkng][rotate],"b")
							}
							break;
						case 32://摁下空格键
								Rendering(yundong[fkng][rotate],"bai")
								while(collision(yundong[fkng][rotate])){
									stateChange(yundong[fkng][rotate],0);
									lrdong("t",yundong[fkng]);
									stateChange(yundong[fkng][rotate],1);
								}
								Rendering(yundong[fkng][rotate],"b")
							break;
						case 40://摁下下箭头键
							if(suspendSwitch){
								clearInterval(timer);
							}else{
								timer=setInterval(IntervalLuo,speeds[state]);
							}
							suspendSwitch=!suspendSwitch;
							break;	
					}
				}
			}
			//让用户看到当前速度级别
			var textTwo = document.getElementById("text1");
			var tf = true;
			var forZongFu =0;
			var zongFuSwitch=[[0,0],[0,0]];
			zongFuSwitch[0][0]=Math.floor(Math.random()*7);
			zongFuSwitch[0][1]=Math.floor(Math.random()*4);
			zongFuSwitch[1][0]=Math.floor(Math.random()*7);
			zongFuSwitch[1][1]=Math.floor(Math.random()*4);
			//游戏开始
			gameStart();
			function gameStart(){
				textTwo.innerHTML="当前等级:<span style='color:red; font-size:20px;'>0</span><br/>（级别越大方块下落速度越快）";
				//渲染小地图
				RenderingFu(xiaoarr[zongFuSwitch[1][0]][zongFuSwitch[1][1]],zongFuSwitch[1][0]);
				//随机数
				fkng=zongFuSwitch[0][0];
				rotate=zongFuSwitch[0][1];
				//定时器
				timer = setInterval(IntervalLuo,300);
			}
			function IntervalLuo(){
				if(collision(yundong[fkng][rotate])){
					stateChange(yundong[fkng][rotate],0);
					Rendering(yundong[fkng][rotate],"bai");
					lrdong("t",yundong[fkng]);
					stateChange(yundong[fkng][rotate],1);
					Rendering(yundong[fkng][rotate],"qita");
				}else{
					Rendering(yundong[fkng][rotate],"hui");
					//初始化数据
					initializationData()
					//随机数
					forZongFu+=1;
					if (forZongFu>1) {
						forZongFu=0;
					}
					if (forZongFu==1) {
						RenderingFuTwo(xiaoarr[zongFuSwitch[1][0]][zongFuSwitch[1][1]])
						zongFuSwitch[0][0]=Math.floor(Math.random()*7);
						zongFuSwitch[0][1]=Math.floor(Math.random()*4);
						fkng=zongFuSwitch[forZongFu][0];
						rotate=zongFuSwitch[forZongFu][1];
						//渲染小地图
						RenderingFu(xiaoarr[zongFuSwitch[0][0]][zongFuSwitch[0][1]],zongFuSwitch[0][0]);
					} else{
						RenderingFuTwo(xiaoarr[zongFuSwitch[0][0]][zongFuSwitch[0][1]])
						zongFuSwitch[1][0]=Math.floor(Math.random()*7);
						zongFuSwitch[1][1]=Math.floor(Math.random()*4);
						fkng=zongFuSwitch[forZongFu][0];
						rotate=zongFuSwitch[forZongFu][1];
						//渲染小地图
						RenderingFu(xiaoarr[zongFuSwitch[1][0]][zongFuSwitch[1][1]],zongFuSwitch[1][0]);
					}
					//查看有无满行
					Fall();
					//是否结束游戏
					if (gameTF){
						if(GameOver()){
							clearInterval(timer);
							alert("游戏结束");
							tf=false;
							jinzhi=false;
						}
					}
					if(tf){
						if (TotalScore>=660&&state<3) {
							state=3;
							clearInterval(timer)
							timer = setInterval(IntervalLuo,speeds[state]);
							textTwo.innerHTML="当前等级:<span style='color:red; font-size:20px;'>"+state+"</span><br/>（级别越大方块下落速度越快）";
						}else if(TotalScore>=350&&state<2){
							state=2;
							clearInterval(timer)
							timer = setInterval(IntervalLuo,speeds[state]);
							textTwo.innerHTML="当前等级:<span style='color:red; font-size:20px;'>"+state+"</span><br/>（级别越大方块下落速度越快）";
						}else if(TotalScore>=100&&state<1){
							state=1;
							clearInterval(timer)
							timer = setInterval(IntervalLuo,speeds[state]);
							textTwo.innerHTML="当前等级:<span style='color:red; font-size:20px;'>"+state+"</span><br/>（级别越大方块下落速度越快）";
						}
					}
				}
			}
		</script>
	</body>
</html>

m0_73480156
关注
js面试准备（自留，持续更新）
Y_ooo的博客
03-23 869
1. 数据类型有哪些 6+1 6种简单数据类型（原始类型）：undefined、null、boolean、number、string、symbol。其中symbol是es6新增的。 1种复杂数据类型：Object对象 1）typeof操作符 需要注意的是typeof是一个操作符而不是函数，因此不需要参数。 调用typeof null时返回的是“object”，这是因为特殊值null被认为是一个对空对象的引用。 严格来讲函数在js里被认为是对象，而不是数据类型，但函数有自己的特性，因此需要通过typeof来区
原生JavaScript编写俄罗斯方块
12-08
【原生JavaScript编写俄罗斯方块】是一个挑战性的项目，它涉及到JavaScript编程语言的基本知识以及游戏开发的技巧。在这个项目中，开发者尝试用JavaScript从零开始实现经典的俄罗斯方块游戏。以下是一些关键的知识点...
原生JS实现俄罗斯方块
subsistent的博客
10-15 352
【代码】原生JS实现俄罗斯方块。
原生JS实现俄罗斯方块源码转载
红岸基地
03-24 330
运行效果 源码 <!doctype html><html><head></head><body> <div id="box" style="width:252px;font:25px/25px 宋体;background:#000;color:#9f9;border:#999 20px ridge;text-shadow:2px 3px 1px #0f0;"></div> <script> var dom
原生js编写俄罗斯方块
tdl081071tdy的博客
06-06 1488
效果如下 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
JavaScript进阶(四)
qq_461491877的博客
01-30 1864
JavaScript进阶(四) 2019版黑马程序员javaScript进阶面向对象ES6 122集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1Kt411w7MP?from=search&seid=936655930091245798&spm_id_from=333.337.0.0 2020版尚硅谷Web前端ES6教程，涵盖ES6-ES11 68集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1uK411H7
javaScript ES6-ES11新特性总结
TylerYue的博客
10-27 440
ES6-ES11新特性知识点
学习ES6新特性的过程中记录的笔记
violateer的博客
08-29 208
1.概述 ECMAScript是一种由ECMA国际在标准ECMA-262中定义的脚本语言规范。 查看ECS6兼容性支持 2.let关键字 变量不能重复声明 块级作用域 { let a=100; } console.log(a); //以上代码会报错，在作用域外部无法访问到'a'变量 //如果是var变量就可以访问到(变量提升) 不存在变量提升 var: console.log(a); var a=100; // 输出 undefined // var变量进行变量提升，上
ES6和ES7及ES8新特性最新规范知识详细总结
weixin_45168167的博客
11-22 3841
一、ECMASript 相关介绍 ECMA概述 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hWfWai55-1637595380774)(images/微信截图_20201004101830.png)] ​ Ecma国际（Ecma International）是一家国际性会员制度的信息和电信标准组织。1994年之前，名为欧洲计算机制造商协会（European Computer Manufacturers Association）。因为计算机的国际化，组织的标准牵涉到很多其
ES5和ES6
hzg_hou的博客
05-17 324
ES5和ES6
俄罗斯方块.zip 使用js面面相对象编程方式编写的原生俄罗斯方块。
06-06
《使用JavaScript实现面向对象编程的俄罗斯方块游戏详解》 在计算机编程领域，JavaScript作为一种广泛应用于Web开发的脚本语言，其灵活性和强大的功能使其在创建动态网页和交互式应用中占据重要地位。本篇文章将...
tetris_js:用香草ES6编写的简单俄罗斯方块克隆
03-22
"tetris_js" 是一个项目名称，表明这是一个使用JavaScript语言实现的俄罗斯方块游戏。"香草ES6"指的是使用了纯正的、基础的ES6（ECMAScript 6）语法，没有引入任何额外的库或框架，保持代码简洁和原生。 【描述分析...
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 221
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 519
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
npm 和 npx 的区别和使用场景
最新发布
Dou_Hua6的博客
10-09 402
自动下载和缓存：如果本地未安装所需包，npx会自动下载并执行，执行完毕后可以选择保留或删除。脚本运行：通过package.json中的scripts字段定义和运行自定义脚本。依赖管理：管理项目的dependencies和devDependencies。简化命令行工具的使用：临时执行命令，避免全局安装带来的版本冲突或污染。npm 全称：Node Package Manager。发布包：将自己的包发布到npm注册表供他人使用。：无需全局安装即可运行npm包中的可执行文件。
抖音矩阵云剪系统源码搭建，矩阵系统贴牌
Z1527050890的博客
10-09 646
为了更高效地管理和运营抖音账号，提高内容产出效率和传播效果，抖音・矩阵云剪系统应运而生。本文将详细介绍抖音・矩阵云剪系统的搭建过程，帮助读者快速构建自己的矩阵云剪系统。抖音・矩阵云剪系统的搭建需要综合考虑技术选型、系统架构设计、功能模块开发、系统测试和部署等方面。通过合理的规划和设计，可以构建出高效、稳定、安全的矩阵云剪系统，帮助用户更好地管理和运营抖音账号，提高内容产出效率和传播效果。抖音・矩阵云剪系统是一种基于云计算技术的视频编辑和分发平台，它可以帮助用户快速制作、编辑和发布大量高质量的抖音视频。
vue-live2d看板娘集成方案设计使用教程
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1347
vue-live2d看板娘集成方案设计使用教程
javascript中==和===有什么不同
qq_48763502的博客
10-09 248
这个运算符用于比较两个值是否相等，但会在必要时进行类型转换。当两个值的类型不同，JavaScript 会尝试将它们转换为相同的类型，然后再进行比较。
使用原生JS编写的俄罗斯方块游戏代码实例
"本文通过原生JavaScript实现了一个简单的俄罗斯方块游戏，提供了游戏界面的HTML结构，但具体的JavaScript实现代码并未在摘要中给出。游戏界面包括两个区域，一个是我方游戏区域，另一个是对方游戏区域，每个区域都...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值