Recently, I have studied the writing method of "Tetris", which is very cleverly designed. The code is shown as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My little cube!</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
/*The styles used in the program.*/
.Rect {
border: 2px solid #FFFFFF;
width: 265;
height: 575;
}
.td {
border: 1px double #FFFFFF;
}
.stop {
border: 1px double #FFFFFF;
}
.smallRect {
border: 2px solid #FFFFFF;
width: 89;
height: 50;
}
.smallTd {
border: 1px double #FFFFFF;
}
-->
</style>
</head>
<body bgcolor="#000000">
<div id="lay" style="Z-INDEX:1; LEFT:23px; POSITION:absolute; TOP:10px">
<table id="tabArea" class="rect" cellpadding="0" cellspacing="1">
</table>
</div>
<div id="View" style="Z-INDEX:3; LEFT:314px; POSITION:absolute; TOP:16px">
<table id="tabView" border="0" cellpadding="1" cellspacing="1" class="smallRect">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="layScore" style="position:absolute; left:326px; top:390px; z-index:4">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="color:#ffffff">分数:</td>
<td id=tdScore align="center" style="color:#ff0000">0</td>
</tr>
</table>
</div>
<div id="Layer1" style="POSITION:absolute;Z-INDEX:2; left:331px; top: 465px;height:36px;">
<INPUT onclick="GameStart();" type="button" value="开始" id="btnStart">
</div>
</body>
</html>
<script language="javascript">
var RECTROW = 20; //Define 24 lines. Big square
var RECTCOL = 10; // define 10 columns of large squares
var arrView = new Array(6); //The upper right is small
var hInter; //InterVal handle.
var val = 600; // Delay.
var hFlash;
var flashVal = 50; //The frequency of flash when the layer is removed.
var flashCount = 5; //Number of flashes.
var minR=0; //The lowest level that currently contains entities.
var BGCOLOR='#0000ff'; //Block color
var INITPOS = 4; //New entity position.
var reCur; //The current entity serial number.
var reNext = Math.round(Math.random()*5);;
var arrMove = new Array(); //The current moving block
var blnBottom = true; //Whether to the bottom
var transfer = 1; //The direction of the change.
var arrC = new Array();
Load();
function $(id) {return document.getElementById(id);}
//-----------------------Buttons and various events------- ------------
// Event functions used in the game..
function GameStart()
{
if($('btnStart').value == 'start')
{
hInter = window.setInterval(Run,val);
document.onkeydown = OnKeyDown;
$('btnStart').value = 'Pause';
}
else
{
$('btnStart').value = 'Start';
window.clearInterval(hInter);
document.onkeydown = null;
}
}
function OnKeyDown(e)
{
var code = 0;
if(e)
code = e.keyCode; //ff browser
else
code = window.event.keyCode; //IE
switch(code)
{
case 37: //Left Arrow
LeftDown();
break;
case 39: //right Arrow
RightDown();
break;
case 38: //top Arrow --> change
TopDown();
break;
case 40: //bottom Arrow;
BottomDown();
break;
}
}
function LeftDown()
{
for(var i =0;i<arrMove.length;i++)
{
var r = arrMove [i] [0] -1;
var c = arrMove [i] [1] -1;
if( c+1==0 || $('tabArea').rows[r].cells[c].className.toLowerCase() == 'stop' ) return; //if to edge
}
Clear();
blnBottom = false;
for(var i=0;i<arrMove.length;i++)
{
var r = arrMove [i] [0] -1;
var c = --arrMove [i] [1];
$('tabArea').rows[r].cells[c].bgColor = BGCOLOR;
$('tabArea').rows[r].cells[c].className = 'td';
if(r+1==RECTROW || $('tabArea').rows[r+1].cells[c].className.toLowerCase()=='stop')
{
blnBottom = true;
}
}
}
function RightDown()
{
for(var i =0;i<arrMove.length;i++)
{
var r = arrMove [i] [0] -1;
var c = arrMove [i] [1] +1;
if(c==RECTCOL || $('tabArea').rows[r].cells[c].className.toLowerCase() == 'stop' )return; //If to edge.
}
Clear();
blnBottom = false;
for(var i=0;i<arrMove.length;i++)
{
var r = arrMove [i] [0] -1;
var c = ++ arrMove [i] [1];
$('tabArea').rows[r].cells[c].bgColor=BGCOLOR;
$('tabArea').rows[r].cells[c].className='td';
if(r+1==RECTROW || $('tabArea').rows[r+1].cells[c].className.toLowerCase()=='stop')
{
blnBottom = true;
}
}
}
function TopDown() //The default is to turn clockwise.
{
if(blnBottom)return;
var oR = arrMove[1][0] - 1; //Center element.
var oC = arrMove [1] [1];
if(AnyRectChange() == 0) return;
blnBottom = false;
for(var i=0;i<arrMove.length;i++)
{
var r = arrMove [i] [0] - 1;
var c = arrMove [i] [1];
//display changes..
var nc = (c - oC);
var nr = (r - oR);
r = oR + nc * transfer;
c = oC - nr * transfer;
if((r+1) >= RECTROW || r < 0 || c < 0 || c >= RECTCOL || $('tabArea').rows[r].cells[c].className == 'stop') return;
if($('tabArea').rows[r+1].cells[c].className == 'stop') blnBottom = true;
}
Clear();
for(var i=0;i<arrMove.length;i++)
{
var r = arrMove [i] [0] - 1;
var c = arrMove [i] [1];
//display changes..
var nc = (c - oC);
var nr = (r - oR);
r = oR + nc * transfer;
c = oC - nr * transfer;
$('tabArea').rows[r].cells[c].bgColor = BGCOLOR;
$('tabArea').rows[r].cells[c].className = 'td';
arrMove[i][0] = r + 1;
arrMove[i][1] = c;
}
}
function BottomDown()
{
if(!blnBottom)
{
Runing();
}
}
//-----------------------------------------------since Defining a function -----------------------
// function used
//Initial scene..
function Load()
{
var tabRoot = $ ('tabArea');
for(var i=0;i<RECTROW;i++)
{
var row = tabRoot.insertRow(tabRoot.rows.length);
for(var j=0;j<RECTCOL;j++)
{
var cell = row.insertCell(j);
cell.innerHTML = ' ';
}
}
InitSmallRect();
}
//Initial elements.
function InitSmallRect()
{
//The second block of each entity is the central element
arrView[0] = new Array(new Array(0,1),new Array(1,1),new Array(2,1),new Array(2,2)); // L
arrView[1] = new Array(new Array(0,1),new Array(1,1),new Array(2,1),new Array(3,1)); // |
arrView[2] = new Array(new Array(0,1),new Array(0,2),new Array(1,1),new Array(1,2)); // 田
arrView[3] = new Array(new Array(0,1),new Array(1,1),new Array(2,1),new Array(1,2)); // 山
arrView[4] = new Array(new Array(0,0),new Array(0,1),new Array(1,1),new Array(1,2)); // Z
arrView[5] = new Array(new Array(0,2),new Array(0,1),new Array(1,1),new Array(1,0)); // S
}
function ViewSmallRect()
{
reCur = reNext;
reNext = Math.round(Math.random()*5); //Generate an entity randomly.
for(var i=0;i<arrView[reCur].length;i++)
{ // clear first
var r = arrView[reCur][i][0];
var c = arrView[reCur][i][1];
if(reCur != 1) r+=1;
var cel = $('tabView').rows[r].cells[c];
cel.bgColor='';
cel.className = '';
}
for(var i=0;i<arrView[reNext].length;i++)
{
var r = arrView[reNext][i][0];
var c = arrView[reNext][i][1];
if(reNext != 1) r+=1;
var cel = $('tabView').rows[r].cells[c];
cel.bgColor=BGCOLOR;
cel.className = "smallTd";
}
}
// Generate a new entity.
function Create()
{
// Before creating a new entity, save the state of the previous entity
for(var i=0;i<arrMove.length;i++)
{
var r = arrMove [i] [0] -1;
var c = arrMove [i] [1];
$('tabArea').rows[r].cells[c].className = 'stop';
}
Mark(); //Delay and score.
ViewSmallRect();
arrMove = new Array();
for(var i=0;i<arrView[reCur].length;i++)
{
arrMove[i] = new Array();
arrMove[i][0]=arrView[reCur][i][0];
arrMove[i][1]=arrView[reCur][i][1] + INITPOS;
}
for(var i=0;i<arrMove.length;i++) //displayed at INITPOS
{
var r = arrMove [i] [0] ++;
var c = arrMove [i] [1];
if($('tabArea').rows[r].cells[c].className=='stop')
{
alert('Game Over!'); //Game Over.
window.clearInterval(hInter);
return;
}
$('tabArea').rows[r].cells[c].bgColor=BGCOLOR;
$('tabArea').rows[r].cells[c].className = 'td';
}
blnBottom = false;
}
function Runing()
{
for(var i=0;i<arrMove.length;i++)
{
var r = arrMove [i] [0];
var c = arrMove [i] [1];
if(r >= RECTROW || $('tabArea').rows[r].cells[c].className.toLowerCase()=='stop')
{
blnBottom = true;
return;
}
}
Clear();
for(var i=0;i<arrMove.length;i++)
{
var r = arrMove [i] [0] ++;
var c = arrMove [i] [1];
var col = $('tabArea').rows[r].cells[c];
col.bgColor=BGCOLOR;
col.className = 'td';
}
}
//The game runs..
function Run()
{
if(blnBottom)
{
Create();
}
else
{
Runing();
}
}
//clear
function Clear()
{
for(var k=0;k<arrMove.length;k++)
{
var r = arrMove [k] [0] -1;
var c = arrMove [k] [1];
$('tabArea').rows[r].cells[c].bgColor='';
$('tabArea').rows[r].cells[c].className='';
}
}
//The operation of the special entity
function AnyRectChange()
{
switch(reCur)
{
case 1: // |
transfer *= -1;
break;
case 2: // field
return 0;
break;
case 4:
transfer *= -1;
break;
case 5:
transfer *= -1;
break;
}
}
function Mark()
{
arrC = new Array();
minR = 0;
for(var i=RECTROW-1;i>=0;i--)
{
var full = true;
var empty = true;
for(var j=0;j<RECTCOL;j++)
{
var td = $('tabArea').rows[i].cells[j];
if(td.className.toLowerCase() == 'stop') empty = false;
full = (td.className == 'stop') && full
}
if(empty)
{
minR = i-1;
break;
} //If it is a blank line.
if(full)arrC.push(i);
}
if(arrC.length > 0)
{
hFlash = window.setInterval(WillClear,flashVal); //闪光
flashCount = 5;
}
}
//flash..
function WillClear()
{
for(var i=0;i<arrC.length;i++)
{
for(var j=0;j<RECTCOL;j++)
{
if($('tabArea').rows[arrC[i]].cells[j].bgColor.toLowerCase() == BGCOLOR.toLowerCase())
{
$('tabArea').rows[arrC[i]].cells[j].bgColor = '#ffffff';
}
else
{
$('tabArea').rows[arrC[i]].cells[j].bgColor = BGCOLOR;
}
}
}
flashCount --;
if(flashCount <= 0)
{
ClearFull(minR);
window.clearInterval(hFlash);
}
}
//Remove the full layer.
function ClearFull(minRow)
{
var arrFull = arrC;
for(var i=0;i<arrFull.length;i++)
{
var r = arrFull [i] + i;
for(var j=0;j<RECTCOL;j++)
{
$('tabArea').rows[r].cells[j].className = '';
$('tabArea').rows[r].cells[j].bgColor = '';
for(var k=r-1;k>minRow;k--)
{
if($('tabArea').rows[k].cells[j].className == 'stop') //The row above moves down.
{
$('tabArea').rows[k].cells[j].className = '';
$('tabArea').rows[k].cells[j].bgColor = '';
$('tabArea').rows[k+1].cells[j].className = 'stop';
$('tabArea').rows[k+1].cells[j].bgColor = BGCOLOR;
}
}
}
minRow++;
}
// Score.
switch(arrFull.length)
{
case 1:
$('tdScore').innerHTML = Number($('tdScore').innerHTML) + 100;
break;
case 2:
$('tdScore').innerHTML = Number($('tdScore').innerHTML) + 300;
break;
case 3:
$('tdScore').innerHTML = Number($('tdScore').innerHTML) + 500;
break;
case 4:
$('tdScore').innerHTML = Number($('tdScore').innerHTML) + 800;
break;
}
}
</script>
Time relationship, analysis next week.