📄 0404you1.htm

📁 javascript各种效果的实例及源代码
💻 HTM
📖 第 1 页 / 共 5 页
字号:
12 3 4 5 下一页
<html>
<head>
<title>经典俄罗斯方块</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<body bgcolor="#fef4d9" text="#ffffff" onload="Game_Init();">
<br>
<br>
<center><font color=red face="隶书" size=6>经典俄罗斯方块</font></center>
<br>
<center>

<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 ';
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;
12 3 4 5 下一页
💿 文件大小 1152 K
👤 上传用户 sujiwei
📂 所属分类 Java书籍
🏷️ 相关标签

#javascript #源代码
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -