JavaScript， 实现俄罗斯方块小游戏

最新推荐文章于 2023-02-13 20:27:48 发布
最新推荐文章于 2023-02-13 20:27:48 发布
阅读量1.4k 收藏 3
点赞数 1
分类专栏： JavaScript html+css Web前端 学习笔记 文章标签： javascript function matrix 正则表达式 input button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gloria__zhang/article/details/7704297
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>俄罗斯方块</title>
<style type="text/css">
	body{ width:530px; background:#F7F7F7; margin:20px auto}
	table#gameBoard{ border:1px solid black; border-collapse: collapse; float:left;}
	table#gameBoard td{ width:30px; height:30px; border: 1px dotted #0cc;}
	div#gameControl{ widows:160; float:right; height: 200px;; line-height: 200px;}
	.font{ font-family:'微软雅黑'; font-size:18px; text-align:center;}
	div input { width: 60px; height:25px; }

</style>
<script type="text/javascript">
	

	var T = TETRIS = {
		aBoardGrids : [],
		aShapes: [
			[0xCC00], 
			[0x8888, 0xF00], 
			[0x8C40, 0x6C00], 
			[0x4C80, 0xC600], 
			[0x44C0, 0x8E00, 0xC880, 0xE200], 
			[0x88C0, 0xE800, 0xC440, 0x2E00], 
			[0x4E00, 0x8C80, 0xE400, 0x4C40]
		],																		//代表所有方块的形状数
		init : function(){
			this.oDomBoard = document.getElementById("gameBoard");
			this.oDomScore = document.getElementById("score");
			this.aBoardGrids = new Array(18);
			for (var rows = 0 ; rows < 18 ; rows++){
				this.aBoardGrids[rows] = new Array(10);
				var oDomTr = this.oDomBoard.insertRow(-1);
				for	(var cols = 0 ; cols < 10 ; cols++){
					this.aBoardGrids[rows][cols] = 0;
					oDomTr.insertCell(cols);
				}
			}

			document.onkeydown = function(keyEvent){
				keyEvent = keyEvent || window.event;
				var ikeyNum = keyEvent.which || keyEvent.keyCode;
				switch(ikeyNum){
					case 37://←
						T.oBlock.move("left");
						break;
					case 38://↑	
						T.oBlock.rotate((function (){
							var vShape 		= T.aShapes[T.iShapeIdx][ (++T.index)%T.aShapes[T.iShapeIdx].length];
							var sShape 		= vShape.toString(2);								
							sShape 			= new Array(17 - sShape.length).join(0) + sShape;	
							T.matrix		= sShape.match(/\d{4}/g);	
							return T.matrix;
						})());	//变形
						break;
					case 39://→
						T.oBlock.move("right");
						break;
					case 40://↓
						T.oBlock.move("down");
						break;
				}
			}
		},
		next : function (){
			
			this.iShapeIdx 	= parseInt(Math.random() * this.aShapes.length);
			this.index 		= 0;
			var vShape 		= this.aShapes[this.iShapeIdx][this.index];
			var sShape 		= vShape.toString(2);								//将16进制转换为二进制
			sShape 			= new Array(17 - sShape.length).join(0) + sShape;	//不够16位，在前面用0补全 
			this.matrix		= sShape.match(/\d{4}/g);							//利用正则表达式匹配

			this.oBlock = new TETRIS.Block(this.matrix);
					
			clearInterval(T.timer);
			//注册定时器
			T.timer = setInterval(function (){
				T.oBlock.move("down");
			}, 1000);
			
			
			if( !T.oBlock.checkBlock() ){
				alert("Game Over~");
				clearInterval(T.timer);
			
			}
			
		},
		updateBoard : function (){		//更新面板
			for(var i = 0 ; i < 4 ; i++){
				this.aBoardGrids[T.oBlock.shape[i].y][T.oBlock.shape[i].x] = 1;
			}
		},
		eraseLines : function (){
			var iLines = 0;
			for(var j = 17 ; j >= 0 ; j--){
				var num = 0;
				for(var i = 0 ; i< 10 ; i++){
					if(this.aBoardGrids[j][i] == 1)
						num ++;
				}
				if(num == 10){
					iLines ++;
					for(var m = 0 ; m < i ; m++){
						for(var n = j ; n > 0 ; n--){
							this.aBoardGrids[n][m] = this.aBoardGrids[n-1][m];
							T.oDomBoard.rows[n].cells[m].style.background = T.oDomBoard.rows[n-1].cells[m].style.background;
						}
						this.aBoardGrids[0][m] = 0;
					}
					j++;
				}
			}
			return iLines;
		},
		setScore : function (iLines){
			var iScore = parseInt(this.oDomScore.innerHTML);
			if(iLines == 1){
				iScore += 100;
			} else if(iLines == 2){
				iScore += 300;
			} else if(iLines == 3){
				iScore += 500;
			} else if(iLines == 4){
				iScore += 1000;
			}
			this.oDomScore.innerHTML = iScore;
		}
	}
	
	TETRIS.Block = function (matrix){

		this.shape = (function(){
			
			var aShape = [];
			for(var i = 0 ; i < matrix.length ; i++){
				var sValue = matrix[i];
				for(var j = 0 ; j < sValue.length ; j++){
					if(sValue.charAt(j) == "1"){
						aShape.push({ x : j+3 , y : i });
					}  
				}
			}
			
			return aShape;
			
		})();
		this.draw();
	}
	
	TETRIS.Block.prototype.move = function (direction){//移动
		if(this.checkBlock(this.shape,direction)){
			this.draw("clear");
			for(var i = 0 ; i < 4 ; i++){
				switch(direction){
					case "left"://←	
						this.shape[i].x--;
						break;
					case "right":
						this.shape[i].x++;
						break;
					case "down":
						this.shape[i].y++;
						break;
				}
			}
			this.draw();
		} else {
			if(direction == "down"){
				this.draw();
				T.updateBoard();	//更新面板
				var iLines = T.eraseLines();
				
				if(iLines > 0){
				
					T.setScore(iLines);
					
				}
				
				T.next();			//再生成一个新的方块
			}
		}
		
	}
	TETRIS.Block.prototype.rotate = function (matrix){//变形
		
		this.shape = (function(oBlock){
			
			var aX = [];
			var aY = [];

			for(var i = 0 ; i < 4 ; i++){
				aX.push(oBlock.shape[i].x);
				aY.push(oBlock.shape[i].y);
			}
			var iMinX = aX.getMin();
			var iMinY = aY.getMin();
			
			
			var aShape = [];
			for(var i = 0 ; i < matrix.length ; i++){
				var sValue = matrix[i];
				for(var j = 0 ; j < sValue.length ; j++){
					if(sValue.charAt(j) == "1"){
						aShape.push({ x : j+iMinX , y : i+iMinY });
					}  
				}
			}
			if( !( oBlock.checkBlock(aShape)) )
				return oBlock.shape;
			oBlock.draw("clear");
			return aShape;
			
		})(this);

		this.draw();
	}

	TETRIS.Block.prototype.draw = function (opt){//绘图
		for(var i = 0 ; i < this.shape.length ; i++){
			var oShape = this.shape[i];
			T.oDomBoard.rows[oShape.y].cells[oShape.x].style.background = (opt==undefined?"#09F":"");
		}
	}
	TETRIS.Block.prototype.checkBlock = function (shape, direction){
		shape = shape || this.shape;
		for(var i = 0 ; i < 4 ; i++){
			if(direction == "left"){
					if(shape[i].x == 0 || T.aBoardGrids[shape[i].y][shape[i].x - 1] == 1){
						return false;
					}
			} else if(direction == "right"){
					if(shape[i].x == 9 || T.aBoardGrids[shape[i].y][shape[i].x + 1] == 1){
						return false;
					}
			} else if(direction == "down"){
					if(shape[i].y == 17 || T.aBoardGrids[shape[i].y + 1][shape[i].x] ==1){
						return false;
					}
			}
			if(shape[i].x < 0 || shape[i].x > 9 || shape[i].y < 0 || shape[i].y > 17)
				return false;
			if(T.aBoardGrids[shape[i].y][shape[i].x] == 1){
				return false;
			}
		}
		return true;
		
	}
	Array.prototype.getMin = function (){
		var iMin = this[0];
		for(var i = 0 ; i < this.length ; i++){
			if(this[i] < iMin)
				iMin = this[i];
		}
		return iMin;
	}
	window.onload = function(){
	
		T.init();
		
		var oBtnPlay = document.getElementById("btnPlay");
		oBtnPlay.onclick = function(){
			if(this.value == "begin"){
				T.next();
				this.value = "over";
			} else {
				this.value = "begin";
				alert("Game Over~");
				clearInterval(T.timer);
			} 
		
		}	
		var oBtnPause = document.getElementById("btnPause");
		oBtnPause.onclick = function (){
			if(this.value == "pause"){
				clearInterval(T.timer);
				this.value = "resume";
			} else {
				T.timer = setInterval(function (){
					T.oBlock.move("down");
				}, 1000);
				this.value = "pause";
			}
		}

	}

</script>
</head>

<body>
    <table id="gameBoard"></table>
    <div id="gameControl">
        Score ： <span id="score">0</span><br />
      <input type="button" id="btnPlay" value="begin" />
      <input type="button" id="btnPause" value="pause" /><br/>
        <span>俄罗斯方块</span>
    </div>
</body>
</html>

程序有待优化改进，欢迎大家批评指正
Gloria_bing
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
JS俄罗斯方块游戏代码
05-01
JS俄罗斯方块游戏代码，《俄罗斯方块》的基本规则是移动、旋转和摆放游戏自动输出的各种方块，使之排列成完整的一行或多行并且消除得分。游戏注释：用键盘控制方块的下落和变形↑：变形；←：左移；↓：下移(有自定义的下落速度)；→：右移；空格：速降(会直接到达最下层)。
javascript的俄罗斯方块小游戏
07-28
JavaScript的俄罗斯方块小游戏是一个利用JavaScript编程语言实现的经典游戏，旨在提供一种有趣、互动的娱乐方式，同时也为学习JavaScript的开发者提供了很好的实践项目。在这个游戏中，玩家需要控制各种形状的方块...
【转】俄罗斯方块的实现
weixin_34253126的博客
09-18 212
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript写的俄罗斯方块
seanchan的专栏
08-26 642
如果你在考虑要不要学习JavaScript，建议你看看这个，绝对让你对它产生兴趣
60行代码俄罗斯方块
f5647的专栏
05-04 1415
var map=eval("["+Array(23).join("0x801,")+"0xfff]"); var tatris=[[0x6600],[0x2222,0xf00],[0xc600,0x2640],[0x6c00,0x4620],[0x4460,0x2e0,0x6220,0x740],[0x2260,0xe20,0x6440,0x4700],[0x2620,0x720,0x2320,0
js实现简单的俄罗斯方块小游戏
林恒的博客
12-22 344
js实现简单的俄罗斯方块小游戏 开始 1. 创建一个宽为200px，高为360px的背景容器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...
javascript+css实现俄罗斯方块小游戏
11-20
俄罗斯方块，一个很有趣的一个小游戏，此次基于html+css+javaScript实现，包含在一个方块落地后自动生成方块、操控方块的移动以及方块变形等。 部分代码： <!DOCTYPE html> <html> <head> <...
js实现 俄罗斯方块 小游戏
01-03
《使用JavaScript实现俄罗斯方块小游戏》 在编程领域，创建一款经典的俄罗斯方块小游戏是一种常见的练习，也是检验开发者基础技能的不错方式。本项目利用JavaScript这一广泛使用的前端脚本语言，结合HTML和CSS，...
用JavaScript写的俄罗斯方块小游戏
02-25
【JavaScript实现俄罗斯方块小游戏详解】 俄罗斯方块是一款经典的电子游戏，它的基本原理是通过不同形状的方块从屏幕顶部下落，玩家需要通过旋转和移动这些方块使其在底部排列完整，消除整行以获得分数。在这个用...
javascript实现俄罗斯方块游戏的思路和方法
10-24
【JavaScript实现俄罗斯方块游戏】 实现俄罗斯方块游戏的核心在于理解游戏规则，处理方块的移动、旋转、碰撞检测以及游戏区域的填充。以下是一些关键知识点： 1. **游戏区域表示**： - 使用二维数组`area[18][10]...
原创的一个Js写的小游戏（俄罗斯方块),javascript小游戏
09-27
五年前用Js写的俄罗斯小方块 刚刚修改了下使其支持Firefox和IE,其它浏览器还没有试（也因为当今不入流的浏览器太多啦，没办法). 主体就是用一个Table， 控制其每一个td的class来实现的。 地址：http://www.topnorth.cn/upload/rects.html 或者打开 http://www.topnorth.cn 进javascript栏目，javascript俄罗斯方块里可以看到。 看看吧，现丑现丑！！:)
js实现俄罗斯方块小游戏
09-24
javascript实现的俄罗斯方块小游戏 ，代码预览：function rotate() { var tmpBlock = new Array(4); for (var i = 0; i < 4; i++) { tmpBlock[i] = { x: 0, y: 0 }; } //先算四个点的中心点，则这四个点围绕中心旋转90度。 var cx = Math.round(($bullet[0].x + $bullet[1].x + $bullet[2].x + $bullet[3].x) / 4); var cy = Math.round(($bullet[0].y + $bullet[1].y + $bullet[2].y + $bullet[3].y) / 4); //旋转的主要算法. 可以这样分解来理解。 //先假设围绕源点旋转。然后再加上中心点的坐标。 for (var i = 0; i < 4; i++) { tmpBlock[i].x = cx + cy - $bullet[i].y; tmpBlock[i].y = cy - cx + $bullet[i].x; } if (judegBorder(tmpBlock)) { for (var i = 0; i < 4; i++) { $bullet[i].x = tmpBlock[i].x; $bullet[i].y = tmpBlock[i].y; } } dataTemp(); }
用JavaScript编写的俄罗斯方块游戏
01-25
这是一个使用JavaScript开发俄罗斯方块游戏，界面中带有游戏运行的实时数据结构的显示，是我给学生教授程序设计课程是所做。
H5 canvas实现经典俄罗斯方块小游戏
08-23
基于h5 canvas的俄罗斯方块小游戏，500行代码（原创无注释，不懂可联系qq742025211）。可以预览下一个图形，消行可得分，有历史最高分记录（清除浏览器缓存历史最高分会清0）。操作方式：↑ 变形 ，↓ 加速 ，← →移动。望对大家有帮助。
俄罗斯方块游戏设计报告
12-15
俄罗斯方块游戏设计报告
简洁的俄罗斯方块
我想我是海 冬天的大海 心情随风轻摆
03-21 1076
.c{margin:1px; width:19px; height:19px; background:red; position:absolute;} .d{margin:1px; width:19px; height:19px; background:gray; position:absolute;} .f{top:0px; left:0px; background:black; pos
纯JS实现俄罗斯方块小游戏
被一个OIER遗弃的一堆烂代码
05-16 545
这次的代码有点长，就想玩的直接复制就行，如果想研究可以拆分成JS文件自己看看。不需要别的库。效果是这样 这次懒得弄到Github里头，很麻烦，就这么一个文件用不着 <规则> ←键：控制方块向左走一格 →键：控制方块向右走一格 ↓键：向下走一格（加速） ↑键：旋转 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2
js俄罗斯方块
wyc的博客
09-03 305
效果图如下 代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
利用js轻松实现俄罗斯方块小游戏的实现
最新发布
weixin_44856221的博客
02-13 156
利用js轻松实现俄罗斯方块小游戏的实现，就是玩
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值