0404you1.htm

javascript各种效果的实例及源代码

var game_level_tag2 = '</p></td></tr></table>';

var table_background = new Image(16,16);
    table_background.src = "blockb.gif";

var table_intro_dim = "";
var table_intro = new Array(
  '"#000000"><tr align="center" valign="top"><td><br>向左: [J 键]<br>向右: [L 键]<br>改变形状: [I 键]<br>快速下落: [K 键]<br>暂停: [P 键]<br><br>请按任意键开始游戏<br><br>也可以用上下左右键更方便操作</p></td></tr></table>',
  '"#C0C0C0"><tr align="center" valign="top"><td><br><br><p class="tablet">' + game_name + '</p></td></tr></table>',
  '"#008080"><tr align="center" valign="top"><td><br><br><p class="tablet">' + game_name + '</p><p class="tableb"></p></td></tr></table>',
  '"#808000"><tr align="center" valign="top"><td><br><br><p class="tablet">' + game_name + '</p><p class="tableb"></p></td></tr></table>',
  '"#800000"><tr align="center" valign="top"><td><br><br><p class="tablet">' + game_name + '</p><p class="tableb"><br><br><br></p></td></tr></table>');

var is_NN4 = (document.layers);
var is_IE4 = (document.all);

function Hide_Tag() {
  _block.blockxx.style.pixelTop = -game_tag_height;
}

function Show_Level_Tag() {
  var next_step = 0;

  if ((game_tag_step > 0) && (!game_finished)) {
    next_step = Math.ceil(game_tag_step/20);

    _block.blockxx.style.pixelTop += next_step;
    game_tag_step -= next_step;

    setTimeout("Show_Level_Tag()",movement_timer); }
  else
    Hide_Tag();
}

function Show_Level() {
  Clear_Table();

  _block.block00.innerHTML = table_intro_dim + table_intro[game_level];

  if (game_level > 0) {
    _block.blockxx.innerHTML = game_level_tag1 + (game_level+1) + game_level_tag2;
    _block.blockxx.style.pixelTop = block_base_y;
    game_tag_step = game_tag_offset;
    setTimeout("Show_Level_Tag()",movement_timer); }
}

function Check_Position(block_x,block_y) {
  return ((!block_position[block_x + block1_x][block_y + block1_y]) &&
          (!block_position[block_x + block2_x][block_y + block2_y]) &&
          (!block_position[block_x + block3_x][block_y + block3_y]) &&
          (!block_position[block_x + block4_x][block_y + block4_y]))
}

function Check_Rotate() {
  var block_next_x = block_position_x;
  var block_next_dir = (block_direction < 3)?block_direction+1:0;

  Set_Offset(block_current,block_next_dir);

  if (block_position_y < (block_table_height - block_unit_height)) {
    while ((block_next_x + block_unit_width - 1) >= block_table_width) {
      block_next_x--; }

    if (Check_Position(block_next_x, block_position_y)) {
      block_direction = block_next_dir;
      return true; }
    else {
      Set_Offset(block_current,block_direction);
      return false; } }
  else {
    Set_Offset(block_current,block_direction);
    return false; }
}

function Check_Direction(x_offset,y_offset) {
  var block_next_x = block_position_x + x_offset;
  var block_next_y = block_position_y + y_offset;
  
  if ((block_next_x < 0) || (block_next_x > (block_table_width - block_unit_width)) || (block_next_y > (block_table_height - block_unit_height)))
    return false
  else
    return Check_Position(block_next_x, block_next_y);
}

function Set_Offset(block_num, block_dir) {
  var block_unit_offset = block_dir * 2;
  var block_matrix_offset = block_dir * block_matrix_unit;

  block_unit_width = block_unit_dim[block_num][block_unit_offset+0];
  block_unit_height = block_unit_dim[block_num][block_unit_offset+1];

  block1_x = block_matrix[block_num][block_matrix_offset+0];
  block1_y = block_matrix[block_num][block_matrix_offset+1];
  block2_x = block_matrix[block_num][block_matrix_offset+2];
  block2_y = block_matrix[block_num][block_matrix_offset+3];
  block3_x = block_matrix[block_num][block_matrix_offset+4];
  block3_y = block_matrix[block_num][block_matrix_offset+5];
  block4_x = block_matrix[block_num][block_matrix_offset+6];
  block4_y = block_matrix[block_num][block_matrix_offset+7];
}

