0404you1.htm

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

  number_id = eval(_block_style + block_id + "x" + score_index + "");
  number_id.lines = line_num;
  score_tag[score_index] = false;
  
  number_id.style.pixelLeft = (block1_x + block_position_x + this_offset) * block_size + block_base_x;
  number_id.style.pixelTop = (block1_y + block_position_y + line_offset) * block_size + block_base_y;
  number_id.innerHTML = score_content;

  if (!score_shown) {
    score_shown = true;
    number_timer = setInterval("Move_Num()",movement_timer); }
}

function Show_Score() {
  _block.score.document.forms[0].High_Score.value = high_score;
  _block.score.document.forms[0].Game_Score.value = game_score;
}

function Show_Lines() {
  if (!game_winner)
    _block.score.document.forms[0].Lines_Remain.value = game_level_lines[game_level] - game_lines
  else
    _block.score.document.forms[0].Lines_Remain.value = game_lines;
}

function Check_Line() {
  var line_done = false;
  var line_found = 0;
  var line_offset = 0;

  for (var i = 0; i < block_unit_height; i++) {
    line_done = true;

    for (var j = 0; j < block_table_width; j++)
      if (!block_position[j][block_position_y+i]) {
        line_done = false;
        break; }

    if (line_done) {
      if (line_found == 0)
        line_offset = i;

      line_found++;
      Remove_Line(i); } }

  if (line_found > 0) {
    Show_Num(line_found,line_offset);

    game_score += score_grip[line_found-1];
    Show_Score();

    game_lines += line_found;
    if ((game_lines >= game_level_lines[game_level]) && (!game_winner)) {
      game_lines -= game_level_lines[game_level];

      if (game_level < game_max_level) {
        game_level++;
        Show_Level(); }
      else
        game_winner = true; }

    Show_Lines(); }

}

function Check_Block() {
  Mark_Block();
  Check_Line();
  Start_Block();
}

function Mov_Block() {
  if (Check_Direction(0,1)) {
    block_position_y++;

    _block.block1.style.pixelTop += block_size;
    _block.block2.style.pixelTop += block_size;
    _block.block3.style.pixelTop += block_size;
    _block.block4.style.pixelTop += block_size; }
  else
    Check_Block();
}

function Resume_Game() {
  game_pause = false;
  block_timer_id = setInterval("Mov_Block()",block_timer[game_level]);
  number_timer = setInterval("Move_Num()",movement_timer);
}

function Pause_Game() {
  game_pause = true;
  clearInterval(block_timer_id);
  clearInterval(number_timer);
}

function Key_Down() {
  var key_code = event.keyCode;

  if (game_finished)
    Restart_Game()
  else {
    if (game_pause)
      Resume_Game();

    if((key_code == key_pause) || (key_code == key_PAUSE)) {
      if (block_shown)
        Pause_Game(); }

    if((key_code == key_down) || (key_code == key_DOWN)) {
      if (block_shown)
        Drop_Block(); }

    if ((key_code == key_up) || (key_code == key_UP)) {
      if (block_shown)
        if (Check_Rotate())
          Rotate_Block(); }

    if ((key_code == key_left) || (key_code == key_LEFT)) {
      if (block_shown)
        if (Check_Direction(-1,0))
          Move_Block(-1,0); }

    if ((key_code == key_right) || (key_code == key_RIGHT)) {
      if (block_shown)
        if (Check_Direction(1,0))
          Move_Block(1,0); } }

  return false;
}

function Rotate_Block() {
  while ((block_position_x + block_unit_width - 1) >= block_table_width) {
    block_position_x--; }

  _block.block1.style.pixelLeft = (block1_x  + block_position_x) * block_size + block_base_x;
  _block.block1.style.pixelTop = (block1_y + block_position_y) * block_size + block_base_y;

  _block.block2.style.pixelLeft = (block2_x + block_position_x) * block_size + block_base_x;
  _block.block2.style.pixelTop = (block2_y + block_position_y) * block_size + block_base_y;

  _block.block3.style.pixelLeft = (block3_x + block_position_x) * block_size + block_base_x;
  _block.block3.style.pixelTop = (block3_y + block_position_y) * block_size + block_base_y;

  _block.block4.style.pixelLeft = (block4_x + block_position_x) * block_size + block_base_x;
  _block.block4.style.pixelTop = (block4_y + block_position_y) * block_size + block_base_y;
}

