0404you1.htm

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

      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>
<table border=5 bordercolor=blue borderlight=green>
<tr><td align=center><font size=5 color=red face="Arial, Helvetica, sans-serif"><strong>下面为效果显示</strong></font></td></tr>
<tr><td align=left>
</td></tr>
</table></center>
<br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br>
<center>
<textarea name=source rows=12 cols=45 class=yk9>
脚本说明:
第一步：把如下代码加入<body>区域中
<style type="text/css">
<!--
#blockb0 {position:absolute; left:0; top:0; z-index:1;}
#blockb1 {position:absolute; left:0; top:0; z-index:2;}
#block00 {position:absolute; left:0; top:0; z-index:3;}
#block01 {position:absolute; left:0; top:0; z-index:4;}

#block1 {position:absolute; left:0; top:0; z-index:5;}
#block2 {position:absolute; left:0; top:0; z-index:5;}
#block3 {position:absolute; left:0; top:0; z-index:5;}
#block4 {position:absolute; left:0; top:0; z-index:5;}

#blockx0 {position:absolute; left:0; top:0; z-index:6;}
#blockx1 {position:absolute; left:0; top:0; z-index:6;}
#blockx2 {position:absolute; left:0; top:0; z-index:6;}
#blockx3 {position:absolute; left:0; top:0; z-index:6;}
#blockx4 {position:absolute; left:0; top:0; z-index:6;}
#blockx5 {position:absolute; left:0; top:0; z-index:6;}
#blockx6 {position:absolute; left:0; top:0; z-index:6;}
#blockx7 {position:absolute; left:0; top:0; z-index:6;}

#score    {position:absolute; left:0; top:0; z-index:1;}
#previewx {position:absolute; left:0; top:0; z-index:1;}
#preview  {position:absolute; left:0; top:0; z-index:2;}
#blockp1  {position:absolute; left:0; top:0; z-index:3;}
#blockp2  {position:absolute; left:0; top:0; z-index:3;}
#blockp3  {position:absolute; left:0; top:0; z-index:3;}
#blockp4  {position:absolute; left:0; top:0; z-index:3;}

#blockxx {position:absolute; left:0; top:0; z-index:7;}