function Get_Content(block_num) {
  return block_content1 + block_images[block_num].src + block_content2;
}

function Drop_Block() {
  var drop_step = 1;

  block_shown = false;  
  clearInterval(block_timer_id);
  
  while (Check_Direction(0,drop_step))
    drop_step++;

  Move_Block(0,drop_step-1);
  setTimeout("Check_Block()",1); // setTimeout so that block's final postion can be seen
}

function Move_Block(x_offset,y_offset) {
  var block_offset_x = x_offset * block_size;
  var block_offset_y = y_offset * block_size;

  block_position_x += x_offset;
  block_position_y += y_offset;

  _block.block1.style.pixelLeft += block_offset_x;
  _block.block1.style.pixelTop += block_offset_y;
  _block.block2.style.pixelLeft += block_offset_x;
  _block.block2.style.pixelTop += block_offset_y;
  _block.block3.style.pixelLeft += block_offset_x;
  _block.block3.style.pixelTop += block_offset_y;
  _block.block4.style.pixelLeft += block_offset_x;
  _block.block4.style.pixelTop += block_offset_y;
}

function Show_Block() {
  block_position_x = 4;
  block_position_y = 0;
  block_direction = 0;
  
  block_current = block_next;
  block_next = Math.floor(Math.random() * block_type);

  Set_Offset(block_current,block_direction);
  block_content = Get_Content(block_current);

  _block.block1.innerHTML = block_content;
  _block.block1.style.pixelLeft = (block1_x + block_position_x) * block_size + block_base_x;
  _block.block1.style.pixelTop = block1_y * block_size + block_base_y;
  
  _block.block2.innerHTML = block_content;
  _block.block2.style.pixelLeft = (block2_x + block_position_x) * block_size + block_base_x;
  _block.block2.style.pixelTop = block2_y * block_size + block_base_y;
  
  _block.block3.innerHTML = block_content;
  _block.block3.style.pixelLeft = (block3_x + block_position_x) * block_size + block_base_x;
  _block.block3.style.pixelTop = block3_y * block_size + block_base_y;
  
  _block.block4.innerHTML = block_content;
  _block.block4.style.pixelLeft = (block4_x + block_position_x) * block_size + block_base_x;
  _block.block4.style.pixelTop = block4_y * block_size + block_base_y;
  
  if (block_next != block_current) {
    Set_Offset(block_next,block_direction);
    block_content = Get_Content(block_next); }
  
  _block.blockp1.innerHTML = block_content;
  _block.blockp1.style.pixelLeft = block1_x * block_size + preview_base_x;
  _block.blockp1.style.pixelTop = block1_y * block_size + preview_base_y;
  
  _block.blockp2.innerHTML = block_content;
  _block.blockp2.style.pixelLeft = block2_x * block_size + preview_base_x;
  _block.blockp2.style.pixelTop = block2_y * block_size + preview_base_y;
  
  _block.blockp3.innerHTML = block_content;
  _block.blockp3.style.pixelLeft = block3_x * block_size + preview_base_x;
  _block.blockp3.style.pixelTop = block3_y * block_size + preview_base_y;
  
  _block.blockp4.innerHTML = block_content;
  _block.blockp4.style.pixelLeft = block4_x * block_size + preview_base_x;
  _block.blockp4.style.pixelTop = block4_y * block_size + preview_base_y;
  
  if (block_next != block_current) {
    Set_Offset(block_current,block_direction);
    block_content = Get_Content(block_current); }
  
  block_shown = true;

  if (Check_Direction(0,0))
    return true
  else
    return false;
}