function Start_Block() {
  if (Show_Block()) {
    clearInterval(block_timer_id);
    block_timer_id = setInterval("Mov_Block()",block_timer[game_level]); }
  else
    Game_Over();
}

function Table_Init() {
  var layer_content = "";
  
  layer_content = '<table width="' + (block_table_width * block_size + block_preview_gap * 2) + '" height="' + (block_table_height * block_size + block_preview_gap * 2) + '" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" border="3"><tr><td>&nbsp;</td></tr></table>';
  _block.blockb0.innerHTML = layer_content;

  layer_content = '<table width="' + (block_table_width * block_size) + '" height="' + (block_table_height * block_size) + '" bgcolor="#000000" cellpadding="0" cellspacing="0" border="0"><tr><td>&nbsp;</td></tr></table>';
  _block.blockb1.innerHTML = layer_content;

  layer_content = '<table width="' + (block_table_width * block_size) + '" height="' + (block_table_height * block_size) + '" cellpadding="0" cellspacing="0" border="0">';
  for (var i = 0; i < block_table_height; i++) {
    layer_content += '<tr align="center" valign="middle">';
    for (var j = 0; j < block_table_width; j++)
      layer_content += '<td><img src = "blockb.gif" width="' + block_size + '" height="' + block_size + '" border="0"></td>';
    layer_content += '</tr>'; }
  layer_content += '</table>';

  _block.block01.innerHTML = layer_content;

  layer_content = '<table width="' + (block_preview_x * block_size + block_preview_gap * 2) +'" height="' + (block_preview_y * block_size + block_preview_gap * 2) + '" bgcolor="#000000" cellpadding="0" cellspacing="0" border="2"><tr><td>&nbsp</td></tr></table>';
  _block.previewx.innerHTML = layer_content;

  layer_content = '<table width="' + (block_preview_x * block_size) +'" height="' + (block_preview_y * block_size) + '" bgcolor="#000000" cellpadding="0" cellspacing="0" border="0"><tr><td>&nbsp</td></tr></table>';
  _block.preview.innerHTML = layer_content;

  layer_content = '<p class="info"><form>' +
    '<nobr>最高得分</nobr>' +
    '<input type="text" name="High_Score" maxlenght="6" size="6" value=0 onfocus="blur();"><br><br>' +
    '<nobr>你的得分</nobr>' +
    '<input type="text" name="Game_Score" maxlenght="6" size="6" value=0 onfocus="blur();"><br><br>' +
    '<nobr>剩下的行数</nobr>' +
    '<input type="text" name="Lines_Remain" maxlenght="6" size="6" value=0 onfocus="blur();">' +
    '</form></p>';
  _block.score.innerHTML = layer_content;
}

function Define_Layer(Layer_ID, Layer_Left, Layer_Top, Layer_Width, Layer_Height) {
  var this_block = null;

  this_block = eval(_block_style + Layer_ID);
  this_block.style.pixelLeft = Layer_Left;
  this_block.style.pixelTop = Layer_Top;
  this_block.style.width = Layer_Width;
  this_block.style.height = Layer_Height;
  this_block.style.visibility = "visible";
}

function Layer_Init() {
  var this_block_id = "";

  // layers for falling blocks
  for (i = 1; i <= block_component; i++) {
    this_block_id = block_id + i + "";
    Define_Layer(this_block_id,0,-block_size,block_size,block_size); }

  // layers for preview blocks
  for (i = 1; i <= block_component; i++) {
    this_block_id = block_id + "p" + i + "";
    Define_Layer(this_block_id,0,-block_size,block_size,block_size); }

  // layers for score points
  for (i = 0; i <= score_max_index; i++) {
    this_block_id = block_id + "x" + i + "";
    Define_Layer(this_block_id,0,-block_size,block_size,block_size); }

  // layer for game tags
  Define_Layer("blockxx",tag_layer_offset,-game_tag_height,game_tag_width,game_tag_height);

  // layer for table outer background
  Define_Layer("blockb0",(block_base_x - block_preview_gap),(block_base_y - block_preview_gap),(block_table_width * block_size + block_preview_gap * 2),(block_table_height * block_size + block_preview_gap * 2));

  // layer for table inner background
  Define_Layer("blockb1",block_base_x,block_base_y,(block_table_width * block_size),(block_table_height * block_size));

  // layer for table intro
  Define_Layer("block00",block_base_x,block_base_y,(block_table_width * block_size),(block_table_height * block_size));

  // layer for table
  Define_Layer("block01",block_base_x,block_base_y,(block_table_width * block_size),(block_table_height * block_size));

  // layer for preview box background
  Define_Layer("previewx",(preview_base_x - block_preview_gap),(preview_base_y - block_preview_gap),(block_preview_x * block_size + block_preview_gap * 2),(block_preview_y * block_size + block_preview_gap * 2));

  // layer for preview box
  Define_Layer("preview",preview_base_x,preview_base_y,(block_preview_x * block_size),(block_preview_y * block_size));

  // layer for score board
  Define_Layer("score",(preview_base_x - block_preview_gap),(preview_base_y + block_preview_y * block_size + block_preview_gap + block_table_gap),1,1);
}

