zoukankan      html  css  js  c++  java
  • 俄罗斯方块(JS脚本)网页游戏收藏

    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="GENERATOR" content="Microsoft FrontPage 6.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>网页特效|Linkweb.cn/Js|---俄罗斯方块游戏</title>
    <style>
    TD{ 20; height: 20}
    </style>
    </head>
    
    <body bgcolor="#000000" text="#0099FF" link="#0099FF" vlink="#0099FF" alink="#0099FF" style="line-height: 150%">
    <script>
    
    	document.body.innerHTML += '<DIV id="stage" style="position: absolute; top: 0; left: 0;"></DIV>' //游戏场地
    	document.body.innerHTML += '<div id="element_stage" style="position: absolute; top: 3; left: 500;  159; height: 152"></div>';//预显表
    	document.body.innerHTML += '<div id="obj_stage" style="position: absolute; top: 0; left: 132; display: block; z-index: 100"></div>';//活动层
    	
    	
    	var element_html = '<table id="element_table" border="1" width="100%" height="100%" bordercolor="#000000" cellspacing="0" cellpadding="0">';
    	var obj_html     = '<table id="obj_table" border="1" bordercolor="#000000" cellspacing="0" cellpadding="0">';
    	
    	
    	
    	for(h=0;h<=4;h++)       //-------生成预显表 和 活动层-------//
    	{
    		element_html += "<tr>";
    		obj_html     += "<tr>";
    		
    		
    		for(w=0;w<=4;w++)
    		{
    			element_html += "<td  bgcolor=\"\" value=\"0\"></td>";
    			obj_html += "<td bgcolor=\"\" value=\"0\"></td>";			
    			
    		}
    		
    		element_html += "</tr>";
    		obj_html += "</tr>";
    	}
    	
    	element_html += "</table>";
    	obj_html += "</table>";
    	
    	
    	element_stage.innerHTML = element_html;
    	obj_stage.innerHTML     = obj_html;
    	
    	document.body.innerHTML +='<p align="right">第 <span id="game_number">1</span> 局</p><p align="right">消除行数<br><span id="game_line">0</span></p><p align="right">游戏得分<br><span id="game_score">0</span></p>p align="right"> </p><p align="right"><a href="javascript:;" value="0" onclick="If_play(this.value)">开  始</a> </p> '
    	
    
    
    	var map = new Array(       //地图
    
    		"111000000000000111","111000000000000111","111000000000000111","111000000000000111","111000000000000111",
    		"111000000000000111","111000000000000111","111000000000000111","111000000000000111","111000000000000111",
    		"111000000000000111","111000000000000111","111000000000000111","111000000000000111","111000000000000111",
    		"111000000000000111","111000000000000111","111000000000000111","111000000000000111","111000000000000111",
    		"222222222222222222","222222222222222222"		
    	);
    	
    //-------------L------------//	//演员表
    	var L1 = new Array("0000","1000","1000","1100");
    	
    	var L2 = new Array("0000","0000","0010","1110");
    	
    	var L3 = new Array("0000","0110","0010","0010");
    		
    	var L4 = new Array("0000","1110","1000","0000");
    //-------------L-------------//	
    
    
    //-------------J------------//	
    	var J1 = new Array("0000","0010","0010","0110");
    	
    	var J2 = new Array("0000","0000","1110","0010");
    	
    	var J3 = new Array("0000","1100","1000","1000");
    	
    	var J4 = new Array("0000","0000","1000","1110");
    //-------------J-------------//	
    	
    	
    //-------------Z------------//	
    	var Z1 = new Array("0000","0000","1100","0110");
    	
    	var Z2 = new Array("0000","0100","1100","1000");
    	
    	var Z3 = new Array("0000","0000","1100","0110");
    		
    	var Z4 = new Array("0000","0100","1100","1000");
    //-------------Z-------------//	
    
    
    	
    //-------------S------------//	
    	var S1 = new Array("0000","0000","0110","1100");
    	
    	var S2 = new Array("0000","0100","0110","0010");
    	
    	var S3 = new Array("0000","0000","0110","1100");
    		
    	var S4 = new Array("0000","0100","0110","0010");
    //-------------S-------------//	
    
    
    //-------------T------------//	
    	var T1 = new Array("0000","0000","0100","1110");
    	
    	var T2 = new Array("0000","0010","0110","0010");
    	
    	var T3 = new Array("0000","1110","0100","0000");
    		
    	
    	var T4 = new Array("0000","1000","1100","1000");
    //-------------T-------------//	
    
    
    //-------------M------------//	
    	var M1 = new Array("0000","0000","1100","1100");
    	
    	var M2 = new Array("0000","0000","1100","1100");
    	
    	var M3 = new Array("0000","0000","1100","1100");
    		
    	var M4 = new Array("0000","0000","1100","1100");
    //-------------M-------------//	
    
    
    //-------------I------------//	
    	var I1 = new Array("1000","1000","1000","1000");
    	
    	var I2 = new Array("0000","0000","0000","1111");
    	
    	var I3 = new Array("0010","0010","0010","0010");
    		
    	var I4 = new Array("0000","0000","0000","1111");
    //-------------I-------------//	
    
    
    //-------------演员位置表-------------//
    
    	var players = new Array("I","J","T","L","Z","S","M");
    	
    	//----生成地图--------//
    	
    	
    	function get_color(color_value)
    	{
    		if(color_value=="1"||color_value=="2")
    			return "#000080";
    		else
    			return "#000000";	
    	}
    	
    	
    	
    	
    	var map_html = '<table id="map_table" border="1" cellspacing="0" cellpadding="0" bgcolor="#000000" bordercolor="#000000">';
    	
    	for(h=0;h<map.length;h++)
    	{
    		map_html+="<tr>"
    		
    		for(w=0;w<map[0].length;w++)
    		{
    			map_html+="<td value=\""+map[h].charAt(w)+"\" bgcolor=\""+get_color(map[h].charAt(w))+"\">"
    			
    
    		}
    		
    		map_html +="</tr>"
    	}
    	
    	map_html+="</table>"
    	
    	stage.innerHTML = map_html
    	
    	//----生成地图--------//
    /****************************************** 上面是准备的代码****************************************************/
    
    	
    	function Y_X(y,x) //设置角的对象
    	{
    		this.x = x;
    		this.y = y;
    	}	
    	
    	var game_l_u_angle = new Y_X(0,6);      //方快初始 左上角 和  右上角 的 x y 坐标
    	var game_r_d_angle = new Y_X(3,9);
    	
    	var left_up_angle = new Y_X(game_l_u_angle.y,game_l_u_angle.x); //现在的 左上角的 x y 坐标
    	var right_down_angle = new Y_X(game_r_d_angle.y,game_r_d_angle.x); //现在的 右上角 的 x y 坐标 
    	
    	var block_color_1 = "#0099FF"; //现在的方块的颜色
    	var block_color_0 = "";        //背景颜色
    	
    	var map_color_1 = "#000080"; //map 背景颜色 1
    	var map_color_0 = "#000000";        //背景颜色 0
    
    	var block_width = "22"; //方块 的 边长
    	var block_height = "20";
    	
    	var game_speed = 540 //游戏速度
    	var game_max_speed = Math.floor(game_speed/20);
    		
    	var SHAPES = new Array("I","M","Z","J","T","S","L"); // 方块形状数组
    
    	var shape_now = SHAPES[returnONE(6)];  //现在的方块形状
    	var shape_will = SHAPES[returnONE(6)]; //将来的方块形状
    	
    	var shape_num = 1;
    	
    	var obj_start_left = 132;     //方块起始位置
    	var obj_start_top  = 0;
    
    	
    	var can_move_block = false;  //设置用户是否可以移动方块
    	var can_play       = false;  //游戏的开始
    	
    	var one_score  = 10;  //一个的得分
    	var block_score = 4*one_score //一个方块的得分
    	var line_score  =  12*one_score //一行的得分
    	
    /*******************************************上面是数据********************下面是具体运行 函数************************/
    
    //------------返回任意数--------------------//
    
    		function returnONE(JSnum){
    		
    			JSnum = Math.round(JSnum*Math.random()*100/100);
    		
    			return JSnum;
    		}		
    
    //--------------返回最高-----------------------//
    
    	function return_TOP()
    	{
    		var block_value = "";
    	
    		for(h=0;h<4;h++)
    		{
    			for(w=0;w<4;w++)
    			{
    				block_value = obj_table.rows(h).cells(w).value;
    				
    				if(block_value=="1")
    					return (h + left_up_angle.y)
    			}
    		}
    	}
    
    
    
    //---------设置 obj 显示 指定 的 type+num 方块	-----------//
    
    	function set_block(obj,type,num) 
    	{
    		var block = eval(type+num); //获得 指定 方块
    		
    		var block_value = "";
    		var block_color = "";
    		
    		for(h=0;h<block.length;h++)
    		{
    			for(w=0;w<block[0].length;w++)
    			{
    				block_value = block[h].charAt(w);
    				block_color = eval("block_color_" + block_value );
    				
    				with(obj.rows(h).cells(w))
    				{
    					bgColor = block_color;
    					value   = block_value;
    				}
    			}
    		}
    		
    	}
    
    
    //-------------使 obj 相对移动--------------//
    
    	function move_block_by(x,y) 
    	{
    		left_up_angle.x += x;
    		left_up_angle.y += y;
    		
    		right_down_angle.x += x;
    		right_down_angle.y += y;
    		
    		obj_stage.style.pixelLeft = left_up_angle.x * block_width;
    		obj_stage.style.pixelTop  = left_up_angle.y * block_height;
    		
    		
    	}
    
    
    //---------------判断 是否 可以 移动 或变形 -------------//
    
    	function If_can_move(l_x,l_y,r_x,r_y) //用于常规判断
    	{
    
    		var obj_value = "";
    		var map_value = "";
    
    		var checker = 0;
    		
    	
    
    		for(obj_h=0,h=l_y;h<=r_y;h++,obj_h++)
    		{
    			for(obj_w=0,w=l_x;w<=r_x;w++,obj_w++)
    			{
    				obj_value = obj_table.rows(obj_h).cells(obj_w).value;
    				map_value = map_table.rows(h).cells(w).value
    				
    				checker = parseInt(obj_value)+parseInt(map_value);
    				
    				
    				if(map_value=="2")
    				{
    					if(checker>2)
    						return false;
    				}
    				else
    				{
    					
    					if(checker>1)
    						return false;				
    				}		
    			}
    		}
    
    
    		return true;
    	}	
    	
    
    	function test_block(){} //用来生成载block value 的 测试对象
    	
    	var tester = null;
    	
    	function If_can_move_test(l_x,l_y,r_x,r_y) //用于变形判断
    	{
    
    		var obj_value = "";
    		var map_value = "";
    
    		var checker = 0;
    		
    	
    
    		for(obj_h=0,h=l_y;h<=r_y;h++,obj_h++)
    		{
    			for(obj_w=0,w=l_x;w<=r_x;w++,obj_w++)
    			{
    				obj_value = eval("tester.value_"+obj_h+"_"+obj_w);
    				map_value = map_table.rows(h).cells(w).value
    				
    			
    				checker = 	parseInt(obj_value) + parseInt(map_value);	
    				
    				if(map_value=="2")
    				{
    					if(checker>2)
    						return false;
    				}
    				else
    				{
    					
    					if(checker>1)
    						return false;				
    				}		
    			}
    		}
    
    
    		return true;
    	}	
    
    
    
    //--------------设置背景颜色----------------------//
    
    	function set_map_bgcolor(l_x,l_y,r_x,r_y)
    	{
    		
    		var obj_value = "";
    
    
    		for(obj_h=0,h=l_y;h<=r_y;h++,obj_h++)
    		{
    			for(obj_w=0,w=l_x;w<=r_x;w++,obj_w++)
    			{
    				obj_value = obj_table.rows(obj_h).cells(obj_w).value;
    								
    				if(obj_value=="1")
    				{
    						with(map_table.rows(h).cells(w))
    						{
    							value = obj_value;
    							bgColor = eval("block_color_"+obj_value);
    							
    						}
    				}
    		
    			}
    		}
    		
    
    	}
    
    //---------------消除 行 --------------------------------//
    
    	function delete_line(l_y,r_y)
    	{
    
    		var value_1_num = 0; //为 1 的块数
    		var can_delete_num = map[0].length;     //可以删除的 value = 1 的 block 的总数
    		
    		var can_delete = true;
    		
    		var the_block_value = "";    //现在的block的value
    		
    		for(h=l_y;h<=r_y;h++)
    		{
    			for(w=0;w<can_delete_num;w++)
    			{
    				the_block_value = map_table.rows(h).cells(w).value
    				
    				if(the_block_value=="0"||the_block_value=="2")
    				{
    					can_delete = false;
    				}
    			}
    			
    			if(can_delete) //如果全部为1的话 
    			{
    
    				map_table.deleteRow(h);
    				map_table.insertRow(0);
    				
    				for(w=0;w<map[0].length;w++)
    				{
    					map_table.rows(0).insertCell();
    					map_table.rows(0).cells(w).value = map[0].charAt(w);
    					map_table.rows(0).cells(w).bgColor = eval("map_color_"+map[0].charAt(w));
    				}
    				
    				game_line.innerText =  ""+ (parseInt(game_line.innerText) + 1) + "";
    				game_score.innerText = ""+ (parseInt(game_score.innerText) + line_score) + "";
    				
    			}
    			
    			can_delete = true;
    		
    		}		
    		
    	}	
    
    //--------------方块 移动 主进程 down ----------------//	
    
    	function down_block()
    	{
    		if(!can_play)
    			return;
    	
    		var check_l_y = left_up_angle.y + 1;
    		var check_r_y = right_down_angle.y + 1;
    		
    		var judger = If_can_move(left_up_angle.x,check_l_y,right_down_angle.x,check_r_y);
    		
    
    		if(judger)
    		{
    			move_block_by(0,1);		
    			
    						
    			setTimeout("down_block()",game_speed)
    		}
    		else
    		{
    			can_move_block = false;
    			
    			var block_top = return_TOP();
    			
    			if(block_top<=(game_l_u_angle.y+2))
    			{
    				if(confirm("游戏结束,是否继续?"))
    				{
    					window.location.reload();
    				}
    				else
    				{
    					return;
    				}
    			}
    			else
    			{
    		
    				set_map_bgcolor(left_up_angle.x,left_up_angle.y,right_down_angle.x,right_down_angle.y) //设置背景颜色和value
    				
    				game_score.innerText = ""+ (parseInt(game_score.innerText) + block_score) + "";
    				
    					if(parseInt(game_score.innerText)>=(parseInt(game_number.innerText)*20000)) //如果达到过局的分数
    					{
    						game_number.innerText = ""+(parseInt(game_number.innerText)+1)+"";
    						
    						game_speed = game_speed - 60;
    						
    						if(game_speed <=0 )
    						{
    							game_speed = 540 - (parseInt(game_number.innerText)-1)*60;
    							
    							if(game_speed < 0)
    							{
    								alert("Win All");
    								return;
    							}
    						}
    						
    						game_max_speed = Math.floor(game_speed/20);
    
    					}			
    					
    					obj_stage.style.display = "none";
    		
    					delete_line(left_up_angle.y,right_down_angle.y);
    
    					
    					shape_now = shape_will;
    					shape_will = SHAPES[returnONE(6)];
    					shape_num =1;
    					
    					set_block(obj_table,shape_now,shape_num);
    					set_block(element_table,shape_will,shape_num);
    					
    					left_up_angle.x = game_l_u_angle.x;
    					left_up_angle.y = game_l_u_angle.y;
    					right_down_angle.x = game_r_d_angle.x;
    					right_down_angle.y = game_r_d_angle.y;
    					
    		         		obj_stage.style.pixelLeft = left_up_angle.x * block_width;
    					obj_stage.style.pixelTop  = left_up_angle.y * block_height;
    					
    					obj_stage.style.display = "block";
    					can_move_block = true;
    					
    					setTimeout("down_block()",game_speed);
    
    					
    			}
    				
    		} 
    	}
    
    //-------------- 获取 用户输入 方向 --------------	//
    
    
    
    	function document.onkeydown()
    	{
    	
    		if(!can_play) //如果不能玩,退出
    			return;
    			
    		if(!can_move_block) //如果不能移动。则退出
    			return;
    			
    		var key_code = event.keyCode;
    		
    		if(key_code == 37)
    		{
    			var check_l_x = left_up_angle.x - 1;
    			var check_r_x = right_down_angle.x - 1;
    			
    			var judger= If_can_move(check_l_x,left_up_angle.y,check_r_x,right_down_angle.y);
    			
    			if(judger)
    				move_block_by(-1,0);
    			else
    				return;         
    				
    		}
    		
    		if(key_code == 39)
    		{
    			var check_l_x = left_up_angle.x + 1;
    			var check_r_x = right_down_angle.x + 1;
    			
    			
    			var judger= If_can_move(check_l_x,left_up_angle.y,check_r_x,right_down_angle.y);
    
    			if(judger)
    				move_block_by(1,0);
    			else
    				return;         			
    		}
    		
    		if(key_code == 38)
    		{
    			shape_num++;
    			
    			if(shape_num>4)
    				shape_num = 1;
    				
    			tester = null	
    			tester = new test_block();
    			
    			var test_shape = eval(shape_now + shape_num);
    			
    			
    			
    			for(h=0;h<test_shape.length;h++)
    			{
    				for(w=0;w<test_shape[0].length;w++)
    				{
    					eval("tester.value_"+h+"_"+w+"=test_shape["+h+"].charAt("+w+")");
    					
    				}
    			}
    			
    			var judger = If_can_move_test(left_up_angle.x,left_up_angle.y,right_down_angle.x,right_down_angle.y)
    			
    			
    			if(!judger)
    			{
    				shape_num--;
    			}
    			else
    			{
    				set_block(obj_table,shape_now,shape_num);
    			}
    			
    	
    			
    		}
    		
    		if(key_code == 40)
    		{
    			game_speed = game_max_speed;
    		}	
    	}
    	
    	function document.onkeyup()
    	{
    		game_speed = 540 - (parseInt(game_number.innerText)-1)*60;
    
    	}
    
    
    //-----------------游戏控制-----------------------////
    
    	
    	function start_game(){   //游戏开始
    		
    		can_play = true;
    		can_move_block =true;
    		
    		
    		set_block(obj_table,shape_now,shape_num);
    		set_block(element_table,shape_will,shape_num);
     		down_block();	
    	}
    	
    	function pause_game() //暂停 游戏
    	{
    		can_play = false;
    		can_move_block =false;		
    	}
    	
    	function If_play(play_value)
    	{
    		if(play_value=="0")  //如果是刚开始
    		{
    			start_game();
    			
    			event.srcElement.value = "1";
    			event.srcElement.innerText = "暂  停"
    			
    		}
    		if(play_value=="1")
    		{
    			pause_game();
    			
    			event.srcElement.value = "2";
    			event.srcElement.innerText = "开  始"
    		}
    		if(play_value == "2")
    		{
    			can_play = true;
    			can_move_block =true;		
    			
             		down_block();	
    			
    			event.srcElement.value = "1";
    			event.srcElement.innerText = "暂  停";
    		}
    	}
    
    </script>
    
    
    </body>
    </html>
    
  • 相关阅读:
    Lambda Expression in C#
    DirectorySearcher LDAP
    摘录 LDAP
    The return types for the following stored procedures could not be detected
    无法调试存储过程,无法启动T-SQL调试
    根据窗口句柄显示窗体
    还原数据库时提示空间不足
    xml格式发送
    ../ 上一级目录
    匿名函数 invoke
  • 原文地址:https://www.cnblogs.com/_ymw/p/1855985.html
Copyright © 2011-2022 走看看