function Mark_Block() {
  var this_offset_x = 0;
  var this_offset_y = 0;
  var this_block = null;

  block_shown = false;  

  for (var i = 1; i <= block_component; i++) {
    this_offset_x = block_position_x + eval(block_id + i + "_x");
    this_offset_y = block_position_y + eval(block_id + i + "_y");
  
    block_position[this_offset_x][this_offset_y] = true;
    document.images[this_offset_y*block_table_width+this_offset_x].src = block_images[block_current].src;
  
    this_block = eval(_block_style + block_id + i + "");

    this_block.style.pixelTop = -block_size; }
}

function Remove_Line(line_num) {
  var this_line = block_position_y + line_num;
  var upper_line = this_line - 1;
  var no_more_line = false;

  while ((upper_line >= 0) && (!no_more_line)) {
    no_more_line = true;

    for (var i = 0; i < block_table_width; i++) {
      if (block_position[i][upper_line]) {
        no_more_line = false;

        document.images[this_line*block_table_width+i].src = document.images[upper_line*block_table_width+i].src;
        block_position[i][this_line] = true;
        block_position[i][upper_line] = false; }
      else {
        document.images[this_line*block_table_width+i].src = table_background.src;
        block_position[i][this_line] = false; } }

    this_line--;
    upper_line--; }
}

function Show_Tag() {
  var next_step = 0;

  if (game_tag_step > 0) {
    next_step = Math.ceil(game_tag_step/10);

    _block.blockxx.style.pixelTop += next_step;
    game_tag_step -= next_step;

    setTimeout("Show_Tag()",movement_timer); }
  else
    Event_Init();
}

function Clear_Block() {
  _block.block1.style.pixelTop = -block_size;
  _block.block2.style.pixelTop = -block_size;
  _block.block3.style.pixelTop = -block_size;
  _block.block4.style.pixelTop = -block_size;
}

function Restart_Game() {
  high_score = (high_score < game_score)?game_score:high_score;

  game_score = 0;
  game_lines = 0;
  game_level = 0;
  game_finished = false;

  Hide_Tag();

  Clear_Block();
  Clear_Num();

  Show_Score();
  Show_Lines();
  Show_Level();

  Start_Block();
}

function Game_Over() {
  Event_Release();

  clearInterval(block_timer_id);

  if (game_winner)
    _block.blockxx.innerHTML = game_winner_tag
  else
    _block.blockxx.innerHTML = game_over_tag;

  _block.blockxx.style.pixelTop = block_base_y;

  game_winner = false;
  game_pause = false;
  game_finished = true;

  game_tag_step = game_tag_offset;

  setTimeout("Show_Tag()",movement_timer);
}

function Clear_Table() {
  for (var i = 0; i < block_table_height; i++)
    for (var j = 0; j < block_table_width; j++)
      if (block_position[j][i]) {
        document.images[i*block_table_width+j].src = table_background.src;
        block_position[j][i] = false; }
}

function Clear_Num() {
  var number_id = null;

  clearInterval(number_timer);

  for (var i = 0; i <= score_max_index; i++)
    if (!score_tag[i]) {
      number_id = eval(_block_style + block_id + "x" + i + "");

      number_id.style.pixelTop = -block_size;
      number_id.style.pixelLeft = 0;
      score_tag[i] = true; } 
}

function Move_Num() {
  var number_id = null;
  var score_found = 0;

  for (var i = 0; i <= score_max_index; i++)
    if (!score_tag[i]) {
      number_id = eval(_block_style + block_id + "x" + i + "");

      if (number_id.style.pixelTop > block_base_y) {
        number_id.style.pixelTop += score_step[number_id.lines-1];
        score_found++; }
      else {
        number_id.style.pixelTop = -block_size;
        number_id.style.pixelLeft = 0;
        score_tag[i] = true; } }

  if (score_found == 0) {
    clearInterval(number_timer);
    score_shown = false; }
}

function Show_Num(line_num, line_offset) {
  var number_id = null;
  var this_index = score_index;
  var this_offset = ((block1_x + block_position_x) > 0)?-1:0;
  var score_content = score_content1 + line_num + score_content2 + score_grip[line_num-1] + score_content3;

  while (!score_tag[score_index]) {
    score_index++;

    if (score_index > score_max_index)
      score_index = 0;

    if (score_index == this_index) {
      score_index++;
      if (score_index > score_max_index)
        score_index = 0;
      break; } }