`
ibelieve1314love
  • 浏览: 19983 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

俄罗斯方块--javascript实现

javascript游戏俄罗斯方块 
阅读更多

以前上中专的时候，在学校机房练习时，就看有些同学用c还是qbasic做的俄罗斯方块，当时感觉这些人真厉害，啥时候我也能亲手写一个就好了。只不过当时的我，不管再怎么努力，也还是写不出来，也就带着那个遗憾毕业了。之后阴差阳错的去了大连培训，学了c++,java.c++也就学到能写简单的类，简单的程序，能看懂代码的程度，java学得倒还行。后面学到了java的Swing组件，awt组件，就想着，要不就用java写个俄罗斯方块作为java课的毕业成果吧。当时也是努力的写，写了改，改了写，最后总算凑合着写出来了，在当时毕业的同学里面，还算是不错的吧，只不过只有我自己知道，那里面的代码写得有多烂，bug有多少，java老师也是简单运行了一下，玩了玩，就给了我一个优秀，呵呵。后来工作了，那份代码也没太珍惜，就慢慢的没了。现在觉得，不管哪个程序多简单，或是多复杂，也许在别人眼里根本什么都不是，但却是自己年轻时一个小小的梦想，我想亲手把这个小梦想实现。

 

好了，废话不多说了，贴我写的代码吧。代码感觉写得有点多，但这是按我自己的想法实现的。

 

觉得html和javascript分开贴比较好点。

先来html

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
...
</script>
<style>
body {
	margin: 0 auto;
	font-size: 12px;
	font-family: Verdana;
	line-height: 1.5;
}
ul, dl, dd, h1, h2, h3, h4, h5, h6, form, p {
	padding: 0;
	margin: 0;
}
ul {
	list-style: none;
}
table{border-collapse:collapse;}
td{width:20px; height:20px;border-left:0;border-top:0;border-right:1px solid #00cd11;border-bottom:1px solid #00cd11;border-collapse:collapse;}
.td_bg { background-color:#eee;}
.td_fullrow { background-color:#FF0;}
.td_block{background-color:red;}
.btn{display:block; width:150px;height:30px; margin:10px;}
#main{float:left; padding:15px; border:1px solid #eee; background-color:#000;height:510px;}
#control_side{float:left;padding-top:15px; margin:0 auto;width:200px; height:525px;border:1px solid #eee;background-color:#444;}
#nextzone{ padding:15px;margin: 0px auto; }
#gameControl{ padding:15px;}
#pointDisplay{ padding:5px 10px 10px 15px;color:#FFF;}
#levelDisplay{ padding:5px 10px 10px 15px;color:#FFF;}
#manual{ margin:0 auto;padding:5px 15px 0px 25px;color:#FFF;font-size:16px;}

#point{ font-size:18px;font-weight:bold; height:40px; color:#F00;text-align:center; border:1px solid #FFF;}
#level{ font-size:18px;font-weight:bold; height:40px; color:#F00;text-align:center;border:1px solid #FFF;}
</style>
</head>
<body onload="initGame();">
<div id="main">
	<div id="gamezone">
	</div>
</div>
<div id="control_side">
	<div id="nextzone">
	</div>
	<div>
		<div id="gameControl">
			<input type="button" name="start" value="开始" id="btnPlay" onclick="play()" class="btn" />
			<input type="button" name="start" value="暂停" id="btnPause" onclick="pause()" class="btn" />
			<input type="button" name="start" value="重新开始" id="btnRestart" onclick="restart()" class="btn" />
		</div>
		<div id="pointDisplay">
			<span>目前得分:</span>
			<div id="point">
				<span id="curPoint"></span>
			</div>
		</div>
		
		<div id="levelDisplay">
			<span>目前等级:</span>
			<div id="level">
				<span id="curLevel"></span>
			</div>
		</div>
		
		<div id="manual">
			<ul>
				<li>→ 向右移动</li>
				<li>← 向左移动</li>
				<li>↓ 加速向下</li>
				<li>空格 变换</li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

 

 

下面是javascript，代码有点多，呵呵

 

//游戏区大小定义
var zone_row_max = 25;
var zone_col_max = 10;
//下一方块预览区大小定义
var next_row_max = 4;
var next_col_max = 4;

//当前分数
var point = 0;
//消除一行的得分数
var get_point_per = 100;
//等级提高一级需要的分数
var level_point_per = 1000;
var level = 1;
//不同等级对应的游戏速度
var pointLevel = [0,800, 600, 400, 200, 100, 50];

var contrllor = null;
var contrllor_next = null;
var elGameZone =null;
var elNextZone = null;
var timer = null;

var isPaused = false;

//游戏初始化
function initGame(){

	elGameZone = document.getElementById('gamezone');
	elNextZone = document.getElementById('nextzone');
	elGameZone.innerHTML = createGameZone(zone_row_max, zone_col_max,false);
	elNextZone.innerHTML = createGameZone(next_row_max, next_col_max,true);	
	
	//firefox下，不支持innerText,只支持textContent
	if(document.getElementById("curLevel").innerText != undefined){
		document.getElementById("curPoint").innerText = "0";
		document.getElementById("curLevel").innerText = "1";
	}else{
		document.getElementById("curPoint").textContent = "0";
		document.getElementById("curLevel").textContent = "1";
	}
	
	
	document.getElementById("btnPause").disabled = true;
}

//开始
function play(){
	
	if(!isPaused){
		
		//游戏区
		contrllor = new Controller(elGameZone,false);
		contrllor.generateBlock(0,4,-1);
		//预览区
		contrllor_next = new Controller(elNextZone,true);
		contrllor_next.generateBlock(0,0,-1);
	}
	
	document.onkeydown = gameControl;
	timer = window.setInterval(start, pointLevel[level]);
	
	
	document.getElementById("btnPlay").disabled = true;
	document.getElementById("btnPause").disabled = false;	
	
	//点击按钮后，焦点转移到了暂停按钮上，导致操作区不响应键盘事件
	
	if (document.activeElement) {
		document.activeElement.blur();
	}
	
	
}

//暂停
function pause(){
	isPaused = true;
	document.getElementById("btnPlay").disabled = false;
	document.getElementById("btnPause").disabled = true;
	
	timer = window.clearInterval(timer);
	document.onkeydown = null;
	
}
//重新开始
function restart(){
	contrllor = null;
	contrllor_next = null;
	elGameZone =null;
	elNextZone = null;
	window.clearInterval(timer);
	point = 0;
	level = 1;
	isPaused = false;
	
	initGame();
	play();
}

//键盘控制
function gameControl(event){	
	//在IE9下面，event为未定义，必须从window.event中才能取到。
	var key = window.event ? window.event.keyCode : (event.which ? event.which : event.charCode);	
	if(key == 38){
		//上
	}else if(key == 40){
		//下
		contrllor.moveDown();
	}else if(key == 37){
		//左
		contrllor.moveLeft();
	}else if(key == 39){
		//右
		contrllor.moveRight();
	}else if(key == 32){
		//空格 变形
		contrllor.transform();
	}	
}
//游戏主控逻辑
function start(){
	if(contrllor.canMoveDown()){
		contrllor.moveDown();
	}else{
		//行消除及下落处理
		contrllor.processRows();
		//生成新的方块元素
		if(contrllor.block.getTop() <=0){
			alert("Game Over!");
			window.clearInterval(timer);
			document.onkeydown = null;
			return;
		}
		contrllor.block = null;
		contrllor.generateBlock(0,4,contrllor_next.block.block_type);
		
		//预览区元素擦除
		contrllor_next.easerBlock();
		window.clearInterval(timer);
		//预览区生成新的预览元素
		contrllor_next.generateBlock(0,0,-1);
		timer = window.setInterval(start, pointLevel[level]);
		
	}
}
//创建游戏区和预览显示区
function createGameZone(row,col,isNext){
	var data = new Array();
	
	data.push('<table border="1"><tbody>');
	for(var i=0; i < row; i++){
		if(!isNext){
			data.push('<tr id="row_' + i + '">');
		}else{
			data.push('<tr id="next_row_' + i + '">');
		}
		for(var j=0; j< col; j++){
			if(!isNext){
				data.push('<td id="row_' + i + 'col_' + j + '" class="td_bg"></td>');
			}else{
				data.push('<td id="next_row_' + i + 'col_' + j + '" class="td_bg"></td>');
			}
		}
		data.push('</tr>');
	}
	data.push('</tbody></table>');
	
	return data.join('');
}

//俄罗斯方块元素
function Block(row, col, block_type){

	this.r = row;
	this.c = col;
	this.block_type = block_type;	
	this.transform = 0;
	this.boxes = new Array();
	
	this.createBoxes = function(boxes_data){
		if(boxes_data != null && boxes_data.length > 0){
			for(var i=0; i< 4;i++){
				this.boxes[i] = new Box(boxes_data[i][0], boxes_data[i][1]);
			}		
		}
	}
	
	this.generateBoxes = function(){
		var boxes_data = {};
		var tf = this.transform % 4;
		switch(block_type){
			case 0:// ■ ■ ■ ■
				if(tf == 0 || tf == 2){
					boxes_data = [[this.r, this.c],[this.r, this.c+1],[this.r, this.c+2],[this.r, this.c+3]];
				}else if(tf == 1 || tf == 3){
					boxes_data = [[this.r, this.c],[this.r+1, this.c],[this.r+2, this.c],[this.r+3, this.c]];
				}
				break;			
			case 1:
			//■ ■
			//■ ■
				boxes_data = [[this.r, this.c],[this.r, this.c+1],[this.r+1, this.c],[this.r+1, this.c+1]];
				break;
			case 2:// ■ ■ ■ 
				   //   ■
				if(tf == 0){
					boxes_data = [[this.r, this.c],[this.r, this.c+1],[this.r, this.c+2],[this.r+1, this.c+1]];
				}else if(tf == 1){
					//  ■
					//■ ■
					//  ■
					boxes_data = [[this.r, this.c+1],[this.r+1, this.c],[this.r+1, this.c+1],[this.r+2, this.c+1]];
				}else if(tf == 2){
					//  ■
					//■ ■ ■
					boxes_data = [[this.r, this.c+1],[this.r+1, this.c],[this.r+1, this.c+1],[this.r+1, this.c+2]];				
				}else if(tf == 3){
					//  ■
					//  ■ ■
					//  ■
					boxes_data = [[this.r,this.c],[this.r+1, this.c],[this.r+1, this.c+1],[this.r+2, this.c]];	
				}
				break;
			case 3:// ■ ■
				   //   ■ ■
				if(tf == 0 || tf == 2){
					boxes_data = [[this.r, this.c],[this.r, this.c+1],[this.r+1, this.c+1],[this.r+1, this.c+2]];
				}else if(tf == 1 || tf == 3){
					//  ■
					//■ ■
					//■
					boxes_data = [[this.r, this.c+1],[this.r+1, this.c],[this.r+1, this.c+1],[this.r+2, this.c]];
				}				
				break;
			case 4://   ■ ■
				   // ■ ■
				if(tf == 0 || tf == 2){
					boxes_data = [[this.r, this.c+1],[this.r, this.c+2],[this.r+1, this.c],[this.r+1, this.c+1]];
				}else if(tf == 1 || tf == 3){
					//  ■
					//  ■ ■
					//    ■
					boxes_data = [[this.r, this.c],[this.r+1, this.c],[this.r+1, this.c+1],[this.r+2, this.c+1]];
				}
				break;
			case 5://   ■ 
				   //   ■
				   // ■ ■
				if(tf == 0){
					boxes_data = [[this.r, this.c+1],[this.r+1, this.c+1],[this.r+2, this.c+1],[this.r+2, this.c]];
				}else if(tf == 1){
					//  
					//■
					//■ ■ ■
					boxes_data = [[this.r, this.c],[this.r+1, this.c],[this.r+1, this.c+1],[this.r+1, this.c+2]];
				}else if(tf == 2){
					// ■ ■
					// ■
					// ■
					boxes_data = [[this.r, this.c],[this.r, this.c+1],[this.r+1,this.c],[this.r+2, this.c]];				
				}else if(tf == 3){
					// ■ ■ ■
					//     ■
					boxes_data = [[this.r, this.c],[this.r, this.c+1],[this.r, this.c+2],[this.r+1, this.c+2]];	
				}				
				break;
			case 6://   ■ 
				   //   ■
				   //   ■ ■
				if(tf == 0){
					boxes_data = [[this.r, this.c],[this.r+1,this.c],[this.r+2, this.c],[this.r+2, this.c+1]];
				}else if(tf == 1){
					//  
					//■ ■ ■
					//■ 
					boxes_data = [[this.r, this.c],[this.r, this.c+1],[this.r, this.c+2],[this.r+1, this.c]];
				}else if(tf == 2){
					//■ ■ 
					//  ■
					//  ■
					boxes_data = [[this.r, this.c],[this.r, this.c+1],[this.r+1, this.c+1],[this.r+2, this.c+1]];				
				}else if(tf == 3){
					//     ■ 
					// ■ ■ ■
					//     
					boxes_data = [[this.r, this.c+2],[this.r+1, this.c],[this.r+1, this.c+1],[this.r+1, this.c+2]];	
				}
				break;
		}
		
		return boxes_data;
		
	}
	
	this.mvR = function(){
		if(this.boxes != null){
			for(var i=0,length=this.boxes.length; i<length; i++){
				this.boxes[i].mvR();
			}
			this.c++;
		}
	}
	
	this.mvD = function(){
		if(this.boxes != null){
			for(var i=0,length=this.boxes.length; i<length; i++){
				this.boxes[i].mvD();
			}
			this.r++;
		}
		
	}
	
	this.mvL = function(){
		if(this.boxes != null){
			for(var i=0,length=this.boxes.length; i<length; i++){
				this.boxes[i].mvL();
			}
			this.c--;
		}
	}
	//最左边
	this.getLeft = function(){
		return Math.min(Math.min(this.boxes[0].col, this.boxes[1].col),Math.min(this.boxes[2].col, this.boxes[3].col));
	}
	//最右边
	this.getRight = function(){
		return Math.max(Math.max(this.boxes[0].col, this.boxes[1].col),Math.max(this.boxes[2].col, this.boxes[3].col));
	}
	//最底边
	this.getBottom = function(){
		return Math.max(Math.max(this.boxes[0].row, this.boxes[1].row),Math.max(this.boxes[2].row, this.boxes[3].row));
	}
	//最顶边
	this.getTop = function(){
		return Math.min(Math.min(this.boxes[0].row, this.boxes[1].row),Math.min(this.boxes[2].row, this.boxes[3].row));
	}
	//是否当前Block的Box
	this.isCurBox = function(row, col){
		for(var i=0; i < this.boxes.length; i++){
			if(this.boxes[i].row == row && this.boxes[i].col == col){
				return true;
			}
		}
		
		return false;
		
	}
}

//Box 方块元素中的其中一个元素
function Box(row, col){
	this.row = row;
	this.col = col;
	
	this.mvR = function(){
		this.col++;
	}
	this.mvD = function(){
		this.row++;
	}
	this.mvL = function(){
		this.col--;
	}
	
}

function Controller(domEle,isNext){
	this.domEle = domEle;
	this.block = null;
	this.isNext = isNext;	
	
	//生成方块元素
	this.generateBlock = function(row, col,type){
		var block_type;
		//第一次随机生成，以后按照预览区方块生成
		if(type == -1){
			block_type = parseInt(Math.random() * (6-0+1) + 0);
		}else{
			block_type = type;
		}
		this.block = new Block(row, col, block_type);
		this.block.createBoxes(this.block.generateBoxes());
		this.dispBlock();
		
		
	}
	
	//变形
	this.transform = function(){
		if(this.block != null){
			if(this.canTransform()){
				this.easerBlock();
				this.block.transform++;
				this.block.createBoxes(this.block.generateBoxes());
				this.dispBlock();
			}
		}
		
	}
	
	//预生成一个变形后的Boxes数据，判断其所在的方格是否有方块，判断完后恢复原始的变形计数
	this.canTransform = function(){
		var org_tf = this.block.transform;
		this.block.transform++;
		var new_boxes_data = this.block.generateBoxes();
		
		for(var i=0; i< 4;i++){
			
			var r = new_boxes_data[i][0];
			var c = new_boxes_data[i][1];
			
			//变形后的方块超出边界，变形不可，返回
			if(r >= zone_row_max || r < 0 || c >= zone_col_max || c < 0){
				this.block.transform = org_tf;     
				return false;
			}
			
			id = "row_" + r + "col_" + c;
			if(!this.block.isCurBox(r,c)){
				if(document.getElementById(id)){
					if(document.getElementById(id).className == "td_block"){
						this.block.transform = org_tf;     
						return false;
					}
				}
			}
		}	
		
		this.block.transform = org_tf;
		return true;
	}
	
	//方块显示
	this.dispBlock = function(){
		if(this.block != null){
			for(var i=0; i < this.block.boxes.length; i++){
				var r = this.block.boxes[i].row;
				var c = this.block.boxes[i].col;
				var id="";
				if(!isNext){
					id = "row_" + r + "col_"+ c;
				}else{
					id = "next_row_" + r + "col_"+ c;
				}
				document.getElementById(id).className = "td_block";
			}
		}
	}
	//擦除方块
	this.easerBlock = function(){
		if(this.block != null){
			for(var i=0; i < this.block.boxes.length; i++){
				var r = this.block.boxes[i].row;
				var c = this.block.boxes[i].col;
				var id="";
				if(!isNext){
					id = "row_" + r + "col_"+ c;
				}else{
					id = "next_row_" + r + "col_"+ c;
				}
				document.getElementById(id).className = "td_bg";
			}
		}
	}
	//下移
	this.moveDown = function(){
		if(this.block != null){
			if(this.canMoveDown()){
				this.easerBlock();
				this.block.mvD();
				this.dispBlock();
			}
		}
	}
	this.canMoveDown = function(){
		var canMovedown = this.block.getBottom() < (zone_row_max-1);
		if(!canMovedown) return false;
		//下一行如果有方块，不能移动		
		return this.canMove('D');
	}
	//能否向右，向下，向左移动
	this.canMove = function(side){
		var canMovedown = true;
		var boxes = this.block.boxes;
		for(var i=0; i < boxes.length; i++){
			var r = boxes[i].row;
			var c = boxes[i].col;
			var id  = "";
			switch(side){
				case "D":
					id = "row_" + (r+1) + "col_" + c;
					r = r+1;
					break;
				case "R":
					id = "row_" + r + "col_" + (c+1);
					c = c + 1;
					break;
				case "L":
					id = "row_" + r + "col_" + (c-1);
					c = c - 1;
					break;
			}	
			
			if(!this.block.isCurBox(r,c)){
				if(document.getElementById(id).className == "td_block"){
					return false;
				}else{
					canMovedown = canMovedown && true;
				}
			}
		}
		
		return canMovedown;
	}
	//右移
	this.moveRight = function(){
		if(this.block != null){
			if(this.canMoveRight()){
				this.easerBlock();
				this.block.mvR();
				this.dispBlock();
			}
		}
	}
	this.canMoveRight = function(){
		var canMovedown = this.block.getRight() < (zone_col_max-1);
		if(!canMovedown) return false;
		//右边如果有方块，不能移动		
		return this.canMove('R');
	}
	//左移
	this.moveLeft = function(){
		if(this.block != null){
			if(this.canMoveLeft()){
				this.easerBlock();
				this.block.mvL();
				this.dispBlock();
			}
		}
	}
	this.canMoveLeft = function(){
		var canMovedown = this.block.getLeft() > 0;
		if(!canMovedown) return false;
		//左边如果有方块，不能移动		
		return this.canMove('L');
	}
	
	//行消除及下落
	this.processRows = function(){
		for(var r=zone_row_max-1; r >=0; r--){
			//可以消除
			if(this.isFullRow(r)){
				//消除
				this.delRow(r);
				//积分计算
				point += get_point_per;
				//等级计算
				level = parseInt((point / level_point_per) + 1);
				level = (level > (pointLevel.length -1)) ? (pointLevel.length-1) : level;
				
				if(document.getElementById("curLevel").innerText != undefined){
					document.getElementById("curPoint").innerText =  "" + point;
					document.getElementById("curLevel").innerText = "" + level;
				}else{
					document.getElementById("curPoint").textContent = "" + point;
					document.getElementById("curLevel").textContent = "" + level;
				}
				
				//方块下落处理
				for(var i=r; i >=1; i--){ 
					var j = (i-1)>0 ? (i-1) : 0;
					for(var m = 0; m < zone_col_max; m++){
						var des_id = "row_" + i + "col_" + m;
						var org_id = "row_" + j + "col_" + m;
						
						document.getElementById(des_id).className = document.getElementById(org_id).className;
					}
				}
				
				r = r + 1;
			}
		}
	}
	
	this.delRow = function(row){
		for(var i=0; i < zone_col_max; i++){
			var id = "row_" + row + "col_" + i;
			document.getElementById(id).className = "td_bg";
		}
	}
	
	this.isThisRowHasBox = function(row){
		var hasBox = false;
		for(var i=0; i < zone_col_max; i++){
			var id = "row_" + row + "col_" + i;
			if(document.getElementById(id).className == "td_block"){
				return true;
			}
			
		}
		return hasBox;
	}
	
	this.isFullRow = function(row){
		var hasBox = true;
		for(var i=0; i < zone_col_max; i++){
			var id = "row_" + row + "col_" + i;
			if(document.getElementById(id).className != "td_block"){
				return false;
			}
			
		}
		return hasBox;
	}
	
}

 

经测试，在ie9，firefox17，chrome23下面运行都没有问题。拿出来和大家分享一下

6
顶
11
踩
分享到：
| 转:JavaScript 基本编码规范
评论
6 楼 Draling_2012 2013-01-09  
太牛！！！
5 楼 javaboy2010 2012-12-31  
很不错啊! 非常感谢楼主啊.
4 楼 wolf2012 2012-12-30  
玩了一下,还跟以前玩得差不多,挺有意思的.
3 楼 jybbh 2012-12-30  
强。。。。。。
2 楼 guo333guo 2012-12-30  
1 楼 smilease 2012-12-30  
玩了下，挺不错，就是感觉点击向上的箭头时出发变形事件比较符合习惯
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    俄罗斯方块 - 原生JavaScript实现

    《原生JavaScript实现的俄罗斯方块游戏详解》 俄罗斯方块，这个自1984年诞生以来就风靡全球的经典游戏，凭借其简洁的规则和无穷无尽的挑战性，成为了电子游戏历史上的标志性作品。如今，我们可以通过原生JavaScript...

    Javascript实现俄罗斯方块

    《JavaScript实现俄罗斯方块》 在编程世界里，游戏开发是一项既能锻炼逻辑思维，又能提升技术实践能力的有趣任务。本文将围绕“JavaScript实现俄罗斯方块”这一主题，深入探讨如何利用JavaScript、CSS和HTML这三种...

    html5 俄罗斯方块 ----kinetic 应用开发介绍 1

    在这个项目中，我们将深入探讨如何使用HTML5和JavaScript库KineticJS来开发一个经典的游戏——俄罗斯方块。 **一、HTML5 Canvas基础** HTML5的Canvas元素提供了一个在网页上绘制图形的画布。开发者可以通过...

    俄罗斯方块-键位调换.zip

    综合来看，这个项目展示了如何使用HTML、CSS和JavaScript构建一个简单的《俄罗斯方块》游戏，并实现键位自定义。这涉及到网页开发的基础知识，包括DOM操作、事件监听、样式控制以及基本的游戏编程概念。对于想要学习...

    俄罗斯方块-html5.zip

    虽然俄罗斯方块的动画效果主要由Canvas实现，但CSS3也可以用于一些界面元素的动画，如分数计数的上升效果，或者游戏结束时的提示动画。 4. **游戏逻辑**： 游戏的核心算法在于方块的生成、旋转、碰撞检测和消除行...

    俄罗斯方块-网页端游戏

    自制的俄罗斯方块游戏的源码，用于学习HTML，CSS 和 JavaScript 的知识； 将压缩包解压之后，用浏览器打开 HTML 文件即可运行； JS部分采用模块化风格，包含6个模块：brick, game, hint, notice, score, square； 为...

    JavaScript实现俄罗斯方块.rar

    JavaScript实现的俄罗斯方块是一款基于浏览器的经典游戏，它利用了JavaScript这门强大的客户端脚本语言，为用户在网页上提供了一种重温经典游戏的方式。在本文中，我们将深入探讨JavaScript如何构建这样的游戏，并...

    Html5+js实现俄罗斯方块

    在网页上使用HTML5和JavaScript实现俄罗斯方块是一项常见的编程挑战，它涉及到多个技术层面，包括页面布局、事件处理、动画效果以及游戏逻辑。以下是对这个项目中涉及的关键知识点的详细解释： 1. **HTML5 Canvas**...

    用JavaScript编写的俄罗斯方块游戏

    这个项目利用JavaScript语言，一个广泛应用于网页开发的脚本语言，来实现经典的俄罗斯方块游戏。下面将详细讨论这个项目中涉及的JavaScript编程知识点、游戏机制以及如何实现它们。 ### 1. JavaScript基础 ...

    JavaScript-使用javascript+phaser开发的小游戏之俄罗斯方块.zip

    在压缩包中的 "JavaScript_使用javascript+phaser开发的小游戏之俄罗斯方块" 文件中，应该包含了实现以上功能的源代码。通过阅读和分析代码，你可以学习到如何结合 JavaScript 和 Phaser 实现游戏逻辑，以及如何组织...

    javaScript版俄罗斯方块

    以上就是使用JavaScript实现俄罗斯方块的关键知识点。这个项目不仅可以帮助开发者巩固JavaScript基础，还能提升其在实际项目中解决问题的能力。通过这个过程，开发者可以学习到事件处理、数据结构与算法、动画制作...

    网页俄罗斯方块，HTML, javascript

    3. **动画效果**：通过定时器和函数递归，JavaScript实现方块缓慢下落的动画效果。每一帧更新方块的位置，直到着陆或消除。 4. **分数系统**：每当消除一行，JavaScript会增加玩家的得分，并在界面上实时更新。 5....

    多库俄罗斯方块JavaScript版本

    《多库俄罗斯方块JavaScript版本实现详解》 在信息技术领域，游戏开发一直是吸引人们注意力的重要领域，而作为经典中的经典，俄罗斯方块以其简洁规则和无穷挑战性深受玩家喜爱。在现代网页技术的支持下，我们可以...

    javascript俄罗斯方块.zip

    【JavaScript俄罗斯方块游戏开发详解】 在编程世界中，JavaScript是一种广泛应用的脚本语言，尤其在Web开发领域，它扮演着至关重要的角色。利用JavaScript，我们可以实现许多有趣的交互功能，其中之一就是开发游戏...

    JavaScript 版俄罗斯方块

    在JavaScript实现中，每个方块可能用一个对象表示，包含其形状、颜色和当前的位置信息。 7. **自定义按键**: 为了提高用户体验，允许用户自定义操作按键是一项重要功能。这通常通过监听键盘事件并在事件处理函数中...

    Javascript实现简易俄罗斯方块游戏

    用最简短的Javascript代码实现俄罗斯方块游戏。打开文本文档后点击文件-&gt;另存为:俄罗斯方块.html ，文件类型选择“所有文件”，打开另存后的文件即可体验简易版俄罗斯方块游戏！！！

    javascript俄罗斯方块源码

    JavaScript俄罗斯方块是一款基于网页的经典游戏，通过JavaScript编程语言实现。这款游戏的核心原理是利用二维数组来表示游戏板，以及各种形状的方块。在JavaScript中，我们通常会使用DOM（Document Object Model）来...

    Javascript俄罗斯方块（canvas版）

    《JavaScript实现的Canvas版俄罗斯方块》 在编程领域，JavaScript是一种广泛使用的脚本语言，尤其在Web开发中，它为网页添加了动态交互性。本项目“Javascript俄罗斯方块（canvas版）”就是利用JavaScript的强大...

    俄罗斯方块游戏-HTML-代码

    《俄罗斯方块游戏-HTML-代码》是一款基于Web的网页游戏，它利用HTML、CSS和JavaScript技术实现。这款经典游戏的网页版展示了前端开发的基本原理和应用，对于想要学习或提升前端技能的人来说，是一个很好的实践案例。...

    JavaScript实现俄罗斯方块游戏

    用H5和JS实现俄罗斯方块。 需要注意以下几点： 1.Canvas 的坐标信息与数组的维度信息恰好相反 2.在因为移动当前下落 的单元格，而更新对应坐标信息时，注意整个游戏平面的坐标信息更新 3.通过settimeout去设置按固定...

Magicbox
Global site tag (gtag.js) - Google Analytics