p.score1   {text-decoration:underline; font-size:10px; font-weight:bold; color:#00FF00; font-family:"verdana,arial,helvetica";}
p.score2   {text-decoration:underline; font-size:11px; font-weight:bold; color:#FF00FF; font-family:"verdana,arial,helvetica";}
p.score3   {text-decoration:underline; font-size:12px; font-weight:bold; color:#FFFF00; font-family:"verdana,arial,helvetica";}
p.score4   {text-decoration:underline; font-size:14px; font-weight:bold; color:#FF0000; font-family:"verdana,arial,helvetica";}
p.winner   {font-size:22px; font-weight:bold; color:#FF0000; font-family:"times,arial,helvetica";}
p.gameover {font-size:18px; font-weight:bold; color:#FFFFFF; font-family:"times,arial,helvetica";}
p.level    {font-size:12px; font-weight:bold; color:#000000; font-family:"verdana,arial,helvetica";}
p.info     {font-size:12px; color:#000000; font-family:"verdana,arial,times,helvetica";}
p.tableb   {font-size:12px; color:#FFFFFF; font-family:"arial,verdana,times,helvetica";}
p.tablet   {font-size:17px; color:#FF0000; font-family:"verdana,arial,times,helvetica";}
-->
</style>

<script language="javascript">
<!--
var game_name = "Simple Tetris";

var _block = null;
var _block_style = "document.all.";

var key_up = 73;
var key_UP = 38;
var key_down = 75;
var key_DOWN = 40;
var key_left = 74;
var key_LEFT = 37;
var key_right = 76;
var key_RIGHT = 39;
var key_pause = 80;
var key_PAUSE = 32;

var block_size = 16;
var block_base_width = 400;
var block_base_height = 400;

var block_base_x = 0;
var block_base_y = 0;
var preview_base_x = 0;
var preview_base_y = 0;
var game_tag_offset = 0;
var game_tag_step = 0;
var tag_layer_offset = 0;

var game_tag_width = 120;
var game_tag_height = 40;
var block_table_gap = 30;
var block_preview_gap = 10;
var block_preview_x = 3;
var block_preview_y = 4;

var block_id = "block";

var block_matrix_unit = 8;
var block_matrix = new Array(
  new Array(0,0,1,0,0,1,1,1,0,0,1,0,0,1,1,1,0,0,1,0,0,1,1,1,0,0,1,0,0,1,1,1),
  new Array(1,0,2,0,0,1,1,1,0,0,0,1,1,1,1,2,1,0,2,0,0,1,1,1,0,0,0,1,1,1,1,2),
  new Array(0,0,1,0,1,1,2,1,1,0,0,1,1,1,0,2,0,0,1,0,1,1,2,1,1,0,0,1,1,1,0,2),
  new Array(0,0,0,1,0,2,1,2,2,0,0,1,1,1,2,1,0,0,1,0,1,1,1,2,0,0,1,0,2,0,0,1),
  new Array(1,0,1,1,0,2,1,2,0,0,1,0,2,0,2,1,0,0,1,0,0,1,0,2,0,0,0,1,1,1,2,1),
  new Array(0,0,0,1,0,2,0,3,0,0,1,0,2,0,3,0,0,0,0,1,0,2,0,3,0,0,1,0,2,0,3,0),
  new Array(0,0,1,0,2,0,1,1,0,0,0,1,1,1,0,2,1,0,0,1,1,1,2,1,1,0,0,1,1,1,1,2));
var block_unit_dim = new Array(
  new Array(2,2,2,2,2,2,2,2),
  new Array(3,2,2,3,3,2,2,3),
  new Array(3,2,2,3,3,2,2,3),
  new Array(2,3,3,2,2,3,3,2),
  new Array(2,3,3,2,2,3,3,2),
  new Array(1,4,4,1,1,4,4,1),
  new Array(3,2,2,3,3,2,2,3));
var block_unit_width = 0;
var block_unit_height = 0;

var block_images = new Array(new Image(16,16),new Image(16,16),new Image(16,16),new Image(16,16),new Image(16,16),new Image(16,16),new Image(16,16));
    block_images[0].src = "block0.gif";
    block_images[1].src = "block1.gif";
    block_images[2].src = "block2.gif";
    block_images[3].src = "block3.gif";
    block_images[4].src = "block4.gif";
    block_images[5].src = "block5.gif";
    block_images[6].src = "block6.gif";

var block1_x = 0;
var block1_y = 0;
var block2_x = 0;
var block2_y = 0;
var block3_x = 0;
var block3_y = 0;
var block4_x = 0;
var block4_y = 0;

var block_type = 7;
var block_component = 4;

var block_next = Math.floor(Math.random() * block_type);
var block_current = 0;
var block_direction = 0;

var block_timer_id = 0;
var block_timer = new Array(480,360,240,120,60);
var movement_timer = 30;

var block_table_width = 10;
var block_table_height = 20;

var block_shown = false;
var block_position_x = 4;
var block_position_y = 0;

function one_column() {
  for (var i = 0; i < block_table_height; i++)
    this[i] = false;
}
function one_table() {
  for (var i = 0; i < block_table_width; i++)
    this[i] = new one_column();
}
var block_position = new one_table();

var block_content = "";
var block_content1 = "";
var block_content2 = "";

var game_finished = true;
var game_pause = false;
var game_winner = false;
var game_winner_tag = '<table width="' + game_tag_width + '" height="' + game_tag_height + '" bgcolor="#000000" cellpadding="0" cellspacing="0" border="1"><tr align="center" valign="middle"><td><p class="winner">胜利者</p></td></tr></table>';
var game_over_tag = '<table width="' + game_tag_width + '" height="' + game_tag_height + '" bgcolor="#000000" cellpadding="0" cellspacing="0" border="1"><tr align="center" valign="middle"><td><p class="gameover"><font size=2 color=white>游戏结束<br>请按任意键继续</font></p></td></tr></table>';

var number_timer = 0;

var score_shown = false;
var score_index = 0;
var score_max_index = 7;
var score_tag = new Array(true,true,true,true,true,true,true,true);
var score_step = new Array(-4,-2,-1,-1);
var score_grip = new Array(10,50,100,300);
var score_content1 = '<p class="score';
var score_content2 = '">';
var score_content3 = '</p>';

var high_score = 0;
var game_score = 0;
var game_lines = 0;
var game_level = 0;
var game_max_level = 4;
var game_level_lines = new Array(50,40,30,20,10);
var game_level_tag1 = '<table width="' + game_tag_width + '" height="' + game_tag_height + '" cellpadding="0" cellspacing="0" border="1"><tr align="center" valign="middle"><td><p class="level">Level ';