由于Ajax开发中Javascript是关键,配合着Ajax讲义.我在后续的一个月中会在公司中继续开始Ajax的培训课程.由于是针对开发人员做的培训,结合以往的培训经验来看,示例演进的方式可能会有比较好的效果.所以我在javascript的培训中选择了俄罗斯方块作为示例讲解.
选择的目的在于:
1:俄罗斯方块数据结构简单.
2:用的了Javascript中的许多关键的定义,比如事件,定时器,浏览器对象等.
3:代码实现比较容易.
由于Ajax开发中Javascript是关键,配合着Ajax讲义.我在后续的一个月中会在公司中继续开始Ajax的培训课程.由于是针对开发人员做的培训,结合以往的培训经验来看,示例演进的方式可能会有比较好的效果.所以我在javascript的培训中选择了俄罗斯方块作为示例讲解.
选择的目的在于:
1:俄罗斯方块数据结构简单.
2:用的了Javascript中的许多关键的定义,比如事件,定时器,浏览器对象等.
3:代码实现比较容易.
对于这次培训的主要做法是逐步演进的方式,这次公布的代码的可读性和可维护性都存在问题,同时没有使用Javascript重的自定义对象来处理,代码冗余比较大.从代码来看没有多少javascript的语言特色.这样的代码的主要目的在于先引导培训人员了解问题,等对这些问题掌握之后,我们在对代码中的问题点提出优化.当课程结束之后,最后的代码的风格可能和现在公布的完全不一样.可能现在的代码像程序代码,最后的代码就会具备有脚本的风格.
发布时候到blog上的时候,由于滚动条会造成的屏幕来回抖动,大家可以将源码另存后玩.
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<script language=javascript>
//Author:Yice
//2007-11-30
//version:1.03
var iMapX=20,iMapY=10;
var iModelWidthLength =25;
var arrMapCore;
var arrMapCoreDraw;
var arrAllModel = new Array(
'0000111100000000',
'0100010001000100',
'0000111100000000',
'0100010001000100',
'0000011001100000',
'0000011001100000',
'0000011001100000',
'0000011001100000',
'0100111000000000',
'0100011001000000',
'0000111001000000',
'0100110001000000',
'0100010001100000',
'0000111010000000',
'0110001000100000',
'0010111000000000',
'0010001001100000',
'1000111000000000',
'0110010001000000',
'1110001000000000',
'0100011000100000',
'0110110000000000',
'0100011000100000',
'0110110000000000',
'0010011001000000',
'1100011000000000',
'0010011001000000',
'1100011000000000');
var aCurPoint = { x:0, y:3 };
var iCurrentModel =0;
var iPointAction =0;
var iActionKey =39;
var iNextPointAction =0;
var iNextModel =0;
var iScore =0;
var objTime = null;
var bIsGameOver = false;
function InitMapCore()
{
arrMapCore = new Array(iMapX);
for (var x=0;x<arrMapCore.length;x++)
{
arrMapCore[x] = new Array(iMapY);
for(var y=0;y<arrMapCore[x].length;y++)
arrMapCore[x][y] = 0;
}
}
function CopaDateToDrawArray(arrFrom,arrTo)
{
arrTo = new Array(arrFrom.length);
for (var x=0;x<arrFrom.length;x++)
{
arrTo[x] = new Array(arrFrom[x].length);
for(var y=0;y<arrFrom[x].length;y++)
arrTo[x][y] = arrFrom[x][y];
}
return arrTo;
}
function FormatModel(strModel)
{
var arrModel = new Array(4);
for (var x = 0; x < 4; x++)
{
arrModel[x] = new Array(4);
for (var y = 0; y < 4; y++) {
arrModel[x][y] = strModel.charAt(x*4+y)
}
}
return arrModel;
}
function CheckCanMove(arrMapTemp,arrModel,aMoveToPoint)
{
if((aMoveToPoint.y == -4 || aMoveToPoint.y == arrMapTemp[0].length +3)
|| aMoveToPoint.x == arrMapTemp.length +3)
return false;
for (var x = aMoveToPoint.x; x < aMoveToPoint.x +4; x++)
{
for (var y = aMoveToPoint.y; y < aMoveToPoint.y +4; y++)
{
if (x < 0 || y< 0 || x >= arrMapTemp.length || y>=arrMapTemp[0].length)
{
if(arrModel[x - aMoveToPoint.x][y-aMoveToPoint.y] ==1)
return false;
}else
{
if ((arrMapTemp[x][y] == 1) && arrModel[x - aMoveToPoint.x][y-aMoveToPoint.y] ==1)
{
return false;
}
}
}
}
return true;
}
function MoveTO(arrMapTemp,arrModel,aMoveToPoint)
{
for (var x = aMoveToPoint.x; x < aMoveToPoint.x +4; x++)
{
for (var y = aMoveToPoint.y; y < aMoveToPoint.y +4; y++)
{
if ((x < 0 || y< 0) || (x == arrMapTemp.length +4 || y == arrMapTemp[0].length +4) )
{
continue;
}
if(arrModel[x - aMoveToPoint.x][y-aMoveToPoint.y] ==1)
arrMapTemp[x][y] = arrModel[x - aMoveToPoint.x][y-aMoveToPoint.y];
}
}
return arrMapTemp;
}
function CleanLine(arrMapTemp)
{
var bCanClean = true;
var iCleanLineCount =0;
for(var x=0;x<arrMapTemp.length;x++)
{
bCanClean = true;
for(var y=0;y<arrMapTemp[x].length;y++)
{
if(arrMapTemp[x][y] == 0)
{
bCanClean = false;
break;
}
}
if(bCanClean)
{
iCleanLineCount++;
for (var z=x;z>0;z--)
arrMapTemp[z] = arrMapTemp[z-1];
for (var i=0;i< arrMapTemp[0].length ;i++)
arrMapTemp[0][i] = 0;
bCleaned = true;
}
}
CountScore(iCleanLineCount);
if(bCanClean)
DrawScore();
return arrMapTemp;
}
function CountScore(iLine)
{
switch (iLine) {
case 1 :iScore += 10; break;
case 2 :iScore += 30; break;
case 3 :iScore += 50; break;
case 4 :iScore += 100; break;
}
}
function DrawScore()
{
var obj= GetControl("dScore");
obj.innerHTML= iScore;
obj.style["width"] = (4* iModelWidthLength+2)+"px";
}
function ColMove(aMoveToPoint,arrModel)
{
var arrMapCoreDraw = CopaDateToDrawArray(arrMapCore,arrMapCoreDraw);
if(CheckCanMove(arrMapCore,arrModel,aMoveToPoint))
{
arrMapCoreDraw = MoveTO(arrMapCoreDraw,arrModel,aMoveToPoint);
aCurPoint = aMoveToPoint;
}else
{
arrMapCoreDraw = MoveTO(arrMapCoreDraw,arrModel,aCurPoint);
}
DrowScreen(arrMapCoreDraw,"dMapInformation");
}
function GameOver()
{
if(objTime != null)
clearTimeout(objTime)
bIsGameOver = true;
}
function RowMove(aMoveToPoint,arrModel)
{
var arrMapCoreDraw = CopaDateToDrawArray(arrMapCore,arrMapCoreDraw);
if(CheckCanMove(arrMapCoreDraw,arrModel,aMoveToPoint))
{
arrMapCoreDraw = MoveTO(arrMapCoreDraw,arrModel,aMoveToPoint);
arrMapCoreDraw=CleanLine(arrMapCoreDraw);
DrowScreen(arrMapCoreDraw,"dMapInformation");
aCurPoint = aMoveToPoint;
return false;
}else
{
arrMapCore = MoveTO(arrMapCore,arrModel,{ x:aMoveToPoint.x-1, y:aMoveToPoint.y });
arrMapCore=CleanLine(arrMapCore);
DrowScreen(arrMapCore,"dMapInformation");
aCurPoint = { x:0, y:3 };
CreateModel();
if(IsGameOver())
{
GameOver();
}
return true;
}
}
function IsGameOver()
{
var arrMapCoreDraw = CopaDateToDrawArray(arrMapCore,arrMapCoreDraw);
var aMoveToPoint = { x:aCurPoint.x, y:aCurPoint.y};
var strModel=arrAllModel[iCurrentModel*4+iPointAction];
var arrModel = FormatModel(strModel);
if(CheckCanMove(arrMapCoreDraw,arrModel,aMoveToPoint))
{
return false;
}else
{
return true;
}
}
function CreateModel()
{
iCurrentModel = iNextModel;
iPointAction = iNextPointAction;
iNextModel = Math.round(Math.random() * 6);
iNextPointAction =Math.round(Math.random() * 3);
var strModel=arrAllModel[iNextModel*4+iNextPointAction];
var arrModel = FormatModel(strModel);
DrowScreen(arrModel,"dNextModel");
}
function DrowScreen(arrMap,mapID)
{
var obj= GetControl(mapID);
if(arrMap != null)
{
var strMapSrc = '';
var strMapSrcAll ='';
for (var x=0;x<arrMap.length;x++)
{
strMapSrc ="";
for(var y=0;y<arrMap[x].length;y++)
{
if(arrMap[x][y] ==1)
{
strMapSrc += "<div style='color:#FFF9F8; border-width:1px; border-color:#FFFFF0; border-style:solid;background-color:#000CC0;left:"+(y* iModelWidthLength)+"px; top:"+(x* iModelWidthLength)+"px; width:"+iModelWidthLength+"px; height:"+iModelWidthLength+"px; padding:0px; position:absolute;'></div>";
}else
{
strMapSrc += "<div style='color:#FFF9F8; border-width:1px; border-color:#FFFFF0; border-style:solid;background-color:#FFF8F0;left:"+(y* iModelWidthLength)+"px; top:"+(x* iModelWidthLength)+"px; width:"+iModelWidthLength+"px; height:"+iModelWidthLength+"px; padding:0px; position:absolute;'></div>";
}
}
strMapSrcAll = strMapSrcAll +strMapSrc + "<Br>";
}
obj.innerHTML= strMapSrcAll;
obj.style["width"] = (arrMap[0].length* iModelWidthLength+2)+"px";
obj.style["height"] = (arrMap.length* iModelWidthLength+2)+"px";
}
}
if(typeof GetControl=="#ff0000") GetControl=function (id)
{
return document.getElementById(id);
};
function ModelChange(aMoveToPoint)
{
var iPointActionBak = iPointAction;
iPointAction=iPointAction+1;
if(iPointAction>3)
iPointAction =0;
strModel=arrAllModel[iCurrentModel*4+iPointAction];
arrModel = FormatModel(strModel);
var arrMapCoreDraw = CopaDateToDrawArray(arrMapCore,arrMapCoreDraw);
if(CheckCanMove(arrMapCore,arrModel,aMoveToPoint))
{
ColMove(aMoveToPoint,arrModel);
}else
{
iPointAction=iPointActionBak;
}
}
function OnMessageProcess()
{
var strModel=arrAllModel[iCurrentModel*4+iPointAction];
var arrModel = FormatModel(strModel);
var arrResult =null;
switch (iActionKey) {
case 39 : ColMove({ x:aCurPoint.x, y:aCurPoint.y+1 },arrModel); break;
case 37 : ColMove({ x:aCurPoint.x, y:aCurPoint.y-1 },arrModel); break;
case 38 : ModelChange({ x:aCurPoint.x, y:aCurPoint.y}); break;
case 40 : RowMove({ x:aCurPoint.x+1, y:aCurPoint.y },arrModel); break;
}
iActionKey=0;
}
function OnTimer() {
if(objTime != null)
clearTimeout(objTime)
iActionKey=40;
objTime = setTimeout(OnTimer,1000);
if(!bIsGameOver)
OnMessageProcess();
}
function KeyEvent(e)
{
try{
iActionKey = (document.all) ? window.event.keyCode: e.which;
}
catch(a){
iActionKey=KeyEvent.arguments[0].keyCode;
}
OnMessageProcess();
}
document.onkeydown=KeyEvent;
document.onkeypress=KeyEvent;
function Init()
{
bIsGameOver = false;
iCurrentModel =0;
iPointAction =0;
iActionKey =39;
iNextPointAction =0;
iNextModel =0;
iScore =0;
objTime = null;
}
function Start()
{
Init();
InitMapCore();
CreateModel();
DrawScore();
OnMessageProcess();
OnTimer();
iActionKey=38;
}
</script>
<body>
<div id="dAction" style="padding:0px; position:absolute; z-index:2;border-width:1px; border-color:#0C0100; border-style:solid;left:5px;top:10px;height:40px;width:100px">
<input type="button" value='Start' onclick='javascript:Start();'>
</div>
<div id="dScore" style="padding:0px; position:absolute; z-index:2;border-width:1px; border-color:#0C0100; border-style:solid;left:5px;top:50px; height:20px;width:100px"></div>
<div id="dNextModel" style="padding:0px; position:absolute; z-index:2;border-width:1px; border-color:#0C0100; border-style:solid;left:5px;top:170px;width:100px;height:100px;"></div>
<div id="dMapInformation" style="padding:0px; position:absolute; z-index:2;border-width:1px; border-color:#0C0100; border-style:solid;left:105px;top:10px;width:252px;height:502px;"></div>
</body>
</html>
选择的目的在于:
1:俄罗斯方块数据结构简单.
2:用的了Javascript中的许多关键的定义,比如事件,定时器,浏览器对象等.
3:代码实现比较容易.
对于这次培训的主要做法是逐步演进的方式,这次公布的代码的可读性和可维护性都存在问题,同时没有使用Javascript重的自定义对象来处理,代码冗余比较大.从代码来看没有多少javascript的语言特色.这样的代码的主要目的在于先引导培训人员了解问题,等对这些问题掌握之后,我们在对代码中的问题点提出优化.当课程结束之后,最后的代码的风格可能和现在公布的完全不一样.可能现在的代码像程序代码,最后的代码就会具备有脚本的风格.
发布时候到blog上的时候,由于滚动条会造成的屏幕来回抖动,大家可以将源码另存后玩.
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<script language=javascript>
//Author:Yice
//2007-11-30
//version:1.03
var iMapX=20,iMapY=10;
var iModelWidthLength =25;
var arrMapCore;
var arrMapCoreDraw;
var arrAllModel = new Array(
'0000111100000000',
'0100010001000100',
'0000111100000000',
'0100010001000100',
'0000011001100000',
'0000011001100000',
'0000011001100000',
'0000011001100000',
'0100111000000000',
'0100011001000000',
'0000111001000000',
'0100110001000000',
'0100010001100000',
'0000111010000000',
'0110001000100000',
'0010111000000000',
'0010001001100000',
'1000111000000000',
'0110010001000000',
'1110001000000000',
'0100011000100000',
'0110110000000000',
'0100011000100000',
'0110110000000000',
'0010011001000000',
'1100011000000000',
'0010011001000000',
'1100011000000000');
var aCurPoint = { x:0, y:3 };
var iCurrentModel =0;
var iPointAction =0;
var iActionKey =39;
var iNextPointAction =0;
var iNextModel =0;
var iScore =0;
var objTime = null;
var bIsGameOver = false;
function InitMapCore()
{
arrMapCore = new Array(iMapX);
for (var x=0;x<arrMapCore.length;x++)
{
arrMapCore[x] = new Array(iMapY);
for(var y=0;y<arrMapCore[x].length;y++)
arrMapCore[x][y] = 0;
}
}
function CopaDateToDrawArray(arrFrom,arrTo)
{
arrTo = new Array(arrFrom.length);
for (var x=0;x<arrFrom.length;x++)
{
arrTo[x] = new Array(arrFrom[x].length);
for(var y=0;y<arrFrom[x].length;y++)
arrTo[x][y] = arrFrom[x][y];
}
return arrTo;
}
function FormatModel(strModel)
{
var arrModel = new Array(4);
for (var x = 0; x < 4; x++)
{
arrModel[x] = new Array(4);
for (var y = 0; y < 4; y++) {
arrModel[x][y] = strModel.charAt(x*4+y)
}
}
return arrModel;
}
function CheckCanMove(arrMapTemp,arrModel,aMoveToPoint)
{
if((aMoveToPoint.y == -4 || aMoveToPoint.y == arrMapTemp[0].length +3)
|| aMoveToPoint.x == arrMapTemp.length +3)
return false;
for (var x = aMoveToPoint.x; x < aMoveToPoint.x +4; x++)
{
for (var y = aMoveToPoint.y; y < aMoveToPoint.y +4; y++)
{
if (x < 0 || y< 0 || x >= arrMapTemp.length || y>=arrMapTemp[0].length)
{
if(arrModel[x - aMoveToPoint.x][y-aMoveToPoint.y] ==1)
return false;
}else
{
if ((arrMapTemp[x][y] == 1) && arrModel[x - aMoveToPoint.x][y-aMoveToPoint.y] ==1)
{
return false;
}
}
}
}
return true;
}
function MoveTO(arrMapTemp,arrModel,aMoveToPoint)
{
for (var x = aMoveToPoint.x; x < aMoveToPoint.x +4; x++)
{
for (var y = aMoveToPoint.y; y < aMoveToPoint.y +4; y++)
{
if ((x < 0 || y< 0) || (x == arrMapTemp.length +4 || y == arrMapTemp[0].length +4) )
{
continue;
}
if(arrModel[x - aMoveToPoint.x][y-aMoveToPoint.y] ==1)
arrMapTemp[x][y] = arrModel[x - aMoveToPoint.x][y-aMoveToPoint.y];
}
}
return arrMapTemp;
}
function CleanLine(arrMapTemp)
{
var bCanClean = true;
var iCleanLineCount =0;
for(var x=0;x<arrMapTemp.length;x++)
{
bCanClean = true;
for(var y=0;y<arrMapTemp[x].length;y++)
{
if(arrMapTemp[x][y] == 0)
{
bCanClean = false;
break;
}
}
if(bCanClean)
{
iCleanLineCount++;
for (var z=x;z>0;z--)
arrMapTemp[z] = arrMapTemp[z-1];
for (var i=0;i< arrMapTemp[0].length ;i++)
arrMapTemp[0][i] = 0;
bCleaned = true;
}
}
CountScore(iCleanLineCount);
if(bCanClean)
DrawScore();
return arrMapTemp;
}
function CountScore(iLine)
{
switch (iLine) {
case 1 :iScore += 10; break;
case 2 :iScore += 30; break;
case 3 :iScore += 50; break;
case 4 :iScore += 100; break;
}
}
function DrawScore()
{
var obj= GetControl("dScore");
obj.innerHTML= iScore;
obj.style["width"] = (4* iModelWidthLength+2)+"px";
}
function ColMove(aMoveToPoint,arrModel)
{
var arrMapCoreDraw = CopaDateToDrawArray(arrMapCore,arrMapCoreDraw);
if(CheckCanMove(arrMapCore,arrModel,aMoveToPoint))
{
arrMapCoreDraw = MoveTO(arrMapCoreDraw,arrModel,aMoveToPoint);
aCurPoint = aMoveToPoint;
}else
{
arrMapCoreDraw = MoveTO(arrMapCoreDraw,arrModel,aCurPoint);
}
DrowScreen(arrMapCoreDraw,"dMapInformation");
}
function GameOver()
{
if(objTime != null)
clearTimeout(objTime)
bIsGameOver = true;
}
function RowMove(aMoveToPoint,arrModel)
{
var arrMapCoreDraw = CopaDateToDrawArray(arrMapCore,arrMapCoreDraw);
if(CheckCanMove(arrMapCoreDraw,arrModel,aMoveToPoint))
{
arrMapCoreDraw = MoveTO(arrMapCoreDraw,arrModel,aMoveToPoint);
arrMapCoreDraw=CleanLine(arrMapCoreDraw);
DrowScreen(arrMapCoreDraw,"dMapInformation");
aCurPoint = aMoveToPoint;
return false;
}else
{
arrMapCore = MoveTO(arrMapCore,arrModel,{ x:aMoveToPoint.x-1, y:aMoveToPoint.y });
arrMapCore=CleanLine(arrMapCore);
DrowScreen(arrMapCore,"dMapInformation");
aCurPoint = { x:0, y:3 };
CreateModel();
if(IsGameOver())
{
GameOver();
}
return true;
}
}
function IsGameOver()
{
var arrMapCoreDraw = CopaDateToDrawArray(arrMapCore,arrMapCoreDraw);
var aMoveToPoint = { x:aCurPoint.x, y:aCurPoint.y};
var strModel=arrAllModel[iCurrentModel*4+iPointAction];
var arrModel = FormatModel(strModel);
if(CheckCanMove(arrMapCoreDraw,arrModel,aMoveToPoint))
{
return false;
}else
{
return true;
}
}
function CreateModel()
{
iCurrentModel = iNextModel;
iPointAction = iNextPointAction;
iNextModel = Math.round(Math.random() * 6);
iNextPointAction =Math.round(Math.random() * 3);
var strModel=arrAllModel[iNextModel*4+iNextPointAction];
var arrModel = FormatModel(strModel);
DrowScreen(arrModel,"dNextModel");
}
function DrowScreen(arrMap,mapID)
{
var obj= GetControl(mapID);
if(arrMap != null)
{
var strMapSrc = '';
var strMapSrcAll ='';
for (var x=0;x<arrMap.length;x++)
{
strMapSrc ="";
for(var y=0;y<arrMap[x].length;y++)
{
if(arrMap[x][y] ==1)
{
strMapSrc += "<div style='color:#FFF9F8; border-width:1px; border-color:#FFFFF0; border-style:solid;background-color:#000CC0;left:"+(y* iModelWidthLength)+"px; top:"+(x* iModelWidthLength)+"px; width:"+iModelWidthLength+"px; height:"+iModelWidthLength+"px; padding:0px; position:absolute;'></div>";
}else
{
strMapSrc += "<div style='color:#FFF9F8; border-width:1px; border-color:#FFFFF0; border-style:solid;background-color:#FFF8F0;left:"+(y* iModelWidthLength)+"px; top:"+(x* iModelWidthLength)+"px; width:"+iModelWidthLength+"px; height:"+iModelWidthLength+"px; padding:0px; position:absolute;'></div>";
}
}
strMapSrcAll = strMapSrcAll +strMapSrc + "<Br>";
}
obj.innerHTML= strMapSrcAll;
obj.style["width"] = (arrMap[0].length* iModelWidthLength+2)+"px";
obj.style["height"] = (arrMap.length* iModelWidthLength+2)+"px";
}
}
if(typeof GetControl=="#ff0000") GetControl=function (id)
{
return document.getElementById(id);
};
function ModelChange(aMoveToPoint)
{
var iPointActionBak = iPointAction;
iPointAction=iPointAction+1;
if(iPointAction>3)
iPointAction =0;
strModel=arrAllModel[iCurrentModel*4+iPointAction];
arrModel = FormatModel(strModel);
var arrMapCoreDraw = CopaDateToDrawArray(arrMapCore,arrMapCoreDraw);
if(CheckCanMove(arrMapCore,arrModel,aMoveToPoint))
{
ColMove(aMoveToPoint,arrModel);
}else
{
iPointAction=iPointActionBak;
}
}
function OnMessageProcess()
{
var strModel=arrAllModel[iCurrentModel*4+iPointAction];
var arrModel = FormatModel(strModel);
var arrResult =null;
switch (iActionKey) {
case 39 : ColMove({ x:aCurPoint.x, y:aCurPoint.y+1 },arrModel); break;
case 37 : ColMove({ x:aCurPoint.x, y:aCurPoint.y-1 },arrModel); break;
case 38 : ModelChange({ x:aCurPoint.x, y:aCurPoint.y}); break;
case 40 : RowMove({ x:aCurPoint.x+1, y:aCurPoint.y },arrModel); break;
}
iActionKey=0;
}
function OnTimer() {
if(objTime != null)
clearTimeout(objTime)
iActionKey=40;
objTime = setTimeout(OnTimer,1000);
if(!bIsGameOver)
OnMessageProcess();
}
function KeyEvent(e)
{
try{
iActionKey = (document.all) ? window.event.keyCode: e.which;
}
catch(a){
iActionKey=KeyEvent.arguments[0].keyCode;
}
OnMessageProcess();
}
document.onkeydown=KeyEvent;
document.onkeypress=KeyEvent;
function Init()
{
bIsGameOver = false;
iCurrentModel =0;
iPointAction =0;
iActionKey =39;
iNextPointAction =0;
iNextModel =0;
iScore =0;
objTime = null;
}
function Start()
{
Init();
InitMapCore();
CreateModel();
DrawScore();
OnMessageProcess();
OnTimer();
iActionKey=38;
}
</script>
<body>
<div id="dAction" style="padding:0px; position:absolute; z-index:2;border-width:1px; border-color:#0C0100; border-style:solid;left:5px;top:10px;height:40px;width:100px">
<input type="button" value='Start' onclick='javascript:Start();'>
</div>
<div id="dScore" style="padding:0px; position:absolute; z-index:2;border-width:1px; border-color:#0C0100; border-style:solid;left:5px;top:50px; height:20px;width:100px"></div>
<div id="dNextModel" style="padding:0px; position:absolute; z-index:2;border-width:1px; border-color:#0C0100; border-style:solid;left:5px;top:170px;width:100px;height:100px;"></div>
<div id="dMapInformation" style="padding:0px; position:absolute; z-index:2;border-width:1px; border-color:#0C0100; border-style:solid;left:105px;top:10px;width:252px;height:502px;"></div>
</body>
</html>