function Para_Init() {
  var block_window_width = document.body.clientWidth;
  var block_window_height = document.body.clientHeight;
  var block_scale = 1;
  var block_table_x_size = 0;
  var block_table_y_size = 0;

  block_size = 16;

  if ((block_window_width > block_base_width) || (block_window_height > block_base_height)) {
    block_scale = Math.min(block_window_width/block_base_width, block_window_height/block_base_height);
    block_scale = Math.max(block_scale, 1); }

  block_size = Math.floor(block_size * block_scale);

  block_table_x_size = block_preview_gap + block_table_width * block_size + block_preview_gap + block_table_gap + block_preview_gap + block_preview_x * block_size + block_preview_gap;
  block_table_y_size = block_preview_gap + block_table_height * block_size + block_preview_gap;
  
  block_window_width = Math.max(block_window_width, block_table_x_size);
  block_window_height = Math.max(block_window_height, block_table_y_size);

  block_base_x = Math.floor((block_window_width - block_table_x_size)/2) + block_preview_gap;
  block_base_y = Math.floor((block_window_height - block_table_y_size)/2) + block_preview_gap;

  preview_base_x = block_base_x + block_table_width * block_size + block_table_gap + block_preview_gap;
  preview_base_y = block_base_y + block_preview_gap;

  game_tag_offset = (block_table_height * block_size - game_tag_height)/2;

  tag_layer_offset = block_base_x + (block_table_width * block_size - game_tag_width)/2;

  block_content1 = '<table width="' + block_size + '" height="' + block_size + '" cellpadding="0" cellspacing="0" border="0"><tr align="center" valign="middle"><td><img src="';
  block_content2 = '" width="' + block_size + '" height="' + block_size + '" border="0"></td></tr></table>';

  table_intro_dim = '<table width="' + (block_table_width * block_size) + '" height="' + (block_table_height * block_size) + '" cellpadding="0" cellspacing="0" border="0" bgcolor=';
}

function Game_Init() {
  if (is_IE4) {
    _block = document.all;

    Para_Init();
    Layer_Init();

    Table_Init();
    Event_Init();

    Show_Score();
    Show_Lines();
    Show_Level(); }
  else
    alert("Sorry!\nYou need Internet Explorer 4 or above to play this script");
}

function Event_Release() {
  document.onkeydown = null;
}

function Event_Init() {
  document.onkeydown = Key_Down;
}

function Resizing_Table() {
    Para_Init();
    Layer_Init();
    Table_Init();
    Restart_Game();
    Pause_Game();
}

window.onresize = Resizing_Table;
//-->
</script>
<div id="blockb0"></div><div id="blockb1"></div><div id="block00"></div><div id="block01"></div>
<div id="score"></div>
<div id="previewx"></div><div id="preview"></div>
<div id="block1"></div><div id="block2"></div><div id="block3"></div><div id="block4"></div>
<div id="blockp1"></div><div id="blockp2"></div><div id="blockp3"></div><div id="blockp4"></div>
<div id="blockx0"></div><div id="blockx1"></div><div id="blockx2"></div><div id="blockx3"></div><div id="blockx4"></div><div id="blockx5"></div><div id="blockx6"></div><div id="blockx7"></div>
<div id="blockxx"></div>



第二步：把<body>中的内容改为：
<body onload="Game_Init();">
</textarea>
<SCRIPT LANGUAGE="JavaScript">

<!-- hide

function goHist(a) 

{

   history.go(a);

}

//-->

</script>

<FORM METHOD="post">
<INPUT TYPE="button" VALUE="返回" onClick="goHist(-1)" style="background-color: #8000FF; color: rgb(255,255,255)">
</form>
</center>
<br>
<br>
</body>
</html>