2、方块游戏

2、方块游戏

<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>网页特效---俄罗斯方块游戏</title>

<style>

TD{width: 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; width: 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 = "";    //现在的blockvalue

             

              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>

 

Write a comment

Comments: 0